关于前端:VueCli4脚手架相关配置

我的项目应用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