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]);
},
}
网友评论