1、网络不是很好时，首先安装cnpm淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、搭建vue环境

vue官网：https://v2.cn.vuejs.org/

#初始化项目
npm init -y#安装vue脚手架
cnpm i -D @vue/cli  
cnpm i -D @vue/cli@4.5.15#查看脚手架版本
npx vue -V#创建项目的两种方式
#1、使用命令创建
npx vue create project_vue2
#2、使用界面创建
npx vue ui

3、安装elementui插件（饿了么公司基于vue开的的vue的Ui组件库）

elementui官网：https://element.eleme.cn/#/zh-CN/component/quickstart

#-S表示  --save
cnpm i element-ui@2.15.8 -S#引入整个element UI的css 和 插件两种方式，全局引入和按需引入 (main.js)
#引入
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'#挂载
Vue.use(Element)#按需引入  main.js
#安装插件
cnpm install babel-plugin-component -Dimport { Button, Tag } from 'element-ui'
#挂载
Vue.use(Button)
Vue.use(Tag)#将组件模块化  element-ui
1、在babel.cinfig.js中配置插件"plugins": [//按需引入element-ui时，需要配置插件["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
2、新建element.js，引入需要的组件，并挂载
import Vue from 'vue'
import { Button,Tag } from 'element-ui'Vue.use(Button)
Vue.use(Tag)3、在mian.js中引入
import '../plugins/element.js'

4、css预处理器（饿了么公司基于vue开的的vue的Ui组件库）

查看版本对应，否则会有很多兼容问题：https://www.npmjs.com/package/node-sass

1、安装  注意node版本必须是v14.*，此处使用v14.19.1
cnpm i sass-loader@8.0.0 node-sass@4.14.1 -S2、在style中使用lang="scss" 可以支持嵌套写法
3、使用less预处理
cnpm i less@3.13.1 less-loader@7.3.0 -S

5、css样式重置

官网地址：https://meyerweb.com/eric/tools/css/reset/

1、在assets静态资源目录css下新建reset.css文件，将官网的内容粘贴进入
2、在App.vue中引入

6、图标库安装使用

官网地址：https://www.bootcss.com/p/font-awesome/

1、安装
cnpm i font-awesome -D
2、在mian.js中引入样式文件
import 'font-awesome/css/font-awesome.min.css'
3、使用，在页面中使用class="fa fa-user"

7、安装请求插件axios

1、安装
cnpm i axios -D/S
2、在main.js中引入并挂载到原型，可以在全局使用
import axios from 'axios'
Vue.prototype.axios = axios;

8、安装路由router

1、安装
cnpm i vue-router@3.5.3 -S
2、在main.js引入路由
import Router from './router/index.js'

9、路由懒加载和异步组件

export default new Router({routes:[{path : '/',redirect : '/login',// 官方推荐的路由懒加载写法，不需要引入组件了component : () => import ('@/components/Login')} ,{path : '/login',name : 'Login',// 官方推荐的路由懒加载写法，不需要引入组件了component : () => import ('@/components/Login')} ,{path : '/home',//【一般组件路由写法】// component : Home,// 官方推荐的路由懒加载写法，不需要引入组件了// component : () => import ('@/components/Home')//使用异步组件component : resolve => require(['@/components/Home'],resolve)            }]//路由模式分history/hash,mode:'history'
})

10、表单验证

vscode中安装any-rule插件，使用F1可以获取正则