软件定制开发供应商工欲善其事必先利其器，软件定制开发供应商开发项目的第一步一定软件定制开发供应商是配置环境和初始化项目工程，整个专栏后续都将在该工程上进行讲解，但是为什么要用cli创建呢？这里先多说几句：
1、HbuilderX使用体验极差，我不打算使用它
2、为便于后期开发，我们要在项目中配置自动导入
3、为了代码规范，我们要在项目中配置Eslint
1、创建项目
我们整个项目技术栈将基于 (setup语法糖模式)、TypeScript、ViteJs、包管理工具使用pnpm；下面，我们创建一个使用Vue3 + TS + Vite的uniapp项目：
npx degit dcloudio/uni-preset-vue#vite-ts csdn-project- 1
安装依赖项
// 进入项目目录cd csdn-project// 安装依赖pnpm install- 1
- 2
- 3
- 4
- 5
2、基本配置
打开 vite.config.ts 先配置一下 alias
// vits.config.tsimport { defineConfig } from "vite"import uni from "@dcloudio/vite-plugin-uni"export default defineConfig({ resolve: { alias: { '@': `${path.resolve(__dirname, 'src')}/`, }, extensions: ['.mjs', '.js', '.jsx', '.json', '.vue'], }, plugins: [ uni()， ],})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
这个时候 alias 配置中的 path 和 __dirname 会报红，安装一下 @types/node 并import path即可
pnpm add @types/node -D- 1
// vits.config.tsimport { defineConfig } from "vite"import * as path from 'path' // 加上它import uni from "@dcloudio/vite-plugin-uni"export default defineConfig({ resolve: { alias: { '@': `${path.resolve(__dirname, 'src')}/`, }, extensions: ['.mjs', '.js', '.jsx', '.json', '.vue'], }, plugins: [ uni()， ],})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
再配置一下 tsconfig.json ，加入 baseUrl 和 paths 配置项；
{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "types": [ "@dcloudio/types" ], // ++++++++++ "baseUrl": ".", "paths": { "@/*": [ "src/*" ] } // +++++++++ }, "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", ]}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
3、配置自动导入
为什么要配置自动导入，下面举个例子:
// 不使用自动导入的用法<script lang="ts" setup>import { ref } form 'vue'import { onLoad } from '@dcloudio/uni-app'const name = ref('热爱生活的正道的光')onLoad(() => { console.log(name.value)})</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
// 使用自动导入的用法<script lang="ts" setup>const name = ref('热爱生活的正道的光')onLoad(() => { console.log(name.value)})</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
通过以上两个代码块可以看出，在不使用自动导入的情况下，我们每使用到一个vue或者uniapp的方法的时候，就需要import一下，当配置了自动导入后就不需要import了，好了，言归正传，接下来让我们一起来配置自动导入吧！
首先，安装 unplugin-auto-import 插件，关于插件的介绍可前往GitHub查看：
pnpm add unplugin-auto-import- 1
项目根目录创建 typings 目录，然后按如下方法配置 vite.config.ts
import { defineConfig } from "vite"import uni from "@dcloudio/vite-plugin-uni"// 加上下面这一行import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({ plugins: [ uni()， // 加上下面的配置 AutoImport({ include: [ /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx /\.vue$/, /\.vue\?vue/, // .vue ], imports: [ 'vue', 'uni-app', ], dts: 'typings/auto-imports.d.ts', }), ],})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
同时在 tsconfig.json 中添加如下配置：
{ "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", // 加上下面两项 "typings/**/*.ts", "typings/**/*.d.ts" ],}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
自动导入就配置完成了，打开 App.vue ，加入如下代码，然后运行 pnpm dev:mp-weixin
<script setup lang="ts">const name = ref('热爱生活的正道的光')onLaunch(() => { console.log(name.value)})</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
查看控制台，发现已经正常打印了
当我们运行 pnpm dev:mp-weixin 后，在 typings 目录中自动生成了一个 auto-imports.d.ts 文件，打开该文件之后发现里面的 createApp 报红了：
打开 tsconfig.json 文件，在 compilerOptions 选项中加入 "skipLibCheck": true：
至此，自动导入配置完成，下一篇文章我们将为项目配置基于 airbnb 规范的 Eslint 。