1.安裝axios ,router,vue-router,vuex? (npm i xxx -S)
注意依賴包對(duì)應(yīng)版本
?2. elementui 按需引入配置
npm i element-ui -S
npm install babel-plugin-component -D
babel.config.js文件添加配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],// 這個(gè)不修改
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
main.js
import {Button, Select} from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';Vue.use(Button) Vue.use(Select)
不要把組件注冊(cè)寫成對(duì)象格式：Vue.use({Button,Select})，無(wú)法正常注冊(cè)
?3. router設(shè)置
在src下新建router目錄，創(chuàng)建index.js，文件內(nèi)容如下
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
name:'歡迎頁(yè)',
path:'/hello',
component:()=>import('@/components/HelloWorld')
}
]
})在main.js注冊(cè)路由
?使用路由
4.vuex設(shè)置
在src下新建store目錄，創(chuàng)建index.js，文件內(nèi)容如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store( {
namespaced:true,//開(kāi)啟命名空間，避免沖突
// 提供唯一的公共資源，所以共享的數(shù)據(jù)統(tǒng)一放到store進(jìn)行儲(chǔ)存，類似data
state:{
testID:'123456'
},
getters:{},
mutations:{},
actions:{},
modules:{}
})在main.js入口文件中注冊(cè)store
?在組件里使用testID,出現(xiàn)報(bào)錯(cuò)"$store" is not defined on the instance but referenced during render...
?查看package.json發(fā)現(xiàn)vuex版本不匹配
vuex現(xiàn)在默認(rèn)vuex4版本，vuex4只能在vue3中使用，在vue2中能使用vuex3，當(dāng)前項(xiàng)目使用vue2
刪除node_modules目錄下的vuex文件夾及package.json的vuex,重新安裝vuex@3
?npm install vuex@3 -S
5.axios配置
import Axios from "axios";
const instance = Axios.create({
baseUrl: "/api",
});
instance.interceptors.request.use(
(config) => {
// console.log(config);
return config;
},
(err) => {
return Promise.reject(err);
}
);
instance.interceptors.response.use(
(res) => {
return res.data;
},
(err) => {
return Promise.reject(err);
}
);
export default instance;
?
6.項(xiàng)目上傳到git倉(cāng)庫(kù)
這樣就是成功了?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-428515.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-428515.html
到了這里，關(guān)于VUE項(xiàng)目依賴包安裝及配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
