关于vue3:Vue3使用vuecli搭建项目

一、Vue3 简介
2020 年 9 月，Vue.js3.0’One Piece’ 正式版公布，vue3 反对 vue2 大多数个性，并更好的反对 Typescript.
性能方面，相比 Vue2,vue3 的性能晋升了许多

• 打包大小缩小 41%
• 首次渲染快 55%，更新渲染快 133%
• 内存缩小 54%
• 应用 Proxy 代替 defineProterty 实现数据响应式
• 重写虚构 DOM 的实现和 Tree-Shaking（精简模块，去掉未应用过的）

二、应用 vue-cli 创立 vue3 我的项目
1、查看 vue-cli 版本，必须在 4.5.0 以上

vue -V

2、若版本过低，需降级(Vue CLI 由原来的 vue-cli 改成了 @vue/cli。若曾经全局装置了旧版本的 vue-cli 须要通过 npm uninstall vue-cli - g 卸载)

npm install -g @vue/cli

3、创立我的项目

vue create my-project

• 抉择第三个，按 Enter

• 而后抉择 TypeScript, 按空格选中。（临时不选 vue-router 和 vuex）
• 按 Enter

• 选 3.x
• 之后的始终 Enter

创立实现，cd 到创立的我的项目门路下，输出 npm run serve 开启一个 node 服务

4、我的项目简介

• 我的项目构造

• main.ts

// 程序的主入口文件，（ts 文件）// 引入 createApp 函数，创立对应的利用，产生利用的实例对象
import {createApp} from 'vue'
// 引入 App 组件（所有组件的父级组件）import App from './App.vue'

// 创立 App 利用，返回对应的实例对象，调用 mount 办法挂载到 id 为 app 的 DOM 中（public 文件夹下的 index.html）createApp(App).mount('#app')

• App.vue

<template>
<!-- Vue2 中的 html 模板必须要有一对根标签，Vue3 组件的 html 模板中能够没有根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<!--script 标签能够设置 lang 为 ts, 反对 ts 代码 -->
<script lang="ts">

// defineComponent 函数，作用是定义一个组件
import {defineComponent} from 'vue';
import HelloWorld from './components/HelloWorld.vue';

// 应用 defineComponent()对外裸露一个定义好的组件
// 函数外部能够传入一个配置对象，对象与 vue2 统一
export default defineComponent({
  name: 'App',   // 以后组件的名字
  components: {  // 注册组件
    HelloWorld   // 注册一个子组件
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三、应用 Vue3 与 vue2 通过 cli 脚手架搭建的我的项目区别
1、vue2 组件中必须有一个根标签,vue3 能够没有根标签
2、vue2 实例化应用 new Vue(),vue3 应用 createApp()
3、vue2 挂载 DOM 的形式是应用 el 属性，Vue3 应用 mount() 办法传入 DOM 选择器。
4、vue3 注册组件应用 defineComponent 办法
5、vue3 反对 TypeScript