初始化项目

npm init vite@latest
pnpm create vite
yarn create vite

指定模板方式创建项目

npm init vite@latest my-vue-app --template vue
pnpm create vite my-vue-app -- --template vue

注意：项目名称只能有小写字母数字和中下划线，不能出现中文和大写字母

基础配置

注意：项目中使用@别名时， ts无法识别需要在tsconfig.json中配置baseUrl和paths 如下设置

{
    // ...其他配置
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

集成eslint

pnpm i eslint eslint-plugin-vue --save-dev

集成pinia

集成 vueuse

pnpm i @vueuse/core -S

集成vue-router4

pnpm i vue-router --save

集成axios

pnpm i axios -S

集成UI框架 Element Plus

npm i element-plus -S

全部引入（打包之后index.js的体积会特别大，压缩之后还有接近300kb）

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

按需引入

安装依赖

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

vite中使用

// vite.config.ts
import { defineConfig } from 'vite'
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: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

webpack中使用

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

集成Less,Sass等预编译样式语言

vite已经内置了对应的loader处理这些样式，只需要安装对应的编译器就行

Less

pnpm i less -D

sass

pnpm i sass -D

提交规范

let types = [
  { value: "feature", name: "feature:  增加新功能" },
  { value: "bug", name: "bug:      测试反馈bug列表中的bug号" },
  { value: "fix", name: "fix:      修复bug" },
  { value: "ui", name: "ui:       更新UI" },
  { value: "docs", name: "docs:     文档变更" },
  { value: "style", name: "style:    代码格式(不影响代码运行的变动)" },
  { value: "perf", name: "perf:     性能优化" },
  { value: "refactor", name: "refactor: 重构(既不是增加feature，也不是修复bug)",},
  { value: "release", name: "release:  发布" },
  { value: "deploy", name: "deploy:   部署" },
  { value: "test", name: "test:     增加测试" },
  { value: "chore", name: "chore:    构建过程或辅助工具的变动(更改配置文件)" },
  { value: "revert", name: "revert:   回退" },
  { value: "build", name: "build:    打包" },
];

提升开发体验解放双手（unplugin-auto-import）

配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
    // ...其他配置
    plugins: [
        //...
        AutoImport({
            imports: ['vue', 'vue-router'], // 全局注册相关api
            dts: true, // 生成本地的.d.ts文件， 默认是auto-imports.d.ts  也可以指定名字如：dts: './auto.d.ts'
        })
    ]
})

修改tsconfig配置，解决错误提示

// tsconfig.json
{
    //...其他配置
    includes: ['auto-imports.d.ts'] //加上auto-imports.d.ts， 如果上面配置了名字，则填对应的名称
}

效果

未使用时

import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

使用后

// 不在需要手动在vue中引入相关的属性或方法， 可以直接使用
const count = ref(0)
const doubled = computed(() => count.value * 2)

vite中使用环境变量

如果需要读取环境变量， vite.config.ts中就得导出一个函数, 环境变量的命名规则默认是以 VITE_开头的变量（为了防止意外地将一些环境变量泄漏到客户端）

定义环境变量文件

基础的环境变量(默认提供的，会自动注入到import.meta.env中)

import.meta.env.MODE: {string} 应用运行的模式
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)。

额外配置的环境变量

以.env.[mode]的格式命名，格式如下，属性名称必须以VITE_ 开头, 可以在vite.config.ts中修改envPrefix属性修改
- .env
所有情况下都会加载该文件, (配置公共的属性，比如title等)
```
VITE_TITLE = xxxx管理后台
```
- .env.development(开发环境配置)
只有指定开发模式或者pnpm dev 或者pnpm serve时才会加载该环境变量
```
VITE_BASE_URL = http://xxxx.dev.api
VITE_PORT = 9530
```
- .env.production(生产环境配置)
指定为生产环境时，或者打包时加载该环境变量
```
VITE_BASE_URL = http://xxxx.prod.api
VITE_PORT = 8888
```

读取环境变量内容

// vite.config.ts
import { defineConfig, loadEnv}  from 'vite'
import type { UserConfig, ConfigEnv } from 'vite';
export default defineConfig(({command, mode}: ConfigEnv): UserConfig => {
    // command: serve | build
    // mode:  development | production
    const root = process.cwd(); // 读取当前的路径
     // 加载对应的环境变量属性
     const env = loadEnv(mode, root) // 类似于 {VITE_TITLE:'xxxxx管理后台', VITE_BASE_URL: 'http://xxx.dev.api/'}
})

vite+vue3+ts搭建基础项目