脚本宝典收集整理的这篇文章主要介绍了

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的相关代码分割到不同模块

clipboard.png

9.基础的功能和组件配置好后,可以进行开发了。
(菜鸟记录,有错误的地方请指出)

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过