vue2 使用vue-cli2 搭建项目

1  vue-cli  脚手架自带引用路由 

npm install --g vue-cli 全局下载脚手架

vue init webpack test 生成项目 形成基本结构

npm install 依赖包

npm run dev 启动项目

2 引用axios   

import axios from 'axios'

挂载axios  挂不挂载有不同说法

Vue.prototype.axios = axios

3  引用样式 sass或者 less

npm install less less-loader --save 

需要的话mixins混合

4  引入组件库 elementUI

安装

npm i element-ui -S  

引用注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

5  引用字体图标库  iconFont

http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3

选择要用的图标 下载代码到本地 复制到asset 文件夹里 

在main.js中引入iconfont.css样式

import './assets/iconfont/iconfont.css'

代码里使用iconfont 加上自动生成的类名

<i class="iconfont icon-zitigui-xianxing"></i>

6 引入VueX

npm install vuex --save-dev

建立一个和main.js同级的store.js文件

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

const store = new Vuex.Store({
  state:{
    type: '',
  },
  getters:{
    getType:function (state) {
      // if(!state.type){
      //   state.type = localStorage.getItem('type')
      // }
      // return state.type;
    }
  },
  mutations:{
    //格式：类型(名字)+处理函数
    //加1
    // changetype(state,type) {
    //   //console.log(state)//state对象
    //   state.type = type;
    // }
  },
  actions:{
    /* increment({commit}){
       commit("INCREMENT")
     }*/
  }
});

export default store

然后在main.js中引用store.js

import store from  './assets/js/store'

• 1

同时在vue下注册

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

有两种方法可以type的值。 
a、直接调用type更改

this.$store.state.type = 'aaa'

• 1

b、调用vuex的commit函数，官网更推荐这种方式。

this.$store.commit('changetype','aaa')

• 1

changetype上面的store.js里已经定义了

 mutations:{
    //格式：类型(名字)+处理函数
    //加1
    changetype(state,type) {
      //console.log(state)//state对象
      state.type = type;
    }
  },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

此时type的值就变为了aaa

4，获得type的值，也有两种方法。 
a、直接拿到type的值

this.$store.state.type

• 1

b、使用getter方法

this.$store.getters.getType

• 1

---

下面是我用vuex时遇到的一个坑。 
vuex刷新时数据丢失。 
对于一个程序来说，整个页面都是变量，刷新页面数据当然会丢失，解决方案就是使用localStorage，sessionStorage等。如代码，如果页面没有type的值，就用localStorage在设置一下type值

getters:{
    getType:function (state) {
      if(!state.type){
        state.type = localStorage.getItem('type')

      }
      return state.type;
    }
  },