工欲善其事必先利其器，开发项目的第一步一定是配置环境和初始化项目工程，整个专栏后续都将在该工程上进行讲解，但是为什么要用cli创建uniapp项目呢？这里先多说几句：

1、HbuilderX使用体验极差，我不打算使用它

2、为便于后期开发，我们要在项目中配置自动导入

3、为了代码规范，我们要在项目中配置Eslint

1、创建项目

我们整个项目技术栈将基于 Vue3(setup语法糖模式)、TypeScript、ViteJs、包管理工具使用pnpm；下面，我们创建一个使用Vue3 + TS + Vite的uniapp项目：

npx degit dcloudio/uni-preset-vue#vite-ts uniapp-project

安装依赖项

// 进入项目目录
cd uniapp-project

// 安装依赖
pnpm install

2、基本配置

打开 `vite.config.ts` 先配置一下 `alias`

// vits.config.ts
import { 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()，
	],
})

这个时候 alias 配置中的 path 和 __dirname 会报红，安装一下 @types/node 并import path即可

pnpm add @types/node -D

// vits.config.ts
import { 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()，
	],
})

再配置一下 `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"
  ]
}

3、配置自动导入

为什么要配置自动导入，下面举个例子:

// 不使用自动导入的用法

// 使用自动导入的用法
 
              
 
                

                  
  
                  支付宝打赏 
                 
                
 
                

                  
  
                  微信打赏