vue 初始化webpack+element-ui 和css的scss编译

vue+webpack+element-ui初始化方法

vue npm项目构建方式

1.vue安装方法

npm install vue

2.vue-cil安装

npm install -g @vue/cli
或
yarn global add @vue/cli

vue初始化方法

name => 自己的项目名称

vue init webpack name

如下：

完成后执行：

npm run dev

如果：

解决方案：
修改config文件夹下index.js port:8080 改为如：port: 8081

在重新执行

npm run dev

vue项目中添加element-ui

注意：
使用下面安装element-ui的时候必须是初始化（init）的时候使用。
否则会修改‘/src/App.vue’里面的内容
执行下面命令进行安装

vue add element

npm install babel-plugin-component -D

注意：element-ui下图是引入的全部引入，也可以按需引入element-ui。

额外添加：scss在vue中使用
安装：node-sass、sass-loader

npm install node-sass sass-loader --save

在build文件夹中 webpack.base.conf 中 rules 配置如下：(注意ESLint规则)

{
test: /.scss$/,
loader: ‘vue-style-loader!css-loader!sass-loader’
}

修改完毕后重新执行 npm run dev

学习网站

vue：https://cn.vuejs.org/
element-ui：http://element-cn.eleme.io/#/zh-CN
webpack：https://webpack.github.io/