如何從零開始建構vue3項目

說明

記錄一次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 &#39;./Navbar.vue&#39;
import AppMain from &#39;./AppMain.vue&#39;
import Footer from &#39;./Footer.vue&#39;
</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

為了方便管理和維護API，你可以在src/ api 目錄下為每個模組或每個頁面單獨建立一個JS檔案。這裡提供範例，建立一個名為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 &#39;@/api/home.js&#39;
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項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！