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 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,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["dom", "dom.iterable", "esnext"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx", "typings/**/*.d.ts"],
  "exclude": ["node_modules"]
}

这里的配置包括了一些基本的 TypeScript 配置，例如编译目标、模块、严格模式和源映射。

4. 修改 Vite 配置

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

touch vite.config.ts

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

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

export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

以上配置使用了 Vite 内置的 Vue 插件，用来处理 Vue 的单文件组件。同时，还定义了一个 alias，将 @ 映射到项目根目录下的 src 文件夹。

5. 创建目录结构

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

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

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 文件中编写根组件：

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

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. 启动项目

最后，执行以下命令启动项目：

npm run dev

以上命令启动 Vite，会自动打开一个浏览器窗口，并显示你的应用。

至此，你已经成功地搭建了一个企业级 Vue3 + Vite2 + TypeScript4 框架。