Vue3 + Vite2 + TypeScript4搭建企业级项目框架-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3 + Vite2 + TypeScript4搭建企业级项目框架。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

搭建企业级 Vue3 + Vite2 + TypeScript4 框架的步骤如下：

1. 创建项目

使用命令行工具进入到你想要创建项目的目录，然后执行以下命令：

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

这将会创建一个新的项目文件夹和一个 package.json 文件。

2. 安装依赖

接下来你需要在项目中安装 Vue、Vite、TypeScript 和其他需要的依赖。执行以下命令：

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

以上命令会安装最新的 Vue、Vite 和 TypeScript。你还需要安装其他依赖，例如路由和状态管理工具，这里以 vue-router 和 vuex 为例：

npm install vue-router vuex --save-dev

3. 配置 TypeScript

在项目根目录下创建 tsconfig.json 文件，用于配置 TypeScript。

touch tsconfig.json

打开 tsconfig.json 文件，添加以下内容：

{
    "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 配置，例如编译目标、模块、严格模式和源映射。

4. 修改 Vite 配置

在项目根目录下创建 vite.config.ts 文件，用于配置 Vite。

touch vite.config.ts

打开 vite.config.ts 文件，添加以下内容：

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('当前项目环境:: ', env)
console.log('当前node运行环境:: ', 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 内置的 Vue 插件，用来处理 Vue 的单文件组件。同时，还定义了一个 alias，将 @ 映射到项目根目录下的 src 文件夹。

5. 创建目录结构

在项目根目录下创建 src 文件夹，并在其中创建以下目录结构：

- src/
  - assets/       // 存放静态资源文件
  - components/   // 存放可复用的组件
  - router/       // 存放路由配置
  - store/        // 存放状态管理相关文件
  - views/        // 存放页面组件 
  - App.vue       // 根组件
  - main.ts       // 入口文件
  - env.d.ts

然后在env.d.ts文件里面添加以下内容

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

6. 配置路由

在 router 目录下创建 index.ts 文件，用于配置路由。

touch router/index.ts

打开 index.ts 文件，添加以下内容：

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

以上配置创建了一个简单的路由，指定了根路由指向 Home 组件。

7. 配置状态管理

在 store 目录下创建 index.ts 文件，用于配置状态管理。

touch store/index.ts

打开 index.ts 文件，添加以下内容：

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

以上配置创建了一个简单的状态管理，包含了一个计数器。

8. 编写根组件

在 App.vue 文件中编写根组件：

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

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

以上根组件中只有一个组件，用于显示当前路由所对应的组件。

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"
  }
}