muse-ui是我比較喜歡的風格，因此我希望引入次ui框架，支持vue2的，因此不用擔心啦，直接開始。

調出cmd，進入工程目錄執行命令行

npm install --save muse-ui

安裝完成了之后我們還要修改webpack配置,打開webpack.base.conf.js文件，這個文件比較難理解，但是你去webpack官網找找資料也就不難了。

打開文件，找到module.exports對象，修改對象的resolve屬性，替換為如下代碼，我們需要修改的別名，resolve方便我們后期引入museUI組件。

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'muse-components': 'muse-ui/src',

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src')

}

}

現在看看我的main.js

import Vue from 'vue'

import MuseUI from 'muse-ui'

import 'muse-ui/dist/muse-ui.css'

import App from './App'

import router from './router'

Vue.use(MuseUI);

Vue.config.productionTip = false

new Vue({el: '#app',router,template: '',components: { App }});

var div = document.createElement("div");

div.setAttribute("id", "content");

document.body.appendChild(div);

div.innerHTML = "{{keya|capitalize}}";

new Vue({el: "#content",//template: "{{key}}",data: {key: [1,2,3,4]},filters: {capitalize: function (value) {? ? ? if(!value) return 'null' ; ? ? value = value.toString();? ? ? return value + "test";? ? }}});

如果大家有不懂隨時來問我吧，這樣就可以開始學習了。大家看看我的效果吧