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

一、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