Update HBuilderX compiler to 3.3.0+, HBuilderX 3.3.0+ editor to support Vite based compilation to applets platform.

Uni-app supports Vue 3.0 development across app /H5/ applets, and Vite compiler is supported across the platform.

Create uni-app project with Vue3/Vite support using CLI

1, command line to create Vue3/Vite project

NPX degit dcloudio/uni-preset-vue#vite my-vue3-project # NPX degit dgit developed in typescript dcloudio/uni-preset-vue#vite-ts my-vue3-projectCopy the code

2. Access the project directory

cd my-vue3-project  
Copy the code

3. View the vue3+ Vite + TS project structure

    |-- 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
Copy the code

3. Install dependencies

npm i  
Copy the code

4, run,

Here are some of the commands to run the official default configuration. You can view more configurations or modify configurations in package.json.

NPM run dev:app # Run NPM run dev:mp-weixinCopy the code

After running NPM run dev:h5 on the terminal, a local open link http://localhost:3000/ is returned, and the link is copied to the browser to open

Vite v2.6.14 dev server running at: > Local: http://localhost:3000/Copy the code

5, packaging,

Here are some of the packaging commands for the official default configuration. You can view more configurations or modify configurations in package.json.

NPM run build:app # NPM run build:mp-weixinCopy the code

After running NPM run build:h5 on the terminal, the following package files are found in the root directory

    |-- 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
Copy the code

This is just a simple demonstration of how to create a Vue3/Vite uni-app project using the CLI. There will be more articles detailing how to build a practical project