更新HBuilderX
編譯器到3.3.0+
垃帅,HBuilderX 3.3.0+
的編輯器支持基于 Vite 編譯到小程序平臺。
至此惯疙,uni-app在App/H5/小程序
全平臺支持Vue 3.0
開發(fā)带猴,且全平臺支持Vite
編譯器姑丑。
用cli創(chuàng)建支持Vue3/Vite的uni-app項目
1、命令行創(chuàng)建 Vue3/Vite 工程
# 創(chuàng)建以 javascript 開發(fā)的工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
# 創(chuàng)建以 typescript 開發(fā)的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
復制代碼
2呀忧、進入工程目錄
cd my-vue3-project
復制代碼
3师痕、查看創(chuàng)建成功后的vue3+vite+ts的項目結(jié)構(gòu)
|-- src
|-- App.vue
|-- env.d.ts
|-- main.ts
|-- manifest.json
|-- pages.json
|-- uni.scss
|-- pages
| |-- index
| |-- index.vue
|-- static
|-- logo.png
|-- index.html
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- tsconfig.json
|-- vite.config.ts
復制代碼
3、安裝依賴
npm i
復制代碼
4而账、運行
如下是官方默認配置的部分運行命令胰坟,可以在package.json
中查看更多配置或修改配置。
# 運行到 h5
npm run dev:h5
# 運行到 app
npm run dev:app
# 運行到 微信小程序
npm run dev:mp-weixin
復制代碼
在終端運行npm run dev:h5
后泞辐,會返回一個本地打開鏈接http://localhost:3000/
笔横,復制鏈接到瀏覽器打開
vite v2.6.14 dev server running at:
> Local: http://localhost:3000/
復制代碼
5竞滓、打包
如下是官方默認配置的部分打包命令,可以在package.json
中查看更多配置或修改配置吹缔。
# 打包到 h5
npm run build:h5
# 打包到 app
npm run build:app
# 打包到 微信小程序
npm run build:mp-weixin
復制代碼
在終端執(zhí)行npm run build:h5
商佑,執(zhí)行完成后根目錄下多了如下打包文件
|-- dist
| |-- build
| |-- h5
| |-- index.html
| |-- assets
| | |-- index.04f3b4ef.css
| | |-- index.5d148c39.css
| | |-- index.6096a075.js
| | |-- pages-index-index.57eca37d.js
| | |-- uni.b55ea442.css
| | |-- vendor.12710f1b.js
| |-- static
| |-- logo.png
復制代碼
以上只是簡單的演示一下用cli創(chuàng)建支持Vue3/Vite的uni-app項目,后面會再出多篇文章詳細寫項目搭建實用教程