vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建項目

準備工作

1.先搭建一個vue工程，這裡有兩種辦法，一種是使用vue-cli ,另一種是使用vite(一種新的建構工具)，具體搭建 傳送門

2.搭建好項目後，我們就可以安裝對應的庫了，這裡需要安裝以下的這些庫：

• npm install --save

  axios

  這個庫不需要說使用next版本，vue更新和發起http請求沒有直接的關系，是以axios不用說要不要更新安裝 axios官網
• npm install

  element-plus

  --save 這個庫是element 團隊針對vue3而專門開發的庫，對于vue3的庫，除了elment-plus外，還有ant-design 等 element-plus 官網
• npm install

  [email protected]

  這個是vue router 專門的庫,現在還是帶測試的版本，但是如果需要在vue3中使用路由，那麼需要使用這個庫， 官網
• npm install

  sass

  -D 這個是sass 的庫，這裡為啥不需要安裝

  sass--loader

  或者

  style-loader

  或者 node-sass 呢？ 這個在設計的時候，vue3 的締造者 在設計vue 的時候已經考慮過這件事情，vite 這個建構工具裡面內建了scss, less ,stylus 等， 原話如下

  That said, Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed as a peer dependency:

  vite 的官網
• npm install

  [email protected]

  --save 這個是vuex的庫，如果需要使用則需要安裝這個庫， vuex官網

最後我的package.json 的情況如下：

項目編寫

在項目編寫階段，由于本人現在也是在體驗vue3的階段，下面可能也會有了解錯誤的地方，還請大家多多指教

配置vue的環境

直接在根目錄建立vite.config.js，裡面的常用配置如下：

const path = require('path')
export default function () {
    return {
        // 代理，最重要，其他的都可以有預設配置
        proxy: {
            '/api': {
                target: 'http://localhost:9011',
                changeOrigin: true,
            }
        },
        // 入口
        entry: 'index.html',
        // 出口
        outDir: './../public/html',
        // 打包後的跟路徑
        base: '/',
        // 輸出的靜态資源的檔案夾名稱
        assetsDir: 'assets',
        // 是否開啟ssr服務斷渲染
        ssr: false,
        // 重命名路徑  path.resolve(__dirname, './src')
        alias: {
            '/@/': path.resolve(__dirname, './src')
        },
        // 端口
        port: 3002,
        // 是否自動開啟浏覽器
        open: false,
        // 開啟控制台輸出日志
        silent: false,
        // 那個包不需要打包
         optimizeDeps: {
            exclude: ['element-plus']
        },
        // css預設的配置
        cssPreprocessOptions: {
            scss: {
                additionalData: '@import "style/var.scss";', // 添加公共樣式
            },
        }
    }
}

           

詳細配置

起步的main.js

建立一個vue的執行個體，導入element-plus, 導入vue-router,

或者vuex，但是這裡都需要通過createApp鍊式調用來使用插件

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import '../style/index.scss';
import 'element-plus/lib/theme-chalk/index.css';
import router from "./router";
import vuex from "./vuex";
createApp(App).use(router).use(ElementPlus).use(vuex).mount('#app')
           

建立路由

在src檔案夾下面建立router檔案夾，裡面配置vue的路由

import {createRouter, createWebHistory} from 'vue-router';
import {routes} from "./routes";

const router = createRouter({
    history: createWebHistory(), // 路由的history模式
    routes, // 導入路由的配置， 和vue2裡面的路由一樣
})

export default router;

//注意： 在.vue元件中如果需要使用router,則需要導入useRouter這個方法，需要使用route,則需要導入，useRoute這個方法
           

是否需要狀态管理工具

如果需要使用狀态管理工具，那個在src下面建立一個store檔案夾，然後裡面寫vuex的配置，我這裡使用的是子產品，子產品裡面的内容和vuex3是一樣的，調用方式也是一樣的

import {createStore} from 'vuex'
import userModule from "./userModule";

export default createStore({
    modules: {
        userModule: userModule,
    }
})
//子產品例子
export default {
    namespaced: true,
    state: {
        isLoading: false,
        data: null,
    },
    mutations: {
        // 設定是否正在加載
        setIsLoading(state, payload) {
            state.isLoading = payload;
        },
        // 設定使用者資料
        setData(state, payload) {
            state.data = payload
        }
    },
    actions: {
        // 登入
        async login({commit}, {loginId, loginPwd}) {
            commit('setIsLoading', true);
            const r = await login(loginId, loginPwd)
            commit('setData', r);
            commit('setIsLoading', false);
            return r;
        },
       
    }
}
// 注意： 如果在.vue元件中需要使用store,需要導入 userStore的這個方法

// 例如：在vue的setup函數中使用
import {useStore} from "vuex";
import {computed} from "vue";
import {useRouter} from "vue-router";

export default {
  setup() {
    const store = useStore();
    const router = useRouter();

    const loginOut = () => {
      store.dispatch('userModule/loginOut');
      router.push('/login')
    }
    return {
      isLoading: computed(() => store.state.userModule.isLoading),
      data: computed(() => store.state.userModule.data),
      loginOut,
    }
  }
}
           

直接撸代碼

對于撸代碼的話，和vue2裡面的差不多，隻是vue3裡面增加了compositionAPI 裡面有比較大的改動，在寫代碼的時候，難免會有磕磕碰碰，祝願大家在寫代碼的時候，寫的都對。

這篇文章是基于本人想實作一個圖檔的網站，背景使用node,前台使用vue3，作為自己的練手項目，畢竟公司裡面現在使用vue3對自己也哪方面都不好。 有興趣的可以看看 項目位址 示範位址