搭建一个直接使用的vue项目

最近要做个新项目，使用vue框架，从头搭了一个，平时从头搭的机会还真不多，有一些小坑，在这记录以下防止下次忘记。

首先在要创建的目录下vue create demo（node那些开发环境安装配置就不来了，网上很多教程）,然后是一些选项

我这里之前创建的时候选过了，router,vuex都选中后续会省事，加个eslint规范代码

创建好之后会提示切换到目录下和运行语句，运行起来展示出vue那个绿三角的logo就成功了。

接下来配置一下路由，因为我们创建的时候已经选择了router所以目录下会有router里头是一个index.js的文件，我们每新建一个页面都要在这里配置。首先提一下项目创建好了之后会有一个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)

这样项目基本就能使用了。