Vue3-使用@vue/cli搭建项目

1、Vue3简介
2020年9月，Vue.js3.0'One Piece'正式版发布，vue3支持vue2大多数特性，并更好的支持Typescript.
性能方面，相比Vue2,vue3的性能提高了许多

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

---

2、使用vue-cli建立vue3项目
一、检查vue-cli版本，必须在4.5.0以上

vue -V

二、若版本太低，需升级(Vue CLI由原来的vue-cli改为了@vue/cli。若已经全局安装了旧版本的vue-cli须要经过npm uninstall vue-cli -g卸载)

npm install -g @vue/cli

三、建立项目

vue create my-project

• 选择第三个，按Enter

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

• 选3.x
• 以后的一直Enter

建立完成，cd到建立的项目路径下，输入npm run serve开启一个node服务

四、项目简介

• 项目结构

• 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>

---

3、使用Vue3与vue2经过cli脚手架搭建的项目区别
一、vue2组件中必须有一个根标签,vue3能够没有根标签
二、vue2实例化使用new Vue(),vue3使用createApp()
三、vue2挂载DOM的方式是使用el属性，Vue3使用mount()方法传入DOM选择器。
四、vue3注册组件使用defineComponent方法
五、vue3支持TypeScript