Vue3.x（基于vue-cli和vite创建项目）

1.Vue3简介

• 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
• 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
• github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

2.Vue3带来了什么

1.性能的提升

• 打包大小减少41%

• 初次渲染快55%, 更新渲染快133%

• 内存减少54%

  …

2.源码的升级

• 使用Proxy代替defineProperty实现响应式

• 重写虚拟DOM的实现和Tree-Shaking

  …

3.拥抱TypeScript

• Vue3可以更好的支持TypeScript

4.新的特性

1. Composition API（组合API）

   • setup配置
   • ref与reactive
   • watch与watchEffect
   • provide与inject
   • …

2. 新的内置组件

   • Fragment
   • Teleport
   • Suspense

3. 其他改变

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

一、创建Vue3.0工程

1.使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

2.项目结构

main.js

/* 引入不再是Vue构造函数了，
引入的是一个名为createApp的工厂函数：可以直接调用 */
import { createApp } from 'vue'
import App from './App.vue'

/* 创建应用实例对象——app（类似于之前的Vue2中的vm，但app比vm更“轻”） */
const app=createApp(App)

//console.log('@@@@',app);

/* 挂载 */
app.mount('#app')

/* setTimeout(()=>{
  app.unmount('#app')
},1000) */


/* Vue2写法： 
import Vue from 'vue'
会报错
const vm= new Vue({
  render:(h)=>h(App)
})
vm.$mount('#app') */

App.vue

<template>
    <!-- vue3组件中的模板结构不用有根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  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.使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn

• 什么是vite？—— 新一代前端构建工具。
• 优势如下：
  • 开发环境中，无需打包操作，可快速的冷启动。
  • 轻量快速的热重载（HMR）。
  • 真正的按需编译，不再等待整个应用编译完成。
• 传统构建 与 vite构建对比图

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

main.js

/* 1.从vue中按需导入createApp函数
createApp函数的作用：创建vue的“单页面应用程序实例” */
import { createApp } from 'vue'
/* 2.导入待渲染的App.vue组件 */
import App from './components/09.provide&inject/App.vue'

//导入需要被全局注册的组件
import Swiper from './components/01.globalReg/Swiper.vue'
import Test from './components/01.globalReg/Test.vue'

/* 3.调用createApp函数，创建SPA应用实例 */
const app = createApp(App)

//调用app.component（）方法全局注册组件
/* 在进行组件的注册时，定义组件注册名称的方式有两种:
1. 使用 kebab-case 命名法（俗称短横线命名法，例如 my-swiper 和 my-search）
 2.使用 PascalCase 命名法（俗称帕斯卡命名法或大驼峰命名法，例如 MySwiper 和 MySearch）
短横线命名法的特点：必须严格按照短横线名称进行使用
帕斯卡命名法的特点：既可以严格按照帕斯卡名称进行使用，又可以转化为短横线名称进行使用*/
app.component('my-swiper',Swiper)
/* 在注册组件期间，除了可以直接提供组件的注册名称之外，还可以把组件的 name 属性作为注册后组件的名称 */
app.component(Test.name,Test)//相当于app.component('MyTest',Test)

/* 4.调用mount（）方法把App组件的模板结构，渲染到指定的el区域中 */
app.mount('#app')

App.vue

<template> 
<!-- 在vue2.x版本中，template节点内的DOM结构仅支持单个根节点 -->
<div class="app-container">
  <my-header title="迪丽热巴" bgcolor="orange"></my-header>  
  <h1>这是App.vue 根组件</h1>
  <p>ddfdfdf</p>
</div>

<h2>Vue3---{{username}}</h2>
<hr>
<!-- 在vue 3.x版本中，template节点支持多个根节点 -->
<div>
  <my-swiper></my-swiper>
  <my-test></my-test>
</div>
</template>

<script>
import MyHeader from './components/06.MyHeader/MyHeader.vue'
/* 默认导出 */
export default {
  /* 可以通过 name 节点为当前组件定义一个名称
  作用：在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件 */
  name:'MyApp',
  data(){
    return {
      username:'dilireba'
    }
  },
  components:{
    MyHeader
  }
}
</script>

<style lang="less" scoped>
.app-container{
  padding-top: 45px;
}

h1{
  color: orange;
}
/* 如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器,在 vue3.x 中推荐使用 :deep() 替代 /deep/。 */

/* /deep/ .title{
  color: red;
} */

 :deep(.title) {
  color: skyblue;
}

:deep(.header-container){
  color: blue;
  font-weight: 800;
}
</style>