发表于: 2020-04-23 23:23:03

2 1811


今天完成的事情:学vue脚手架的用法
明天计划的事情:继续学vue,准备开始任务
遇到的问题:(遇到什么困难,怎么解决的)
收获:按照网上的禁用eslint的方法这是掉package.json文件内eslint的相关配置,删除node_module的文件夹,再用npm install重新安装。坑就从天而降,安装不上,网上搜了几种办法,有说用npm cache clear --force清楚缓存,又说更新npm -v更新到最新版本的,都不行,最后仔细看了一下报错原因,居然就是因为注释掉的几个eslint的相关配置,取消后再次运行安装上了。。。。

全局部署elementui之后,发现之前mintuiInfiniteScroll报错了,网上搜到的解决办法就是增加纵向滚动条添加父级的高度100vh,确实正常能使用了,法相调整到手机页面后会多一个滚动条,不加就没有,在elementui下面上滑到底部后不能出发自动刷新的效果,mintui可以直接写不需要添加纵向滚动条。     

ElementUi官网给的配置很详细,不像mintui按照配置就是坑,不管全局部署还是按需部署,都与要配置的东西。

1.main.js内全局配置部署


import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2.CLI4.0babel.config.js内,以前的版本在.babelrc 文件内配置


"component",

      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
        style: true
      },

      "element-ui"

    ]

3.webpack.config.js内添加这个配置elementui新版本官网没说,在老版本有提到,添加之后可能会报错,这个可能是没有file-loader依赖包的缘故,看看package.json里面有没有,没有添加依赖就可以了
{
  test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  loader: 'file-loader'

}  

按需引入缩小了项目文件的大小,能有一定的提升项目运行速度的作用,

import {Button,Row} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button)
Vue.use(Row)

区别就是在于main.js内的部署的区别,用到哪个组件,就部署相应的组件并use就可以正常用了


返回列表 返回列表
评论

    分享到