Vite初始化Vue3+Typescrpt项目

🕗 发布于 2024-11-13 20:09 vue

初始化项目

安装 Vite

首先，确保你的 Node.js 版本 >= 12.0.0。然后在命令行中运行以下命令来创建一个 Vite + Vue 3 + TypeScript 的项目模板：

npm init vite@latest

在这里插入图片描述

进入项目目录

创建完成后，进入项目目录：

cd vue3-demo

启动开发服务器

在项目目录中，使用以下命令启动开发服务器：

npm run dev

项目结构

以下是项目的基本目录结构：

├── publish/
└── src/
    ├── assets/                    // 静态资源目录
    ├── components/                // 公共组件目录
    ├── hooks/                     // hooks函数目录
    ├── plugins/                   // 插件目录
    ├── router/                    // 路由配置目录
    ├── store/                     // 状态管理目录
    ├── styles/                    // 通用 CSS 目录
    ├── utils/                     // 工具函数目录
    ├── views/                     // 页面组件目录
    ├── App.vue
    ├── main.ts
├── tests/                         // 单元测试目录
├── index.html
├── tsconfig.json                  // TypeScript 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json

TypeScript 配置

安装 Node 类型定义

如果你需要在项目中使用 Node.js 的类型定义，你可以安装 @types/node：

npm install @types/node --save-dev

或者在 tsconfig.json 中添加：

"types": [
  "node"
]

tsconfig.json

以下是 tsconfig.json 的配置内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "jsx": "preserve",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

路由配置

安装 Vue Router

安装 Vue Router 4：

npm install vue-router@4

配置路由

创建 src/router/index.ts 并添加以下内容：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld,
  }
]

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

export default router

在 main.ts 中使用路由

在 src/main.ts 中添加以下代码来使用路由：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

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

状态管理

安装 Pinia

安装 Pinia 作为状态管理库：

npm install pinia

在 main.ts 中使用 Pinia

在 src/main.ts 中添加以下代码来使用 Pinia：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

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

样式预处理器

安装 Sass

安装 Sass 作为 CSS 预处理器：

npm i sass -D

安装 Element Plus

在项目根目录下打开命令行工具，运行以下命令来安装 Element Plus：

npm install element-plus

完整引入

一次性引入 Element Plus 的所有组件和样式，在 main.ts 文件写入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(router)
app.use(createPinia())
app.use(ElementPlus)

app.mount('#app')

一般不推荐这种写法，因为打包后的文件太大，下面介绍官方推荐的方法

按需引入

如果你想要按需引入 Element Plus 的组件和样式，你需要安装额外的插件 unplugin-vue-components 和 unplugin-auto-import 来实现自动导入。

首先，安装这两个插件：

npm install unplugin-vue-components unplugin-auto-import -D

然后，在 vite.config.ts 文件中配置它们：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

这样配置后，你就可以在组件中直接使用 Element Plus 的组件，而不需要在每个文件中单独导入。

附：

禁用 Vetur 插件，安装 Volar 插件。