第一步:
安装 node.js(官网:https://nodejs.org/en/ 使用LTS版本)软件安装包名称一般为node.exe,双击完成nodejs自带安装npm、npm.
第二步:
因为npm i webpack -g的时候会自动从国外下载,有时候国内防火墙会阻止而导致下载失败,所以我们将npm改为国内的 npm install nrm -g
安装webpack npm i webpack -g
安装webpack和vue的脚手本用于打包 npm i webpack-cli vue-cli -g
第三步:
打开你想建立的项目所在路径 -按住shift右击打开命令窗输入 vue init webpack 项目名称
进行选择后,会创立一个vue项目
第四步:
安装scss npm i node-sass sass-loader -d
第五步:
1,安装element npm i element-ui -S
2、引入 在main.js写入一下内容
import ElementUI from 'element-ui';
Vue.use(ElementUI);
3、按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component: npm install babel-plugin-component -D
4,然后,将 .babelrc 修改为:
{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
可能出现问题-
1、 Error: Couldn't find preset "es2015" relative to directory;
将.babelrc文件重的内容改为:
{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
然后再执行npm install --save-dev babel-preset-es2015
2、npm install报错Maximum call stack size exceeded;