学习日记-webpack + vue cli + element ui 配置

学习地址

1.安装vue-cli

npm i -g vue-cli
vue init webpack
复制代码

如果想新创建一个文件夹作为项目文件夹

mkdir my-project && cd my-project
复制代码

执行

npm install

npm run dev
复制代码

我在构建时使用webpack4 会报错

百度到这篇文章： 使用webpack4+vue-cli开发，问题总结 解决

就会看到 Welcome to Your Vue.js App 和一个大大的logo

2.安装css识别工具

刚刚的页面，css样式是好使的，我就尝试了下用less 直接写，一样也是好好使的。

发现在 build/webpack.base.conf.js 中，有下面这个配置

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueLoaderConfig // vueLoaderConfig
}
复制代码

百度了 vue-loader 这篇文章，原来都配置好了

下面是手动安装配置css识别工具，可跳过

npm i -D style-loader css-loader file-loader
复制代码

less

npm install  less less-loader --save-dev
复制代码

3.安装element-ui组件

npm i element-ui -S
复制代码

4.在main.js文件中加入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
复制代码

由于是用来学习的项目，所以没有按需加载，按需加载请在 官网 查阅

5.在.babelrc文件中配置（这一步，我还没有学习，所以直接拷贝过来了，如果有懂这块的，酌情处理）

{
    "presets": [
        ["env", {
            "modules": false,
            "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] }
        }],
        "stage-2"
    ],
    "plugins": [
        "transform-runtime", ["component", [{
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
        }]]
    ],
    "comments": false,
    "env": {
        "test": {
            "presets": ["env", "stage-2"],
            "plugins": ["istanbul"]
        }
    }
}
复制代码

此文件为vue脚手架中的babel配置文件，用来将es6代码转换成浏览器能够识别的代码。

直接复制即可