如何使用Vite创建Vue3的uniapp项目_uni-preset-vue-vite

项目结构

my-vue3-project
├─ .env   						//默认环境变量
├─ .env.development  			//开发环境变量
├─ .eslintrc-auto-import.json	//（autoimport变量，eslint配置）由auto-import插件生成
├─ .eslintrc.js 				//eslint配置文件
├─ .gitignore
├─ auto-imports.d.ts			//（autoimport变量，ts声明文件）由auto-import插件生成
├─ index.html
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ src  
│  ├─ App.vue
│  ├─ components
│  ├─ main.js
│  ├─ manifest.json				//uniapp项目配置文件
│  ├─ pages	
│  │  └─ index
│  │     └─ IndexView.vue
│  ├─ pages.json 	 			//页面配置文件
│  ├─ services 					// 请求后端服务目录
│  │  ├─ api.js  				// 后端api
│  │  └─ http.js				//请求
│  ├─ shime-uni.d.ts
│  ├─ static					//静态文件目录
│  │  └─ logo.png
│  ├─ store	 					//pinia全局状态库
│  │  └─ useUserStore.js
│  ├─ uni.scss
│  └─ utils						//公共的工具方法
└─ vite.config.js

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

创建历程

项目创建¹

npx degit dcloudio/uni-preset-vue#vite my-vue3-project
1

• Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
• 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
• HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
• HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node路径

项目依赖安装

Eslint

Eslint的相关配置可参考文章：Web项目如何配置Eslint
注意：在配置完Eslint之后，在项目中使用uni的时候会报uni未被定义的错，需在.eslintrc.js中加上以下代码

globals: {
  uni: true
}
1
2
3

vite.config.js中eslintPlugin配置

import eslintPlugin from 'vite-plugin-eslint'
export default defineConfig({
  plugins: [
  	eslintPlugin({
      cache: true,
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue', 'src/*.nvue'],
      failOnError: false // eslint报错不影响运行
    }),
  ]
1
2
3
4
5
6
7
8
9

Pinia²

安装

注意：在这个项目中安装的vue版本是：3.2.47，pinia：3.1及以上版本需要依赖vue：3.3及以上版本才能运行成功。

@REM npm 安装
npm i pinia@2.0
@REM node 安装
yarn add pinia@2.0
1
2
3
4

安装依赖时出现如下报错可尝试通过参考文章解决：npm安装依赖时出现Peer Dependencies冲突报错

While resolving: uni-preset-vue@0.0.0
Found: vue@3.2.47
node_modules/vue
  peer vue@"^3.2.25" from @vitejs/plugin-vue@4.3.4
  node_modules/@vitejs/plugin-vue
    ...

Conflicting peer dependency: vue@3.3.4
node_modules/vue
  peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.2
  node_modules/@vue/composition-api
    peerOptional @vue/composition-api@"^1.4.0" from pinia@2.0.34
    node_modules/pinia
      pinia@"2.0.34" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Luch-Request³

uniapp原生的uni.request使用比较麻烦，它并非使用Promise的形式也不支持请求拦截和相应拦截的配置，而luch-request基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截

• 支持全局挂载
• 支持多个全局配置实例
• 支持自定义验证器
• 支持文件上传/下载
• 支持task 操作
• 支持自定义参数
• 支持多拦截器
• 对参数的处理比uni.request 更强

安装

npm install luch-request -S
1

Sass支持⁴

安装

npm i sass sass-loader -D
1

unplugin-auto-import⁵

unplugin-auto-import 是为Vite、Webpack、Rollup和esbuild按需自动导入API，同时支持TypeScript。
使用它在vue3项目中使用预设导入的api就不需要import，可以通过预设自动导入模块，增强开发体验

安装

npm i -D unplugin-auto-import
1

在Vite.config.js中加入如下配置

import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
	plugins:[
		AutoImport({
			// 需要自动引入的文件
			include: [
				/\.[j]sx?$/,
				/\.vue$/,
				/\.vue\?vue/,
				/\.nvue$/,
				/\.nvue\?nvue/,
				/\.md$/,
			],
			// 全局自动引入api预设
			imports: [
				// 插件预设支持导入的api
				'vue',
				// 'vue-router',
				'pinia',
				'uni-app'
				// 自定义导入的api
			],
			// eslint配置
			eslintrc: {
				enabled: true, // Default `false`
				filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
				globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
			},
			dts: './auto-imports.d.ts',
			// dts:false
		})
	]
})
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
33

生成eslint配置文件并使用

通过执行命令npm run dev:h5 运行项目，运行成功时项目根目录会生成auto-imports.d.ts和**.eslintrc-auto-import.json**两个文件，然后在.eslintrc.js文件中的extends属性中，引入该文件

extends: [
  'standard',
  'plugin:vue/vue3-essential',
  './.eslintrc-auto-import.json'
]
1
2
3
4
5

注意：引入后需重新运行项目才能生效

添加默认和开发环境变量文件

在项目根目录添加.env和.env.development文件，以配置环境变量
详细配置教程可参照官网：Vite环境变量和模式

配置UI库uni-ui⁶

安装

npm i @dcloudio/uni-ui
1

配置

vite.config.js

注意 cli 项目默认是不编译 node_modules 下的组件的，导致条件编译等功能失效 ，导致组件异常 需要在vite.config.js增加 @dcloudio/uni-ui 包的编译即可正常

 transpileDependencies: ['@dcloudio/uni-ui']
1

pages.json

正常来说这样子引入的话，使用组件时，需要在页面处import才可以使用，然而可以通过npm+easycom的形式来全局引入组件。在 pages.json中加入如下代码，即可在使用组件而不需在页面处import。

"easycom": {
	"autoscan": true,
	"custom": {
		"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
	}
}
1
2
3
4
5
6

项目到这里就结束了，这里提供该项目的gitee地址，方便拉取直接使用

这个项目中master分支中使用的Eslint风格为Standard，而prettier分支使用的风格为Prettier

https://gitee.com/cai-shaohua/my-uniapp-project
1

---

1. 内容来自uniapp官网，详情可查看使用vue-cli查看目录 ↩︎

2. pinia官网 ↩︎

3. luch-request官网 ↩︎

4. sass官网 ↩︎

5. unplugin-auto-import官网 ↩︎

6. uni-ui Github地址 ↩︎