vue-cli建立項目和一些基礎配置：

1.vue-cli腳手架建立項目，vue init webpack 項目名字<項目名字不能用中文>。
2.router中增長路由信息。

const peopleList = resolve => require(['../components/peopleList/peopleList.vue'], resolve)//組件按需加載
{
      path: '/peopleList',
      name: 'peopleList',
      component: peopleList,
      meta:{
        permission:'0'
      }
    }

3.定義路由跳轉的兩種方式：

this.$router.push({//路由未定義:hid時也能夠傳遞參數,地址欄中不顯示；name和params搭配
    name:'peopleList',
    params: {
      hid: 5,    //傳參
      xmid:123
    }
  });
  this.$router.push({//path傳路徑，配合query傳參
    path:'/peopleList',
    query: {
      hid: 5,    //傳參
      xmid:123
    }
  });

相對應的組件內用$route獲取this.$route.params.hid

4.若是對路由跳轉以前作權限判斷，須要用路由導航守衛函數

//使用鉤子函數對路由進行權限跳轉
router.beforeEach((to,from,next)=>{
    if(to.meta.permission == '0'){
        next('/403');
    }else{
      next();//最後必須執行next();
    }
})

5.開始寫組件內樣式就要用到sass組件，安裝npm install sass-loader node-sass --save-dev
vue-cli中配置sass,打開webpack.base.config.js在rules裏面加上

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
 }

vue頁面中調用

<style lang="scss" scoped>
  .peo-list{
    background-color: #ccc;
    border: solid 1px #000;
    text-align:left;
    h3{
      font-weight: bold;
      font-size:28px;
    }
    li{
      line-height:30px;
      height:30px;
      list-style: none;
      border-bottom: solid 1px #ccc;
    }

  }
</style>

6.安裝ajax請求插件axios,安裝npm install --save axios，在main.js中定義全局變量Vue.prototype.$axios = axios;。
7.本地調試，爲解決跨域問題，採用代理路徑，config/index.js中配置

proxyTable: {
      '/apis':{
        target:'***.com',//須要請求的外部路徑
        changeOrigin:true,//改變源
        pathRewrite:{//地址重寫，匹配到的地址重寫
          '^/apis':''
        }
      },
    },

8.若是須要用到vuex，安裝：npm install --save-dev vuex,把vuex的相關代碼分割到不一樣模塊

9.基礎的功能和組件配置好後，能夠進行開發了。
（菜鳥記錄，有錯誤的地方請指出）