vue-cli3涕侈,在配置上看似簡(jiǎn)單但是給后來(lái)對(duì)開發(fā)帶來(lái)很大對(duì)問(wèn)題,修改起來(lái)也相對(duì)不容易浆兰。
使用yarn或npm都可以安裝常摧,我更偏向使用yarn
npm install -g @vue/cli
# OR
yarn global add @vue/cli
在配置中按vue-cli3說(shuō)明安裝配置,和2.0創(chuàng)建項(xiàng)目方式相同
vue create hello-world
1吭练、選擇 manually select features诫龙,(空格為選取,回撤則提交)鲫咽,選擇所需插件签赃,這個(gè)確實(shí)對(duì)沒有配置過(guò)webpack對(duì)人來(lái)講就是坑,會(huì)配置webpack對(duì)人也不屑用vue-cli分尸,他對(duì)初衷是讓程序員躲開配置寫代碼锦聊,但是此處已經(jīng)背棄了。
2箩绍、選擇所需插件孔庭,我選擇了babel,router ,vuex圆到,less等必要項(xiàng)怎抛。
3、配置axios芽淡,可以yarn add axios马绝,也可以直接vue add axios,由vue-cli提供等插件挣菲,在頁(yè)面直接倒入就可以全局使用,
我使用等vue add axios 富稻,發(fā)現(xiàn)生成了一個(gè)plugins文件夾,源碼部分是生成了一個(gè)vue組件己单,并使用了vue.use安裝了全局使用及window.axios和Vue.axios全局調(diào)用唉窃。
(在頁(yè)面 import './plugins/axios' )
Plugin.install = function(Vue, options) {
Vue.axios = _axios;
window.axios = _axios;
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return _axios;
}
},
$axios: {
get() {
return _axios;
}
},
});
};
Vue.use(Plugin)
安裝ant-design-vue,等過(guò)程就比較麻煩,使用了 babel-plugin-import 組件部分加載纹笼,一直報(bào)錯(cuò),然后百度到原因苟跪,因?yàn)閘ess 及l(fā)ess-loader版本不一致廷痘,沖新安裝ant-design-vue框架package.json 中相同版本 yarn add less-loader@^4.0.5 和 yarn add less@^2.7.2
調(diào)試通過(guò)。