一文帶你從零開始搭建vue3項目

Posted on by

說明

記錄一次Vue3的項目搭建過程。文章基於 vue3.2.6 和 vite2.51 版本，使用瞭ui庫 Element plus，vue-router4，Layout佈局封裝，axios請求封裝，別名配置等。

開始

1. 使用 vscode 開發工具安裝vue3的插件 Volar ，在vue2中我們使用的是Vetur。

  • vue3在線code工具 傳送門sfc.vuejs.org/

2. 執行初始化及安裝命令：

npm init vite 初始化vite此過程可以輸入項目名、選擇vue/react項目及js/ts環境選擇，vue3已經完全支持ts，此文章使用的是js。npm install 安裝依賴。最後執行npm run dev運行項目。

運行過程時如果出現上圖的報錯信息，可以手動執行 node node_modules/esbuild/install.js，然後再執行npm run dev

3. 安裝vue-router

執行 npm install vue-router@4 , vue3對應的vue-router和vuex的版本都是 4.0。執行命令安裝完成之後,在目錄下創建 src/router/index.js 寫入下面的配置：

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
// ...
]

export default createRouter({
history: createWebHistory(),
routes,
})

main.js中使用

// ...+
import router from './router/index'
createApp(App).use(router).mount('#app')

vue-router4寫法和以前的有些區別 hash模式 createWebHashHistory history模式 createWebHistory，具體可查看官網。

4. 全局樣式及sass安裝（使用@路徑需要配置別名，後文有相應的說明）

執行命令npm i sass -D，然後在目錄下創建 src/styles/index.scss：

// @import './a.scss'; 
// 作為出口組織這些樣式文件，同時編寫一些全局樣式

在 mian.js 中引入

import '@/styles/index.scss'

tips: vue3中樣式穿透 使用::deep(.className) 或者 deep(.className)

5. Element plus按需引入和全局引入

執行npm i element3 -S命令安裝，如果你能用到裡面的大多數組件，就用全局引入方式，如下：

// main.js
import element3 from "element3";
import "element3/lib/theme-chalk/index.css";
createApp(App).use(router).use(element3).mount('#app')

如果你隻用到幾個組件，就可以按需加載優化性能，創建src/plugins/element3.js，如下

// 按需引入 plugins/element3.js
import { ElButton, ElMenu, ElMenuItem } from 'element3'
import 'element3/lib/theme-chalk/button.css'
import 'element3/lib/theme-chalk/menu.css'
import 'element3/lib/theme-chalk/menu-item.css'
export default function (app) {  
    app.use(ElButton) 
    app.use(ElMenu) 
    app.use(ElMenuItem)
}
// main.js中引用
import element3 from '@/plugins/element3.js'
createApp(App).use(router).use(element3).mount('#app')

6. Layout佈局,創建文件src/layout/index.vue

// src/layout/index.vue
<template>
   <!-- 頂部導航 -->
  <Navbar />
  <!-- 頁面內容部分、路由出口 -->
  <AppMain />
  <!-- 底部內容 -->
  <Footer />
</template>

<script setup>
import Navbar from './Navbar.vue'
import AppMain from './AppMain.vue'
import Footer from './Footer.vue'
</script>

根據自己的需求設計佈局，使用Layout佈局時，需要註意將Layout.vue作為父路由，路由設計大概像下面這樣：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'
import Home from '@/views/home/Home.vue'
import Test from '@/views/test/Test.vue'
const routes = [
  {
    path: '/',
    component: Layout,
    children: [{ path: '', component: Home }],
  },
  {
    path: '/test',
    component: Layout,
    children: [{ path: '', component: Test }],
  },
]

export default createRouter({
  history: createWebHistory(),
  routes,
})

7. axios請求封裝

執行命令 npm i axios 安裝axios

新建 src/utils/request.js，在此文件中進行封裝axios

import axios from 'axios'
// 可以導入element plus 的彈出框代替alert進行交互操作

// create an axios instance
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASEURL, // 使用設置好的全局環境
  timeout: 30 * 1000, // request timeout
})

// request interceptor
service.interceptors.request.use(
  (config) => {
    // 此處可以執行處理添加token等邏輯
    // config.headers["Authorization"] = getToken();
    return config
  },
  (error) => {
    console.log(error)
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  (response) => {
    const res = response.data // 根據接口返回參數自行處理

    if (res.code !== 200) {
      if (res.code === 50000) {
        // 根據狀態碼自行處理
        alert('服務器內部出現異常，請稍後再試')
      }
      return Promise.reject(new Error(res.msg || 'Error'))
    } else {
      // 調用成功返回數據
      return Promise.resolve(res)
    }
  },
  (error) => {
    console.log('err' + error) // 出現異常的處理
    return Promise.reject(error)
  }
)

export default service

新建 src/api 目錄，可以每個模塊或每個頁面單獨建立一個js文件，方便管理維護api。此處示例，新建 src/api/home.js 文件，寫入代碼

// 引入封裝好的 request.js
import request from '@/utils/request'

export function getList(query) {
  return request({
    url: '/list',
    method: 'get',
    params: query,
  })
}

在 home.vue 中使用

<script setup>
import { getList } from '@/api/home.js'
const query = { pagenum: 1 }
getList(query)
  .then((res) => {
    console.log(res) // 調用成功返回的數據
  })
  .error((err) => {
    console.log(err) // 調用失敗要執行的邏輯
  })
</script>

8. 環境變量相關

項目根目錄下創建三個文件.env.production 生產環境 .env.development 開發環境 .env.staging 測試環境 ，分別加入下面的代碼，在不同的編譯環境下，打包時自動執行當前環境下的代碼

# .env.production
VITE_APP_BASEURL=https://www.prod.api/

# .env.development
VITE_APP_BASEURL=https://www.test.api/

# .env.staging
VITE_APP_BASEURL=https://www.test.api/

使用：

console.log(import.meta.env.VITE_APP_BASEURL)
// 在不同編譯環境下控制臺會輸出不同的url路徑

在package.json中通過傳遞 --mode 選項標志來覆蓋命令使用的默認模式

  "scripts": {
    "dev": "vite",
    "build:stage": "vite build --mode staging",
    "build:prod": "vite build --mode production",
    "serve": "vite preview"
  },

這樣，生產環境打包執行npm run build:prod，測試/預發佈環境打包npm run build:stage

9. vite中別名配置

根目錄下 vite.config.js 文件添加代碼

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
  },
  base: './',
})

更多配置項查看官網

總結

到此這篇關於從零開始搭建vue3項目的文章就介紹到這瞭,更多相關vue3項目搭建內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：