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
分开安装
cnpm install node-sass --save-dev;

cnpm install sass-loader --save-dev;
注意版本：npm install sass-loader@7.3.1 --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的相关代码分割到不同模块

vue-cli创建项目和一些基础配置：