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

2次阅读

共计 1500 个字符，预计需要花费 4 分钟才能阅读完成。

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
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 例子

//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>