[Vue3] - 1 创建vue3工程

前言
…
目标

1 vue3的优势有哪些
2 如何创建vue3工程

一 vue3带来了什么

从vue2到vue3一个大版本的升级，必然会有一些性能上的优化
性能提升和源码升级

性能提升	源码升级
打包大小减少	使用Proxy代替defineProperty实现响应式
初次渲染快，更新渲染快	重写虚拟DOM的实现和Tree-Shaking）
内存减少

拥抱TypeScript
Vue3可以更好的支持TypeScript
一些新的特性

Composition API (组合API)	新的内置组件
setup配置	Fragment
ref与reactive	Teleport
watch与watchEffect	Suspense
provide与inject

其他改变
新的生命周期钩子
data选项应始终被声明为一个函数
移除keyCode支持作为v-on的修饰符

二 创建Vue3.0工程

1 使用vue-cli创建

查看版本

vue -V
创建vue3工程 vue-cli 版本要4.5以上的版本

更新Vue CLI到最新版本

npm install -g @vue/cli

创建项目

vue create < project-name>

选择vue3

创建完成

进入项目

cd < project-name>

安装依赖

npm i

运行项目

npm run serve

2 使用vite创建

vite是什么？，在vite官网上给的定义是“新一代前端开发与构建工具”
构建工具这个名词很熟悉吧，开发中常用的构建工具webpack（grunt、gulp也是构建工具，但是不常用），但是vite上线之后，webpack也只能逐渐的成为 旧一代的前端构建工具了

为什么这么说呢，vite有很多传统构建工具没有的优势

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

传统构建与vite构建工具的打包方式
webpack传统构建方式：根据路由找到下面的所有的依赖模块，都准备好后进行打包 最后启动服务。 比较慢

vite构建工具打包方式：先启动服务，根据接口访问路由，进行打包。速度很快，几乎是几秒就启动好了

创建工程
npm i vite-app < project-name>

进入工程
cd < project-name>

安装依赖
npm i

运行
npm run dev

3 总结

使用vue-cli和vite创建区别

分类	区别
工程目录	目录有略微的不同
使用语法	一样的都用的Vue3语法
打包速度	vite创建的工程更快

三 引入vue3

回顾一下vue2的引入写法

登录后复制

// 引入vue构造函数
import Vue from 'vue';
const vm = new Vue({
  render: h => h(App)
})
// 挂载
vm.$mount('#app')

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

vue3引入写法
vue2中直接用的构造函数去引入创建Vue，但是vue3中提供了一个createApp的工厂函数，可以直接使用createApp去创建应用实例对象

登录后复制

// 引入createApp 工厂函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象，类似vue2中的vm  但是比vm轻
const app = createApp(App)
// 挂载
app.mount('#app')

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

扩展知识
createApp支持多个应用
应用实例并不仅限于一个App应用，createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

登录后复制

const app1 = createApp({
  /* ... */
})
app1.mount('#app-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#app-2')

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

参考
 vue3中文文档

原创作者: u_16040646 转载于: https://blog.51cto.com/u_16040646/11664318