创建Vue3项目

Mr.ZhaoAbout 1 min

1. 使用vue-cli创建

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建Vue项目，选择Vue3
vue create xxx

2. 使用create-vue创建

npm create vue@latest

create-vue基于vite

vite 官网：Vite中文网open in new window

什么是 vite？—— 新一代前端构建工具

优势如下：

  • 开发环境中，无需打包操作，可快速的冷启动
  • 轻量快速的热重载（HMR）
  • 真正的按需编译，不再等待整个应用编译完成

传统构建与 vite 构建对比图

创建Vue3项目01.png
创建Vue3项目01.png

传统构建模式是将所有资源都打包好，再上线

创建Vue3项目02.png
创建Vue3项目02.png

Vite 有点按需加载的意思

3. 对比Vue2的项目文件目录

3.1 main.js

Vue2 项目的 main.js：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue3 项目的 main.js：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

分析可知：

// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)
// 挂载
app.mount('#app')

3.2 App.vue

在 template 标签里可以没有根标签了

<template>
	<!-- Vue3组件中的模板结构可以没有根标签 -->
	<img alt="Vue logo" src="./assets/logo.png">
	<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>