vue(环境搭建，插件引用)

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'//非懒加载写法，未注释为懒加载写法
Vue.use(Router)
export default new Router({
  routes: [
    // {//非懒加载写法
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // }
    {
      path: '/',
      redirect:'/index',
      component: resolve => require(['@/pages/home'],resolve),
      children:[
        {
          path: '/index',
          name: 'index',
          component: resolve => require(['@/pages/index'],resolve),
          meta:{title:'首页'}
        },
        {
          path: '/test',
          name: 'test',
          component: resolve => require(['@/pages/test'],resolve),
          meta:{title:'test页'}
        },
        {
          path: '/mine',
          name: 'mine',
          component: resolve => require(['@/pages/mine'],resolve),
          meta:{title:'mine'}
        },
      ]
    },
    { /* Not Found 路由，必须是最后一个路由 */
      path: '*',
      redirect:'/index',
      meta:{requireAuth:false},// 添加该字段，表示进入这个路由不需要登录的
      component: resolve => require(['@/pages/home'],resolve),
    }

  ],
})

//store/index

//src下新建store文件夹下新建index.js
import Vue from 'vue';//这里为固定格式照抄
import Vuex from 'vuex';//这里为固定格式照抄
Vue.use(Vuex);//此为引用Vuex

const state={
  count:1
}

const mutations={
  add(state,n){
    state.count+=n
  }
}
export default new Vuex.Store({
  state,
  mutations
})

//xxx.vue

<template>
  <div class="index">
    <h1>这是首页</h1>
    <el-alert
      title="element-ui成功提示案例"
      type="success">
    </el-alert>
    <h1>这是vuex数据：
      {{$store.state.count}}
    </h1>
    <button @click="$store.commit('add',2)">+</button>
    <div>
      <span>less测试</span>
    </div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
  import { Alert } from 'element-ui';
  export default {
    name: 'index',
    data () {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: ['上海', '北京', '广州', '深圳'],
        isIndeterminate: true
      }
    },
    components:{
      Alert
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? ['上海', '北京', '广州', '深圳'] : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    },
    mounted(){

    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .index{
    div{
      span{
        color:#565;
        background: #888;
      }
    }
  }
</style>

//main.js

//npm install vuex --save //vuex安装
// npm install -g cnpm --registry=https://registry.npm.taobao.org  //淘宝安装
// cnpm install element-ui --save //element-ui安装
// cnpm install axios --save //axios安装
// cnpm install less less-loader --save //less安装
// npm install -save babel-polyfill  //es6转码，并在webpack.base.conf下entry下app下添加babel-polyfill
import Vue from 'vue'
import App from './App'
import router from './router'
import 'babel-polyfill'
import axios from 'axios'
import store from './store/index'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import qs from 'qs'


Vue.config.productionTip = false
Vue.prototype.$ajax = axios

Vue.use(ElementUI)


// qs.stringify(data);
// qs.stringify({sname:'参数'});
// qs.parse(data)
// 使用方式
// this.$ajax.post(url,params).then(function (response) {
//   console.log(response.data)//请求成功
// }).catch(function (error) {
//   console.log(response.error)//请求失败
// });

//路由切换title
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
    if (store.state.token) {  // 通过vuex state获取当前的token是否存在
      next();
    }
    else {
      next({
        path: '/test',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }

  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//使用store
  render: h => h(App)
})

//安装

babel-polyfill后出现报错，删除modules重新下载即可