1、搭建初始环境
1、 npm init -y # 初始化package.json文件,注意不要到中文路径
2、 npm i -D @vue/cli@4.5.15 # vue-cli3. 以后命令,安装vue脚手架。i 表示 install,-D就是 --save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面,这里指定了版本
3、 npm uninstall @vue/cli # 卸载vue脚手架
4、 npx vue -V # 查看脚手架版本
5、 npx vue create XXX # 创建项目,XXX表示项目名。
2、安装element-ui、sass、图标库
1、npm i element-ui -S # 全局安装element-ui
2、npm install babel-plugin-component -D # 进行按需安装,相比第一条,会影响项目最终大小,推荐第二种
3、完成上述第二步后,具体需要在项目中进行如下操作:
a、修改bable.config.js
b、创建plugins文件夹,并在其中编写element.js文件
c、在main.js中引入文件
d、安装sass库,建议安装如下版本,避免冲突
1、npm i sass-loader@7 node-sass@4 -S # 安装sass预处理器
2、npm i less@3 less-loader@7 # 如果想安装less 也可以选择此版本
代码截图:
e、进行样式重置:CSS Tools: Reset CSS,,参考该链接。代码如下:
f、安装字体库:
1、npm i -D font-awesome # 安装字体库
4、安装axios,并挂载致Vue
1、npm i axios -S # 安装axios
5、安装vue路由,本文中,vue版本为2.0,所以此处使用3.5.3版本路由,参考如下
1、npm i vue-router@3.5.3 -S # 安装3.5.3版本的路由
6、路由懒加载和异步组件