关于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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据