项目构建：vite+vue3+ts+element-plus，一路走过的那些坑

2023-10-06 02:50:30

1. 安装依赖的顺序

vite、vue3、typescript和element-plus都需要通过npm来安装。安装的顺序会影响项目的构建，因此需要特别注意。正确的安装顺序如下：

npm install vite
npm install vue@next
npm install @vue/cli-plugin-typescript
npm install element-plus

2. 配置tsconfig.json

在项目根目录下创建tsconfig.json文件，并添加如下内容：

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "jsx": "preserve",
    "sourceMap": true,
    "allowJs": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

3. 配置vite.config.js

在项目根目录下创建vite.config.js文件，并添加如下内容：

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

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

4. 配置package.json

在package.json文件中添加如下内容：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^3.0.0",
    "@vitejs/plugin-vue": "^3.0.0",
    "@rollup/plugin-typescript": "^8.3.0",
    "typescript": "^4.7.4"
  }
}

5. 创建src文件夹

在项目根目录下创建src文件夹，并在src文件夹下创建main.ts文件，并添加如下内容：

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

createApp(App).mount('#app')

6. 创建App.vue文件

在项目根目录下的src文件夹下创建App.vue文件，并添加如下内容：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vite + Vue 3 + TypeScript + Element Plus!'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

7. 运行项目

在终端中运行以下命令：

npm run dev

项目将在本地3000端口运行。

8. element-plus的引入

在main.ts文件中引入element-plus，并添加如下代码：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus)

9. 使用element-plus组件

在App.vue文件中可以使用element-plus的组件，例如：

<template>
  <div id="app">
    <el-button>Hello Element Plus!</el-button>
  </div>
</template>

<script>
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')
</script>