最近要做个新项目，使用vue框架，从头搭了一个，平时从头搭的机会还真不多，有一些小坑，在这记录以下防止下次忘记。
首先在要创建的目录下vue create demo（node那些开发环境安装配置就不来了，网上很多教程）,然后是一些选项
我这里之前创建的时候选过了，router,vuex都选中后续会省事，加个eslint规范代码
创建好之后会提示切换到目录下和运行语句，运行起来展示出vue那个绿三角的logo就成功了。
接下来配置一下路由，因为我们创建的时候已经选择了router所以目录下会有router里头是一个index.js的文件，如果创建的时候是默认没有装router、vuex可以装一下指令为"npm install vuex"、"npm install vue-router"，我们每新建一个页面都要在这里配置。首先提一下项目创建好了之后会有一个App.vue的文件，这个文件很有迷惑性，我一开始总想把它当成一个首页来用，后来发现不能这么理解，App.vue是主组件，页面的入口文件，所有的页面都是在这里切换的。理解到这之后就不会在这个文件里写页面代码了，所以app.vue里只需要放一个路由的标签即可。
然后以index和login这两个页面切换来说一下路由，下边这是我的router里的index.js文件
下边这是切换页面的方法
这样一个简单的页面跳转就弄好了，再顺便说一下二级路由，只需要在一个页面的配置下加一个children如下，这里要注意children下的path不要加'/'了不然不好使。
{ path: "/about",
name: "About",
component: About,
children:[
{ path: "pageOne", name:'PageOne', component:PageOne},
{ path: "pageTwo", name:'PageTwo', component:PageTwo}
] }
在父页面使用的时候跟一级页面一样
配好路由再搞一下缓存，之前简单用一下window的全局，但是用到vue了就用一下他的vuex，
提一下js的缓存，如果不想用vuex用这个也行
短时间存取，关闭浏览器即丢失：
存：sessionStorage.setItem("key"，”value”)
取：sessionStorage.getItem("key")
单条删除：sessionStorage.removeItem("key")
全删：sessionStorage.clear()
长时间存取，不清除不会丢失，把上边的sessionStorage改成localStorage即可
好了来说一下vuex，因为网上教程说的很复杂我也没看明白，而且我们的需求也简单，只要存取就行，以后弄明白了再深入说一下
还是因为我们创建项目时已经勾选了，所以会有一个store的目录，下边也是一个index.js，如果没选可以安装一下npm install vuex --save然后自己创建一下，这个index.js这样配
就是定义好缓存和它的get,set方法，存取方法：
this.$store.commit('setDemoValue', value);
console.log(this.$store.getters.getDemoValue)
这样项目基本就能使用了。
用了两天发现缺点东西，这么使用vuex刷新页面数据就没了，在当前代码补充点来实现vuex的持久化储存，原理也是利用了浏览器的localStorage：
首先安装个组件npm install vuex-persist -D
在store下的index.js里引入声明一下，直接上这一页的代码吧
import Vue from "vue";
import Vuex from "vuex";
import VuexPersist from "vuex-persist"Vue.use(Vuex);
const vuexLocal = new VuexPersist({
storage: window.localStorage //可选，sessionStorage/indexDB
});
export default new Vuex.Store({
state: { //全局参数
demoValue:{ name:"", age:"" }
},
mutations: { //set方法
setDemoValue(state,demoValue){ state.demoValue = demoValue }
},
getters: { //get方法
getDemoValue: state => state.demoValue
},
actions: {},
modules: {},
plugins:[vuexLocal.plugin]});
这样刷新页面就不会丢失数据了。
再补充个加一下axios: npm install axios -s
安装好了之后配一下，以往单独建个文件放，这次把它跟上头建好的vuex放在一起
import axios from 'axios'在store的index里引入一下，然后在actions里封装请求：
actions: {
getAxios ({commit},url)
axios.get( this.state.baseUrl+url ,{
params:'',
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Authorization': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtYW5hZ2VybmFIndzcmNlc2hpZGlhb2R1MiIsImV4cCI6MTYxMTAyODgwNn0.-AqwW4Pt7wAMQ5ZroqG0GiWVIG8YuSBPuG3a54NNx94' }
})
.then( res => { console.log(res); })
.catch(error => { console.log(error); });
} }
这里注意一下两个参数，第二个参数才是我们传过来的请求尾，并且只能有一个参数，多余的参数可以合为一个对象传。
调用的时候this.$store.dispatch('getAxios',this.url)
同样写好别的请求方式就完成了
