从18年7月16号入职到现在已经5个月多了，入职之后就一直使用vue，来这边温习记录下使用的步骤。在我的理解中vue其实每个组件都是有同一个根父组件app，这个app父组件是挂在html文件上的，页面的转换只是html文件里面组件的转换，所以形成了静态页面。如果有什么理解误区，望各位大佬可以指点出来，不胜感激。
项目创建使用等步骤
全局安装vue脚手架vue-cli
npm install --global vue-cli
创建一个基于webpack 模板的新项目（切换路径到创建的文件夹下）
vue init webpack myproject （myproject项目的名称）
之后会出现创建项目一些选择信息vue
Project name (项目名称,不可以大写)
Project description (项目描述)
Author (作者)
Vue build (vue创建的方式)
Install vue-router (是否安装路由,vue的页面内容的变换基本都是路由的变化,这个是必须安装的,也可以手动在项目里面安装, npm i vue-router)
Use ESLint to lint your code (是否使用ESLint检测你的代码,是一种语法规则建议使用)
Pick an EESLint preset (选择分支风格,我一般都是选择第一个：standard(https://github.com/feross/standard) js的标准)
Set up unit tests (是否安装单元测试,这个我也是默认安装的,但是基本没有使用过，哈哈)
Pick a test runner (选择一个单元测试运行器,这个也是同上哈~~)
Setup e2e tests with Nightwatch (是否安装E2E测试框架NightWatch,E2E就是End to End,即消费端对产品端的商业模式)
Should we run 'npm install' for you after the project has been created? (在项目创建后，我们需要为您运行“NPM安装”吗？有三个选项,我选择的是第一个npm)
我基本上创建的时候一路回车到底，全部默认，感觉那个单元测试我可以省略不安装~~~
创建完成之后使用WebStorm打开（我用的开发工具是webstorm）
打开之后的目录结构大概是这个样子：
assets中一般存放静态资源文件
components中存放些vue组件(我一般都是把导航栏、菜单栏、页脚、路由主要显示部分、和一些多处使用的组件放在里面)
router中有一个index.js文件，里面就是路由的注册，先引入文件，然后注册
const 组件名称= resolve => require.ensure([], () => r(require('@/组件地址')), resolve)
{
path:'/example', name:'example',
meta: {
requireAuth: true;(这边我基本上都是用来判断这个路由是否需要登录)
},
component:example
},
还有一种注册方式，路由的懒加载，不需要引入组件了 (这种方式还是比较不错的虽然我用的比较少，毕竟项目文件不是很大，比较推荐这种)
{
path:'/example', name:'example',
meta: {
requireAuth: true;(这边我基本上都是用来判断这个路由是否需要登录)
},
component (resolve) {
require(['@/组件地址'], resolve)
}
},
每次我都是会重新创建文件夹自定义我自己喜欢的目录结构：
assets文件夹里面添加了images(图片资源),scss(scss样式文件),temp(临时文件,项目上线之前删除)
components文件夹里面加了一个layout文件夹,我都是存放导航栏,页脚,左侧菜单栏,路有部分内容
http只要是axios请求的文件配置封装文件
util存放一些工具配置文件，比如富文本(我一般也只用在这里了。。。)
variable是全部变量的统一处理的文件我把需要用到的全局变量全部封装到这个文件夹下的js中了
views就是主要的路由组件了
结构弄完了，下面就需要做些配置了（main.js文件）
Element（https://element.faas.ele.me/#/zh-CN）
配合vue使用的页面样式我一般都是用的Element，下面安装Element（https://element.faas.ele.me/#/zh-CN）
npm i element-ui -S
安装完成之后引入样式和组件库
import 'element-ui/lib/theme-chalk/index.css'
注册
Vue.use(ElementUI)
router
如果创建项目的时候没有安装路由就需要安装了
npm i vue-router
在创建vue实例的时候加上router
sass（https://www.sass.hk/）
之后在安装一个sass，一个CSS扩展语言
安装sass依赖包
npm install --save-dev sass-loader
npm install --save-dev node-sass
由于会使用sass的全局变量需要安装一个依赖包
npm install --save-dev sass-resources-loader
在build文件夹下的webpack.base.conf.js的rules里面添加配置（这边我没有配置，也是ok的，不明所以）
{test:/\.sass$/, loaders: ['style','css','sass']}
在assets下的scss文件夹中新建index.scss文件（里面写全局样式）
在新建_variable.scss文件（全局变量,sass规定部分样式引入文件名前面需要加下划线）
在index.scss中引入_variable.scss
@import "variables";
我在gitHub上看到了一个页面标准化文件，被我copy下来导入(https://github.com/necolas/normalize.css/blob/master/normalize.css)
_normalize.scss文件导入index.scss
@import "normalize";
在mian.js文件中引入scss全局样式
import '@/assets/scss/index.scss'
由于样式变量不可以在组件中直接使用，需要引包，觉得有点low，就查资料最后找到了方法
在build文件夹下的utils.js文件cssLoaders中加上这些代码：
并且将下面的sass和scss替换掉：
全局变量
之后在搞一下全局变量，我一般用来存接口请求IP和端口号
在variable下创建index.js，格式如下
export default{
host: '',
}
如果有其他的全局变量可以继续往下写
mian.js 引入
import Variablefrom './variable/index.js'
Vue.prototype.variable = Variable
Quill富文本（https://www.npmjs.com/package/vue-quill-editor）
如果需要使用富文本，我使用的是Quill
安装依赖
npm install vue-quill-editor --save
在mian.js中引入，并且引入样式
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
注册
Vue.use(VueQuillEditor)
Quill是可以自定义配置的，我是将配置文件放到了util文件中的然后在使用的页面引入配置,因为它自带的图片上传是base64，直接入库的话，请求头太长，导致网页十分的卡，文件上传的处理十分非常有必要的，下面是我在上一个项目中富文本的配置
下面的是图片上传处理
Distpicker地区插件（https://www.npmjs.com/package/v-distpicker）
下面是地区组件，一般来说地区存在数据库中，但是有些项目比较小所以会在前台使用地区组件，我使用的是Distpicker
安装
npm install v-distpicker --save
在mian.js中引入
import Distpicker from 'v-distpicker'
注册
Vue.use(Distpicker)
Vue.component('v-distpicker', Distpicker)
axios （https://www.npmjs.com/package/axios）
接下来就是axios请求的封装处理了
安装
npm install --save axios
在mian.js中引入
import axios 'axios' （axios不需要使用vue.use()，我也是不明所以然啊）
到这里我都会对axios进行二次封装
在http文件夹中新建api.js 文件
引入axios
import axios 'axios'
对post，get请求进行封装
get请求:
postJson请求:
postForm请求:
文件请求:(这个其实不怎么用到Element有文件上传的插件)
封装完成了之后对它们进行输出（install 方法将被作为 Vue 的参数调用）：
在mian.js中引入并且注册
import axiosApi from '@/http/api.js'
Vue.use(axiosApi)
axios有两个拦截器请求拦截器，响应拦截器可以进行处理
响应拦截器：
请求拦截器：（上个项目中使用的是token）
vuex （https://vuex.vuejs.org/）
由于之前的项目是使用的token我就使用了vuex
安装
npm install vuex --save
在根目录下面新建store文件夹，再创建index.js文件
在index.js文件中引入
import Vuefrom 'vue'
import Vuexfrom 'vuex'
注册 Vuex
Vue.use(Vuex)
大体如下:（期中两个方法分别存和删token）
在main.js中引入
import storefrom '../store'（vuex已经在index.js文件中注册过了，所以不需要再注册了）
再vue实例中加上store：
路由拦截
之前在路由注册中有添加一个属性
meta: {requireAuth: true}
用来判断当前路由是否需要登录之后才可以访问
接下来就要处理了
在main.js文件中下面添加一个路由跳转拦截：router.beforeEach
因为之前项目使用的token如果页面刷新了vuex里面的token会没有了，这时候我们需要给他重新赋值
在router index.js里 路由注册上面写一个判断：
其实token的存放一直是存放在session中的页面刷新是不会被清除掉的，我第一次使用token的时候也是一脸懵逼，不是到如何下手，然后百度都被我用烂了，他们都是用vuex存的，我不太清除为什么这样存储，可以直接从session中拿吗？又是一个不明所以然
IE兼容
但是我做过的项目都是需要兼容IE，因为Vue使用了ES6 Promise，IE浏览器是不支持的，所以需要用babel-polyfill转换
安装
npm install --save-dev babel-polyfill
在build文件夹下webpack.config.js下的module.exports中添加：
Path问题
还有一个特别特别重要的问题，项目放到服务器之前需要打包，打完包之后静态文件路径会有一些问题
在config文件夹下index.js文件中有两个环境配置
build：（production 环境） dev:（dev环境）
我们放到服务器上之前都是需要build的，就是在production环境中的assetsPublicPath的配置是错误的需要改正，想当初我刚搞这个vue的时候搞了好久结果就在assetsPublicPath 斜杠前加一个点就ok了，好气啊！！！！
基本上就是这些了，如果我走进了什么误区，望有大佬可以指出，不胜感激！
