1.   vue create 项目名称 

• 使用脚手架创建文件夹，不能是大写，选择默认vue2（直接生成更加简便）

2.   在Vue组件中如果声明变量但不使用就会报错，解决办法：

3.   打开Vue文件会发现第一行爆红，并且要求创建的组件必须是多个单词，解决办法：

4.   配置Vue组件在格式化时有没有分号，用单引号还是双引号

• 在setting.json中设置，文件 -> 首选项 -> 设置 -> 用户 -> 扩展 -> Vetur，点击在setting.json中设置，需要提前下载好Vetur这个插件：

5.   如果组件需要用到css、js文件，需要作为公共文件时，有两种方法：

• 在src下面添加asset文件夹，存放公共文件，在App组件中全局引入import "./bootstrap"，但是Vue检查import非常严格,如果存在不使用的字体图标时，会报错

• 所以采用第二种方案：在public文件夹下面存放，然后index.html文件引入，不能使用相对路径，得使用<%= BASE_URL %>，在别的地方不用就先注释了，等回头看的时候再打开
  

6.   设置路由Vuerouter

• 创建pages文件夹，路由组件放到pages文件夹里面，一般组件放到components文件夹里

• 命令：npm i vue-router@3，如果不写版本号那就默认下载4版本，而4版本对应的是Vue3

• 下载好之后，在src下新建router文件夹，下面新建index.js，Import引入路由器VueRouter、引入路由组件、实例化路由器并暴露出去

• 最后在main.js中引入VueRouter路由器，引入router文件夹下的实例化对象路由器，并且应用路由组件 Vue.use()、在Vue实例对象中router:router

7.   创建Vuex仓库store

• 首先需要配置Vuex环境 下载命令：npm i vuex@3，vue2使用vuex3，vue3使用vuex4，然后引入并使用vuex文件，import Vuex from "vuex"，App.use(Vuex)，还需要另外书写store文件，新建store文件夹下面index.js，在里面配置

• 要在store应用好，然后再引入到main.js中， ES6中的import模块化引入会提升到文件的最前面，所以就算 Vue.use(Vuex) 在 import 前面也不行，所以就需要在store中做出改变

• 在main.js中注册Vuex对应的store属性（注意Vuex中有很简便的方法Map,用法：import{mapState，mapGetters}from vuex）

8.   使用axios封装请求requests

• 下载axios，命令：npm i axios，然后在utils工具文件夹下的requests.js封装

• 然后再全局引入到main.js中，下面的组件就都能够使用了
  

9.   引入element-UI

• 下载命令： vue add element，然后选择第二个按需引入，因为完全引入的体积太大了

• 选择第一个中文语言，这时候就自动添加了一个plugin文件夹，下面自动生成了element的js文件，在main.js中也自动引入了

• 把element-ui中的组件全部引入进去elemtne.js中注册，这样到后面不用使用一个再引入一个了，最后不用的话再删除掉

10.   使用iconfont图标

• 在main.js中全局引入iconfont图标，下面的组件就都可以使用了

11.   打包为dist文件夹后正常显示

• 在vue.config.js中设置打包之后的路径