如何使用Vite創建Vue3的uniapp項目

来源:https://www.cnblogs.com/observer-csh/archive/2023/09/11/17694802.html
-Advertisement-
Play Games

項目結構 my-vue3-project ├─ .env //預設環境變數 ├─ .env.development //開發環境變數 ├─ .eslintrc-auto-import.json //（autoimport變數，eslint配置）由auto-import插件生成 ├─ .eslintr ...


項目結構

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 地址 ↩︎


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 不同CPU性能大PK
    前言 比較Hygon7280、Intel、AMD、鯤鵬920、飛騰2500的性能情況 CPU型號 Hygon 7280 AMD 7H12 AMD 7T83 Intel 8163 鯤鵬920 飛騰2500 倚天710 物理核數 32 32 64 24 48 64 128core 超線程 2 2 2 2 ...
  • 讀高性能MySQL（第4版）筆記06_優化數據類型（上）
    1. 良好的邏輯設計和物理設計是高性能的基石 1.1. 反範式的schema可以加速某些類型的查詢，但同時可能減慢其他類型的查詢 1.2. 添加計數器和彙總表是一個優化查詢的好方法，但它們的維護成本可能很 1.3. 將修改schema作為一個常見事件來規劃 2. 讓事情儘可能小而簡單是一個好主意 2 ...
  • ORACLE的Scheduler的時區總結
    在Oracle資料庫中，一般人們可能只會關註資料庫的時區或會話的時區，但是很少有人會關註Scheduler的時區設置,因為Scheduler的時區設置一般只會影響作業的scheduler和Windows的運行，很多時候，人們往往沒有註意到它。這裡簡單總結一下這個知識點。 在Oracle 10g/11 ...
  • SQL Server實例間同步登錄用戶
    SQL Server實例間同步登錄用戶 問題痛點：由於AlwaysOn和資料庫鏡像無法同步資料庫外實例對象，例如 登錄用戶、作業、鏈接伺服器等，導致主庫切換之後，應用連接不上資料庫或者作業不存在導致每晚跑批任務漏跑等 目前來看，作業等其他實例對象的同步還比較難實現，比如作業分為很多步驟，而且作業包含 ...
  • Navicat 攜手華為雲GaussDB，聯合打造便捷高效的資料庫開發和建模工具方案
    本文分享自華為雲社區《Navicat 攜手華為雲GaussDB，聯合打造便捷高效的資料庫開發和建模工具方案》，作者： GaussDB 資料庫 。 近日， Navicat Premium順利完成與華為雲 GaussDB的相容性測試認證，並獲得華為雲授予的技術認證書。 Navicat 作為華為雲 Gau ...
  • @全體開發者們，ChunJun 有獎徵文，精美獎品，快來參加！
    2022年4月，在 FlinkX 進行初版開源的整整四年後，技術團隊決定對FlinkX進行整體升級，並更名為 ChunJun。到目前為止，ChunJun 正式更名上線已經過了一年多了。作為一款穩定、易⽤、⾼效、批流⼀體的數據集成框架，相信各位關註著、喜愛著、使用著 ChunJun 的開發者們在過去的 ...
  • 玖章算術葉正盛將揭示為什麼PostgreSQL不如MySQL流行？｜3306π
    葉正盛，玖章算術 CEO葉正盛，NineData 創始人 &CEO，原阿裡雲資料庫產品管理與解決方案部總經理，資深資料庫專家玖章算術是基礎技術領域的科技創新企業，創始團隊來自阿裡、華為等公司多位 P9 級資深專家，旗下的核心產品 NineData 致力於讓每個人都能充分利用數據和雲計算技術。Post... ...
  • 探索GreatADM：如何快速定義監控
    引文 在資料庫運維過程中，所使用的運維管理平臺是否存在這樣的問題： 1、預設監控粒度不夠,業務需要更細顆粒度的監控數據。 2、平臺預設的監控命令不適合,需要調整閾值量身定製監控策略。 3、不同類型的實例或組件需要有不同的監控重點,但管理平臺監控固化，難以應對多樣化的監控需求。 4、只監控系統關鍵指標 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類