创建vue3工程
# 用vue/cli创建
官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看vue/cli版本，确保vue/cli在4.5版本以上
vue -v
## 安装或者升级@vue/cli
npm i @vue/cli -g
## 创建
vue create app
## 运行
npm run serve
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 使用vite创建
官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网： https://vitejs.cn
什么是vite？--新一代的构建工具
- 优势如下：
1.开发环境中，无需打包操作，可快速冷启动
2.轻量快速的热重载
3.真正的按需编译，不再等待整个应用编译完成
## 创建工程
npm init vite-app app
## 进入工程
cd app
## 安装依赖
npm install
## 运行
npm run dev
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 分析vue3webpack工程
# main.js
// 引入的不再是是一个vue构造函数，而是引入的是一个createApp的工厂函数
import { createApp } from 'vue'
import App from './App'
// 挂载
// const app = createApp(App)
// createApp(App).mount('#app')
// 2
//const vm = new Vue({
// render: h => h(App)
// })
// vm.$.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# App.vue
组件中的模板语法可以没有根标签
上次更新: 2023/03/05, 15:03:00