我的项目应用 iView
1. 在终端输出命令
npm add view-design
npm install babel-plugin-import –save-dev
2. 在 babel.config.js 中增加如下代码
"plugins": [["import", {
"libraryName": "view-design",
"libraryDirectory": "src/components"
}]]
3. 在 main.js 中增加相干组件
import 'view-design/dist/styles/iview.css'; // 导入款式
import {Button, Table} from 'view-design';
Vue.component('Button', Button);
Vue.component('Table', Table);
4. 在 Vue 文件中增加代码即可应用
<Button type="primary" shape="circle">Circle</Button>
我的项目应用 Less
官网文档中应用如下代码,然而可能会呈现如下谬误
# Less
npm install -D less-loader less
谬误如下:
谬误起因是因为装置的 less 版本过高, 须要升高版本,重新安装
# 先移除之前版本
npm uninstall less-loader
#下载指定版本
npm install less-loader@5.0.0 -D
接下来就能够在 *.vue 文件中来应用
<style lang="scss">
@color: red;
#app{color:@color}
</style>
应用 Vuex
一个根底的 Vuex 例子
//main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.config.productionTip = false
const store = new Vuex.Store({
state: {
// 存储的一些数据
array: []},
getters: {
// 相似计算属性,返回值会依据他的依赖被缓存起来,只有当依赖值扭转时才会从新计算】getFilterArray(state) {return state.array.map((item) => item > 10);
}
},
mutations: {setArray(state) {state.array = [1, 2, 55, 677, 1];
},
addArray(state) {state.array = state.array.map((item) => item+1);
alert(state.array)
}
},
actions: {set(context) {context.commit('setArray')
}
}
})
new Vue({
store,
render: h => h(App),
}).$mount('#app')
在 app.vue 中应用
//App.vue
<template>
<div>
{{array}}
<button @click="add"> 加 1 </button>
</div>
</template>
<script>
export default {
computed: {array() {return this.$store.state.array;}
},
methods:{add(){this.$store.commit('addArray')
}
},
mounted() {this.$store.dispatch('set')
}
}
</script>
<style>
</style>
在此之前要先装置插件
npm install vuex –save