Vue項(xiàng)目依賴包安裝及配置過程

更新時(shí)間：2023年12月19日 10:47:11 作者：online_c

這篇文章主要介紹了Vue項(xiàng)目依賴包安裝及配置過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

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})，無法正常注冊(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:'歡迎頁',
            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,//開啟命名空間，避免沖突
    // 提供唯一的公共資源，所以共享的數(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;