我的项目应用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
官网文档中应用如下代码，然而可能会呈现如下谬误
# Lessnpm 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.jsimport Vue from 'vue'import App from './App.vue'import Vuex from 'vuex'Vue.use(Vuex)Vue.config.productionTip = falseconst 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