VUE项目实战一

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、路由懒加载和异步组件