来源： 如何使用Vite创建Vue3的uniapp项目 – CanotStop – 博客园
项目结构
|
|
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 |
|
|
|
创建历程
项目创建
|
|
npx degit dcloudio/uni-preset-vue |
- 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 中加上以下代码
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 |
|
|
}), |
|
|
] |
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 |
安装依赖时出现如下报错可尝试通过参考文章解决：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. |
|
|
|
Luch-Request
uniapp 原生的 uni.request 使用比较麻烦，它并非使用 Promise 的形式也不支持请求拦截和相应拦截的配置，而 luch-request 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截
- 支持全局挂载
- 支持多个全局配置实例
- 支持自定义验证器
- 支持文件上传/下载
- 支持 task 操作
- 支持自定义参数
- 支持多拦截器
- 对参数的处理比 uni.request 更强
安装
|
|
npm install luch-request -S |
Sass 支持
安装
|
|
npm i sass sass-loader -D |
unplugin-auto-import
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$/, |
|
|
], |
|
|
|
|
|
imports: [ |
|
|
|
|
|
“vue”, |
|
|
|
|
|
“pinia”, |
|
|
“uni-app”, |
|
|
|
|
|
], |
|
|
|
|
|
eslintrc: { |
|
|
enabled: true, |
|
|
filepath: “./.eslintrc-auto-import.json”, |
|
|
globalsPropValue: true, |
|
|
}, |
|
|
dts: “./auto-imports.d.ts”, |
|
|
|
|
|
}), |
|
|
], |
|
|
}); |
生成 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
安装
配置
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 |
Mikel
