Vue-Cli4脚手架_相关配置

项目使用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