項(xiàng)目結(jié)構(gòu)
my-vue3-project
├─ .env //默認(rèn)環(huán)境變量
├─ .env.development //開(kāi)發(fā)環(huán)境變量
├─ .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項(xiàng)目配置文件
│ ├─ pages
│ │ └─ index
│ │ └─ IndexView.vue
│ ├─ pages.json //頁(yè)面配置文件
│ ├─ services // 請(qǐng)求后端服務(wù)目錄
│ │ ├─ api.js // 后端api
│ │ └─ http.js //請(qǐng)求
│ ├─ shime-uni.d.ts
│ ├─ static //靜態(tài)文件目錄
│ │ └─ logo.png
│ ├─ store //pinia全局狀態(tài)庫(kù)
│ │ └─ useUserStore.js
│ ├─ uni.scss
│ └─ utils //公共的工具方法
└─ vite.config.js
創(chuàng)建歷程
項(xiàng)目創(chuàng)建[1]
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
- Vue3/Vite 版要求 node 版本^14.18.0 || >=16.0.0
- 如果使用 HBuilderX（3.6.7 以下版本）運(yùn)行 Vue3/Vite 創(chuàng)建的最新的 cli 工程，需要在 HBuilderX 運(yùn)行配置最底部設(shè)置 node 路徑 為自己本機(jī)高版本 node 路徑（注意需要重啟 HBuilderX 才可以生效）
- HBuilderX Mac 版本菜單欄左上角 HBuilderX->偏好設(shè)置->運(yùn)行配置->node 路徑
- HBuilderX Windows 版本菜單欄 工具->設(shè)置->運(yùn)行配置->node 路徑
項(xiàng)目依賴(lài)安裝
Eslint
Eslint 的相關(guān)配置可參考文章：Web 項(xiàng)目如何配置 Eslint
注意：在配置完 Eslint 之后，在項(xiàng)目中使用 uni 的時(shí)候會(huì)報(bào) uni 未被定義的錯(cuò)，需在.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報(bào)錯(cuò)不影響運(yùn)行
}),
]
Pinia[2]
安裝
注意：在這個(gè)項(xiàng)目中安裝的 vue 版本是：3.2.47，pinia：3.1 及以上版本需要依賴(lài) vue：3.3 及以上版本才能運(yùn)行成功。
@REM npm 安裝
npm i pinia@2.0
@REM node 安裝
yarn add pinia@2.0
安裝依賴(lài)時(shí)出現(xiàn)如下報(bào)錯(cuò)可嘗試通過(guò)參考文章解決：npm 安裝依賴(lài)時(shí)出現(xiàn) Peer Dependencies 沖突報(bào)錯(cuò)
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[3]
uniapp 原生的 uni.request 使用比較麻煩，它并非使用 Promise 的形式也不支持請(qǐng)求攔截和相應(yīng)攔截的配置，而 luch-request 基于 Promise 對(duì)象實(shí)現(xiàn)更簡(jiǎn)單的 request 使用方式，支持請(qǐng)求和響應(yīng)攔截
- 支持全局掛載
- 支持多個(gè)全局配置實(shí)例
- 支持自定義驗(yàn)證器
- 支持文件上傳/下載
- 支持 task 操作
- 支持自定義參數(shù)
- 支持多攔截器
- 對(duì)參數(shù)的處理比 uni.request 更強(qiáng)
安裝
npm install luch-request -S
Sass 支持[4]
安裝
npm i sass sass-loader -D
unplugin-auto-import[5]
unplugin-auto-import 是為 Vite、Webpack、Rollup 和 esbuild 按需自動(dòng)導(dǎo)入 API，同時(shí)支持 TypeScript。
使用它在 vue3 項(xiàng)目中使用預(yù)設(shè)導(dǎo)入的 api 就不需要 import，可以通過(guò)預(yù)設(shè)自動(dòng)導(dǎo)入模塊，增強(qiáng)開(kāi)發(fā)體驗(yàn)
安裝
npm i -D unplugin-auto-import
在 Vite.config.js 中加入如下配置
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
plugins: [
AutoImport({
// 需要自動(dòng)引入的文件
include: [
/\.[j]sx?$/,
/\.vue$/,
/\.vue\?vue/,
/\.nvue$/,
/\.nvue\?nvue/,
/\.md$/,
],
// 全局自動(dòng)引入api預(yù)設(shè)
imports: [
// 插件預(yù)設(shè)支持導(dǎo)入的api
"vue",
// 'vue-router',
"pinia",
"uni-app",
// 自定義導(dǎo)入的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 配置文件并使用
通過(guò)執(zhí)行命令npm run dev:h5 運(yùn)行項(xiàng)目，運(yùn)行成功時(shí)項(xiàng)目根目錄會(huì)生成auto-imports.d.ts和.eslintrc-auto-import.json兩個(gè)文件，然后在.eslintrc.js 文件中的 extends 屬性中，引入該文件
extends: [
'standard',
'plugin:vue/vue3-essential',
'./.eslintrc-auto-import.json'
]
注意：引入后需重新運(yùn)行項(xiàng)目才能生效
添加默認(rèn)和開(kāi)發(fā)環(huán)境變量文件
在項(xiàng)目根目錄添加.env 和.env.development 文件，以配置環(huán)境變量
詳細(xì)配置教程可參照官網(wǎng)：Vite 環(huán)境變量和模式
配置 UI 庫(kù) uni-ui[6]
安裝
npm i @dcloudio/uni-ui
配置
vite.config.js
注意 cli 項(xiàng)目默認(rèn)是不編譯 node_modules 下的組件的，導(dǎo)致條件編譯等功能失效 ，導(dǎo)致組件異常 需要在 vite.config.js 增加 @dcloudio/uni-ui 包的編譯即可正常
transpileDependencies: ["@dcloudio/uni-ui"];
pages.json
正常來(lái)說(shuō)這樣子引入的話，使用組件時(shí)，需要在頁(yè)面處 import 才可以使用，然而可以通過(guò) npm+easycom 的形式來(lái)全局引入組件。在 pages.json 中加入如下代碼，即可在使用組件而不需在頁(yè)面處 import。
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}
項(xiàng)目到這里就結(jié)束了，這里提供該項(xiàng)目的 gitee地址，方便拉取直接使用
這個(gè)項(xiàng)目中 master 分支中使用的 Eslint 風(fēng)格為 Standard，而 prettier 分支使用的風(fēng)格為 Prettier
https://gitee.com/cai-shaohua/my-uniapp-project
-
內(nèi)容來(lái)自 uniapp 官網(wǎng)，詳情可查看使用 vue-cli 查看目錄 ??
-
pinia 官網(wǎng) ??
-
luch-request 官網(wǎng) ??
-
sass 官網(wǎng) ??
-
unplugin-auto-import 官網(wǎng) ??文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-706912.html
-
uni-ui Github 地址 ??文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-706912.html
到了這里，關(guān)于如何使用Vite創(chuàng)建Vue3的uniapp項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
