如何使用Vite创建Vue3的uniapp项目

  • 如何使用Vite创建Vue3的uniapp项目已关闭评论
  • 135 次浏览
  • A+
所属分类:Web前端
摘要

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


项目结构

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]

npx degit dcloudio/uni-preset-vue#vite my-vue3-project 
  • 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; } 

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报错不影响运行     }),   ] 

Pinia[2]

安装

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

@REM npm 安装 npm i [email protected] @REM node 安装 yarn add [email protected] 

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

While resolving: [email protected] Found: [email protected] node_modules/vue   peer vue@"^3.2.25" from @vitejs/[email protected]   node_modules/@vitejs/plugin-vue     ...  Conflicting peer dependency: [email protected] node_modules/vue   peer vue@">= 2.5 < 2.7" from @vue/[email protected]   node_modules/@vue/composition-api     peerOptional @vue/composition-api@"^1.4.0" from [email protected]     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. 

Luch-Request[3]

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

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

安装

npm install luch-request -S 

Sass 支持[4]

安装

npm i sass sass-loader -D 

unplugin-auto-import[5]

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

安装

npm i -D unplugin-auto-import 

在 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     }),   ], }); 

生成 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' ] 

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

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

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

配置 UI 库 uni-ui[6]

安装

npm i @dcloudio/uni-ui 

配置

vite.config.js

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

transpileDependencies: ["@dcloudio/uni-ui"]; 

pages.json

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

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

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

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

https://github.com/luxigaola/my-uniapp-project 

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

  2. pinia 官网 ↩︎

  3. luch-request 官网 ↩︎

  4. sass 官网 ↩︎

  5. unplugin-auto-import 官网 ↩︎

  6. uni-ui Github 地址 ↩︎