uni-app系列（一）用cli创建支持Vue3/Vite的uni-app项目

更新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项目，后面会再出多篇文章详细写项目搭建实用教程