搭建企業(yè)級 Vue3 + Vite2 + TypeScript4 框架的步驟如下：

1. 創(chuàng)建項目

使用命令行工具進(jìn)入到你想要創(chuàng)建項目的目錄，然后執(zhí)行以下命令：

mkdir your-project-name
cd your-project-name
npm init -y

這將會創(chuàng)建一個新的項目文件夾和一個 package.json 文件。

2. 安裝依賴

接下來你需要在項目中安裝 Vue、Vite、TypeScript 和其他需要的依賴。執(zhí)行以下命令：

npm install @vitejs/plugin-vue vue@next vite typescript --save-dev

以上命令會安裝最新的 Vue、Vite 和 TypeScript。你還需要安裝其他依賴，例如路由和狀態(tài)管理工具，這里以 vue-router 和 vuex 為例：

npm install vue-router vuex --save-dev

3. 配置 TypeScript

在項目根目錄下創(chuàng)建 tsconfig.json 文件，用于配置 TypeScript。

touch tsconfig.json

打開 tsconfig.json 文件，添加以下內(nèi)容：

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "useDefineForClassFields": true,
        "allowJs": true,
        "sourceMap": true,
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        },
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "tests/**/*.ts",
        "tests/**/*.tsx",
        "typings/**/*.d.ts",
        "src/**/*.vue"
    ],
    "exclude": [
        "node_modules"
    ]
}

這里的配置包括了一些基本的 TypeScript 配置，例如編譯目標(biāo)、模塊、嚴(yán)格模式和源映射。

4. 修改 Vite 配置

在項目根目錄下創(chuàng)建 vite.config.ts 文件，用于配置 Vite。

touch vite.config.ts

打開 vite.config.ts 文件，添加以下內(nèi)容：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
const env = process.argv[process.argv.length - 1]
console.log('當(dāng)前項目環(huán)境:: ', env)
console.log('當(dāng)前node運(yùn)行環(huán)境:: ', process.env.NODE_ENV)

export default ({ mode }) => {
    console.log("mode------------>", mode)
    return defineConfig({
        plugins: [
            vue()
        ],
        resolve: {
            alias: { // 配置別名
                vue: "vue/dist/vue.esm-bundler.js",
                '@': path.resolve(__dirname, './src')
            }
        }
    })
}

以上配置使用了 Vite 內(nèi)置的 Vue 插件，用來處理 Vue 的單文件組件。同時，還定義了一個 alias，將 @ 映射到項目根目錄下的 src 文件夾。

5. 創(chuàng)建目錄結(jié)構(gòu)

在項目根目錄下創(chuàng)建 src 文件夾，并在其中創(chuàng)建以下目錄結(jié)構(gòu)：

- src/
  - assets/       // 存放靜態(tài)資源文件
  - components/   // 存放可復(fù)用的組件
  - router/       // 存放路由配置
  - store/        // 存放狀態(tài)管理相關(guān)文件
  - views/        // 存放頁面組件 
  - App.vue       // 根組件
  - main.ts       // 入口文件
  - env.d.ts

然后在env.d.ts文件里面添加以下內(nèi)容

declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
}

6. 配置路由

在 router 目錄下創(chuàng)建 index.ts 文件，用于配置路由。

touch router/index.ts

打開 index.ts 文件，添加以下內(nèi)容：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

以上配置創(chuàng)建了一個簡單的路由，指定了根路由指向 Home 組件。

7. 配置狀態(tài)管理

在 store 目錄下創(chuàng)建 index.ts 文件，用于配置狀態(tài)管理。

touch store/index.ts

打開 index.ts 文件，添加以下內(nèi)容：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  modules: {}
})

export default store

以上配置創(chuàng)建了一個簡單的狀態(tài)管理，包含了一個計數(shù)器。

8. 編寫根組件

在 App.vue 文件中編寫根組件：

<template>
  <div>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'App'
})
</script>

以上根組件中只有一個 組件，用于顯示當(dāng)前路由所對應(yīng)的組件。

9. 編寫入口文件

在 main.ts 文件中編寫入口文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

以上入口文件使用了 router 和 store，并將 App 組件渲染到了 id 為 app 的 DOM 元素中。

10.項目目錄下添加index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <!-- 入口文件main.ts -->
    <script type="module" src="/src/main.ts"></script>
</body>

</html>

11.在依賴文件package.json中配置啟動命令或者打包命令

{
  "name": "my-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --mode dev",
    "test": "vite --mode test",
    "prod": "vite --mode prod",
    "build": "vite build",
    "tests": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.2.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.1.3",
    "vite": "^4.3.9",
    "vue": "^3.2.36",
    "vue-router": "^4.2.2",
    "vuex": "^4.1.0"
  }
}

12. 啟動項目

最后，執(zhí)行以下命令啟動項目：

npm run dev

以上命令啟動 Vite，會自動打開一個瀏覽器窗口，并顯示你的應(yīng)用。

至此，你已經(jīng)成功地搭建了一個企業(yè)級 Vue3 + Vite2 + TypeScript4 框架。文章來源地址http://www.zghlxwxcb.cn/news/detail-476499.html

到了這里，關(guān)于Vue3 + Vite2 + TypeScript4搭建企業(yè)級項目框架的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！