更新HBuilderX
编译器到3.3.0+
,HBuilderX 3.3.0+
的编辑器支持基于 Vite 编译到小程序平台。
至此,uni-app在App/H5/小程序
全平台支持Vue 3.0
开发,且全平台支持Vite
编译器。
用cli创建支持Vue3/Vite的uni-app项目
1、命令行创建 Vue3/Vite 工程
# 创建以 javascript 开发的工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
# 创建以 typescript 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
复制代码
2、进入工程目录
cd my-vue3-project
复制代码
3、查看创建成功后的vue3+vite+ts的项目结构
|-- 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
复制代码
在终端执行npm run build:h5
,执行完成后根目录下多了如下打包文件
|-- 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创建支持Vue3/Vite的uni-app项目,后面会再出多篇文章详细写项目搭建实用教程