初始化vscode+vue3+vite+ts项目和相关配置（自用）
1.创建项目
npm create vue@latest
执行命令后，会让输入项目名，和预安装一些插件。
WeChat60760b3a3bf73d6b7659a3b7ce96d71e.jpg
建议安装：vue-router、ESLint、Prettier，本文后续内容是以默认安装了前面三个而展开的。
其他的根据自己的需求来决定是否安装。
2.删除示例代码
将项目初始化后生成的不相关的示例代码全部删掉。
3.配置环境变量
3.1 在项目根目录新建环境配置文件
有几个环境就创建几个。比如有:dev、uat、prd三个环境。则文件如下：
WeChatb3828a097aec9173039efeb5ba6479ba.jpg
这样就可以配置环境变量了，比如请求后端的api的域名，环境变量名以
VITE_开头。
// .env.dev
VITE_API_URL = 'dev环境域名'
// .env.uat
VITE_API_URL = 'uat环境域名'
// .env.prd
VITE_API_URL = 'prd环境域名'
然后在项目中，就可以通过import.meta.env.VITE_API_URL访问到环境变量。但是此时vscode是没有代码提示的（代码提示框里找不到VITE_API_URL）
截屏2023-12-27 16.14.53.png
接下来为环境变量添加代码自动提示功能。在根目录找到
env.d.ts文件, 添加如下代码：
export {}
declare global {
declare interface ImportMetaEnv {
// 在这里为所有的环境变量定义属性名和类型...
readonly VITE_API_URL: string;
}
declare interface ImportMeta {
readonly env: ImportMetaEnv
}
}
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
此时再访问环境变量vscode就能有代码提示了（代码提示框里出现了VITE_API_URL）：
截屏2023-12-27 16.18.10.png
3.2 修改package.json
为npm命令添加--mode参数。需要哪个环境运行对应的命令即可。
WeChatf511baae7049281f1608567eeb00112a.jpg
3.3 在vite.config.ts相关配置以及在其中访问环境变量。
修改defineConfig的创建方式（默认的方式是直接return了一个对象）。通过传入闭包的方式创建，能够获取到configEnv，通过configEnv和loadEnv来获取相关环境。
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'
// https://vitejs.dev/config/
export default defineConfig((configEnv) => {
// 拿环境
const curEnvFileName = `.env.${configEnv.mode}`
// 拿环境变量
const envProps = loadEnv(configEnv.mode, process.cwd())
console.log('🚀🚀🚀', configEnv, curEnvFileName, envProps)
// apiUrl
const apiUrl = envProps.VITE_API_URL
return {
base: './',
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
host: '0.0.0.0',
port: 5173,
proxy: {
'/clienteling-client-app': {
target: apiUrl,
changeOrigin: true
}
}
}
}
})
至此环境变量相关的完毕！
4. 代码自动Lint，不合规时并提示报错
在根目录下找到.eslintrc.cjs和.eslintrc-auto-import.json，没有的话就自己新建。
.eslintrc.cjs内容如下：
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended', // 使用推荐的eslint
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-recommended', // 使用插件支持vue3
'plugin:prettier/recommended', // 1.继承.prettierrc.js文件规则 2.开启rules的 "prettier/prettier": "error" 3.eslint fix的同时执行prettier格式化
'./.eslintrc-auto-import.json',
],
parser: 'vue-eslint-parser',
ignorePatterns: ['tailwind.config.cjs', 'env.d.ts'],
overrides: [
{
env: {
node: true,
},
files: ['.eslintrc.{js,cjs}'],
parserOptions: {
sourceType: 'script',
},
},
],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['vue'],
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
},
rules: {
'no-console': 'off', // 生产模式不允许使用log
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产默认不允许使用debugger
'@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '.*', args: 'none' }], // 变量声明未使用
// 允许ts使用any
'@typescript-eslint/no-explicit-any': 'off',
// 允许函数不明文声明返回值类型
'@typescript-eslint/explicit-function-return-type': 'off',
// 允许使用非严格boolean表达式
'@typescript-eslint/strict-boolean-expressions': 'off',
'vue/multi-word-component-names': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
},
}
.eslintrc-auto-import.json文件内容如下：
{
"globals": {
"Component": true,
"ComponentPublicInstance": true,
"ComputedRef": true,
"EffectScope": true,
"ExtractDefaultPropTypes": true,
"ExtractPropTypes": true,
"ExtractPublicPropTypes": true,
"InjectionKey": true,
"PropType": true,
"Ref": true,
"VNode": true,
"WritableComputedRef": true,
"acceptHMRUpdate": true,
"computed": true,
"createApp": true,
"createPinia": true,
"customRef": true,
"defineAsyncComponent": true,
"defineComponent": true,
"defineStore": true,
"effectScope": true,
"getActivePinia": true,
"getCurrentInstance": true,
"getCurrentScope": true,
"h": true,
"inject": true,
"isProxy": true,
"isReactive": true,
"isReadonly": true,
"isRef": true,
"mapActions": true,
"mapGetters": true,
"mapState": true,
"mapStores": true,
"mapWritableState": true,
"markRaw": true,
"nextTick": true,
"onActivated": true,
"onBeforeMount": true,
"onBeforeRouteLeave": true,
"onBeforeRouteUpdate": true,
"onBeforeUnmount": true,
"onBeforeUpdate": true,
"onDeactivated": true,
"onErrorCaptured": true,
"onMounted": true,
"onRenderTracked": true,
"onRenderTriggered": true,
"onScopeDispose": true,
"onServerPrefetch": true,
"onUnmounted": true,
"onUpdated": true,
"provide": true,
"reactive": true,
"readonly": true,
"ref": true,
"resolveComponent": true,
"setActivePinia": true,
"setMapStoreSuffix": true,
"shallowReactive": true,
"shallowReadonly": true,
"shallowRef": true,
"storeToRefs": true,
"toRaw": true,
"toRef": true,
"toRefs": true,
"toValue": true,
"triggerRef": true,
"unref": true,
"useAttrs": true,
"useCssModule": true,
"useCssVars": true,
"useLink": true,
"useRoute": true,
"useRouter": true,
"useSlots": true,
"watch": true,
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true
}
}
5. 保存文件后自动格式化代码
在.vscode文件下找到settings.json文件（没有就自己创建一个）。添加如下配置项：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
6. 自动导入自定义组件 unplugin-vue-components
安装插件unplugin-vue-components。
npm install unplugin-vue-components@latest -D
配置vite.config.ts:在plugins中添加Components选项。
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
...
plugins: [
Components({
dirs: ['src/components'],
extensions: ['vue'],
resolvers: [ElementPlusResolver()],
dts: './components.d.ts',
deep: true,
}),
],
tsconfig.app.json文件中的include新增一项："components.d.ts"
{
...
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "components.d.ts"],
...
}
7. 自动导入vue等框架api，unplugin-auto-import
安装插件unplugin-auto-import
npm install unplugin-auto-import@latest -D
配置vite.config.ts:在plugins中添加AutoImport选项
import AutoImport from 'unplugin-auto-import/vite'
...
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
dts: './auto-imports.d.ts',
eslintrc: {
enabled: true,
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true,
},
}),
Components({
dirs: ['src/components'],
extensions: ['vue'],
resolvers: [ElementPlusResolver()],
dts: './components.d.ts',
deep: true,
}),
]
tsconfig.app.json文件中的include新增一项："auto-imports.d.ts"
{
...
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "components.d.ts", "auto-imports.d.ts"],
...
}
配置好了之后，再使用vue相关的api时就不需要在每一个需要使用的文件中重复的import了。
8. 关于router页面保活问题
// App.vue
<template>
<RouterView v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name" />
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name" />
</RouterView>
</template>
可以通过自定义的meta来控制页面是否保活。在router相关的配置文件中给需要保活的页面的meta设置keepAlive属性即可。
