Vue-cli 的配置

作者: 加冰宝贝 | 来源:发表于2018-05-20 17:07 被阅读8次

vue-cli 配置 axios vuex element-ui sass

配置sass || scss

 //  命令行输入
   cnpm install node-sass -D  或 cnpm install node-sass --save-dev 
   cnpm install sass-loader -D 或 cnpm install sass-loader --save-dev 

 //  在组件中使用
<style lang="sass" scoped></style>或者<style lang="scss" scoped>    </style>
//完成sass

配置axios

//  命令行输入
   cnpm install axios -D  或 cnpm install axios --save-dev 

//  src/main.js  (在src文件下的main.js中引入)
    import axios from 'axios'

//  挂载原型上 src/main.js

    Vue.prototype.axios = axios

//  在组件中使用
   this.axios.get('https://www.easy-mock.com/mock/5a6ac7882d33bf493f881505/hammer/goods-list')
 .then(function(res){
   alert()
 })

配置element-ui

//  命令行输入
    cnpm install element-ui -D

//  src/main.js (在src文件下的main.js中引入)
  import element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  Vue.use(element)


 //  在组件中使用
this.axios.get('https://www.easy-mock.com/mock/5a6ac7882d33bf493f881505/hammer/goods-list')
.then(function(res){
 alert()
})

vuex简单说明

 1,当然你要先下载包啦       npm install vuex --save

      spm install module-name -save 自动把模块和版本号添加到dependencies部分
      spm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分
   在src文件下面新建store>index.js

   文件名随便取 但是index.js是必须的 不用index.js也行但是你在main.js中引入的话你就要把他的文件名写上
      在main.js中引入
     import store from './store/index.js '   // 名字小写
         new Vue({
             el: '#app',
              router,
              components: { App },
               store,
               template: '<App/>'
         })
  在index.js中引入

      import Vue from 'vue'
      import Vuex  from 'vuex'
      Vue.use(Vuex)
      new Vuex.Store({
      state:{
          //定义数据
      }
    })

在子组件中获取数据

    computed:{
        //自定义事件名称  函数写法
     tableAll(){
         //获取store > index.js > state 中的数据返回给函数名 
           return this.$store.state.tableArr
     }
  }

在子组件中操作数据

    methods:{
         //函数名称
       add(index){
            //通过commit("add",index)传递
           this.$store.commit("add",index);
          //1个参数   自定义事件名字
         //2个参数   你要给store > index.js 传递的参数
      }
  }

store > index.js 接收子组件中操作数据

mutations:{
     //第一个参数是默认state直接可以操作
//第二个参数是你在子组件传递过来的数据
add(state,index){
    state.tableArr[index].num++
    state.tableIs.push(state.tableArr[index]);
},
}

相关文章

网友评论

    本文标题:Vue-cli 的配置

    本文链接:https://www.haomeiwen.com/subject/iretjftx.html