在現代前端開發中，Vue3 已經成為了一個非常流行的框架，而 Vite2 新一代的構建工具，以其極快的啟動速度和熱更新能力，迅速贏得了開發者的青睞。TypeScript 作為 JavaScript 的超集，提供了強大的類型系統，使得代碼更加健壯和可維護。本文將詳細介紹如何使用 Vue3、Vite2 和 TypeScript4 搭建一個規范的前端項目環境。
在開始之前，確保你已經安裝了 Node.js 和 npm。你可以通過以下命令檢查是否已經安裝：
node -v
npm -v
如果沒有安裝，可以從 Node.js 官網 下載并安裝。
Vite 提供了一個非常簡單的命令行工具來創建項目。你可以通過以下命令創建一個新的 Vue3 項目：
npm create vite@latest my-vue-app --template vue-ts
這個命令會創建一個名為 my-vue-app 的項目，并使用 Vue3 和 TypeScript 模板。
創建項目后，你會看到如下的項目結構：
my-vue-app/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.ts
│ └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
public/：存放靜態資源文件。src/：項目的源代碼目錄。assets/：存放圖片、字體等資源文件。components/：存放 Vue 組件。App.vue：根組件。main.ts：項目的入口文件。vite-env.d.ts：Vite 環境變量類型聲明文件。index.html：項目的入口 HTML 文件。package.json：項目的依賴和腳本配置。tsconfig.json：TypeScript 配置文件。vite.config.ts：Vite 配置文件。在創建項目時，Vite 已經自動安裝了 TypeScript。如果你需要手動安裝，可以使用以下命令：
npm install typescript --save-dev
tsconfig.json 是 TypeScript 的配置文件，用于指定編譯選項。Vite 已經為我們生成了一個默認的配置文件，你可以根據需要進行修改。以下是一個常見的配置示例：
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"]
}
在 src/vite-env.d.ts 文件中，Vite 已經為我們生成了環境變量的類型聲明。你可以根據需要添加其他類型聲明。例如：
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
ESLint 是一個用于檢查和修復 JavaScript 代碼的工具，而 Prettier 是一個代碼格式化工具。你可以通過以下命令安裝它們：
npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev
在項目根目錄下創建一個 .eslintrc.js 文件，并添加以下配置：
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'plugin:prettier/recommended',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'prettier/prettier': 'error',
},
}
在項目根目錄下創建一個 .prettierrc.js 文件，并添加以下配置：
module.exports = {
semi: true,
singleQuote: true,
printWidth: 80,
trailingComma: 'all',
arrowParens: 'always',
}
為了確保 ESLint 和 Prettier 能夠協同工作，我們需要在 .eslintrc.js 中配置 plugin:prettier/recommended。這樣，ESLint 會自動使用 Prettier 的規則來格式化代碼。
Vue Router 是 Vue.js 的官方路由管理器。你可以通過以下命令安裝它：
npm install vue-router@4
在 src 目錄下創建一個 router 文件夾，并在其中創建一個 index.ts 文件。然后，添加以下代碼：
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue'),
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
然后，在 main.ts 中引入并使用路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
Vuex 是 Vue.js 的官方狀態管理庫。你可以通過以下命令安裝它：
npm install vuex@next
在 src 目錄下創建一個 store 文件夾，并在其中創建一個 index.ts 文件。然后，添加以下代碼：
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++
},
},
actions: {
increment({ commit }) {
commit('increment')
},
},
modules: {},
})
然后，在 main.ts 中引入并使用 Vuex：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')
Axios 是一個基于 Promise 的 HTTP 客戶端，用于瀏覽器和 Node.js。你可以通過以下命令安裝它：
npm install axios
在 src 目錄下創建一個 utils 文件夾，并在其中創建一個 axios.ts 文件。然后，添加以下代碼：
import axios from 'axios'
const instance = axios.create({
baseURL: process.env.VITE_API_BASE_URL,
timeout: 10000,
})
instance.interceptors.request.use(
(config) => {
// 在發送請求之前做些什么
return config
},
(error) => {
// 對請求錯誤做些什么
return Promise.reject(error)
}
)
instance.interceptors.response.use(
(response) => {
// 對響應數據做些什么
return response.data
},
(error) => {
// 對響應錯誤做些什么
return Promise.reject(error)
}
)
export default instance
然后，你可以在項目中通過 import axios from '@/utils/axios' 來使用封裝好的 Axios 實例。
Vite 支持使用 .env 文件來管理環境變量。你可以在項目根目錄下創建 .env 文件，并添加以下內容：
VITE_API_BASE_URL=https://api.example.com
在 vite.config.ts 中，你可以通過 import.meta.env 來訪問環境變量。例如：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
define: {
'process.env': import.meta.env,
},
})
Sass 是一個 CSS 預處理器，提供了變量、嵌套、混合等功能。你可以通過以下命令安裝它：
npm install sass --save-dev
在 src/assets 目錄下創建一個 styles 文件夾，并在其中創建一個 global.scss 文件。然后，你可以在 main.ts 中引入這個全局樣式文件：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/styles/global.scss'
createApp(App).use(router).use(store).mount('#app')
Jest 是一個 JavaScript 測試框架，而 Vue Test Utils 是 Vue.js 的官方測試工具庫。你可以通過以下命令安裝它們：
npm install jest @vue/test-utils vue-jest ts-jest @types/jest --save-dev
在項目根目錄下創建一個 jest.config.js 文件，并添加以下配置：
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
transform: {
'^.+\\.ts$': 'ts-jest',
'^.+\\.vue$': 'vue-jest',
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
testMatch: ['**/tests/unit/**/*.spec.ts'],
}
在 src/tests/unit 目錄下創建一個 example.spec.ts 文件，并添加以下代碼：
import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'Hello, World!'
const wrapper = mount(HelloWorld, {
props: { msg },
})
expect(wrapper.text()).toMatch(msg)
})
})
Husky 是一個 Git Hooks 工具，可以在 Git 操作時自動執行一些腳本。你可以通過以下命令安裝它：
npm install husky --save-dev
在 package.json 中添加以下配置：
{
"scripts": {
"prepare": "husky install"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,ts,vue}": ["eslint --fix", "prettier --write"]
}
}
然后，運行以下命令初始化 Husky：
npm run prepare
通過本文的介紹，你已經學會了如何使用 Vue3、Vite2 和 TypeScript4 搭建一個規范的前端項目環境。我們從項目初始化開始，逐步配置了 TypeScript、ESLint、Prettier、Vue Router、Vuex、Axios、環境變量、樣式、單元測試和 Git Hooks。希望這些內容能夠幫助你更好地管理和開發 Vue3 項目。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
