1. Use vue-cli to create
Official Documentation: Creating a Project | Vue CLI (vuejs.org)
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve
To use vue3, you need to ensure that the @vue/cli version is above 4.5.0
See version vue-V
Select the Vue3 version
then just wait
Finish
Then
$ cd vue3_test
$ yarn serve
Open the project and have a look
The length is exactly the same as Vue2
2. Use vite to create
Official Documentation: Getting Started | Vite Official Chinese Documentation (vitejs.dev)
Vite official website: Home | Vite Chinese website (vitejs.cn)
What is vite? — A new generation of front-end build tools.
The advantages are as follows:
- In the development environment, no packaging operation is required, and it can be cold started quickly.
- Lightweight and fast Hot Reload (HMR).
- True on-demand compilation, no longer waiting for the entire application to be compiled.
Comparison chart of traditional construction and vite construction
## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev
compatibility note
Vite needs to start | Vite official Chinese document (vitejs.dev) version 14.18+, 16+. However, some templates require a higher version of Node to run properly. When your package manager warns you, please upgrade your version of Node.
The speed is very fast, but it actually played a trick on us. It didn't help us install the dependency package, we need to manually set it up
It should be noted here
The startup