一.Vue3快速上手
2020年9月19日凌晨，尤雨溪大大正式发布了 Vue.js 3.0 版本，代号：One Piece。此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API，并为框架未来的长期迭代奠定了坚实的基础。
3.0 版本的开发周期长达两年多，期间产生了 30+ RFCs、2600+ commits、628 pull requests，以及核心仓库之外的大量开发和文档工作。
Vue 3.0 的发布标志着此框架整体上已处于可用状态。尽管框架的某些子项目可能仍需要进一步的开发才能达到稳定状态（特别是 devtools 中的路由和 Vuex 集成），不过现在仍然是开始使用 Vue 3 启动新项目的合适时机。官方还鼓励库作者现在可以开始升级项目以支持 Vue 3。
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
面对Vue3.0，有人愁，有人喜。愁的原因是它并不好学、API很多、代码范式多元化；喜的原因是Vue3.0生态越来越强大，无论是基础构建工具，还是最佳实践，都让人欲罢不能。
1. 1使用 vue-cli 创建（脚手架）
查看本机有没有安装vue：在cmd命令框里安装vue -V、
出现下面命令，说明没有安装过。
安装或者升级Vue：
npm install -g @vue/cli
保证 vue cli 版本在 4.5.0 以上
vue --version
创建项目
vue create my-project
耐心等待：
步骤：
- Please pick a preset - 选择 Manually select features
- Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
- Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
- Use class-style component syntax - 直接回车
- Use Babel alongside TypeScript - 直接回车
- Pick a linter / formatter config - 直接回车
- Use history mode for router? - 直接回车
- Pick a linter / formatter config - 直接回车
- Pick additional lint features - 直接回车
- Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
- Save this as a preset for future projects? - 直接回车
启动项目：
cd my-project
nmp run serve
访问项目：http://localhost:8080/
1.2 使用 vite 创建
- vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，
- 它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。
- 快速的冷启动，不需要等待打包操作；
- 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
- 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。
我们新开一个cmd窗口，输入以下命令：
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
使用 vite 创建启动成功：
访问效果如下：
二. 部分源码讲解
在vscode里打开上面创建的vue项目，我们得到下面的目录结构：
2.1 main.ts
-
在src目录下的main.ts是程序的主入口文件，ts 文件。
-
引入 createApp 函数，创建对应的应用，产生应用的实例对象
import {
createApp } from 'vue'
- 引入 App 组件（所有组件的父级组件）
import App from './App.vue'
- 创建 App 应用返回对应的实例对象，调用 mount 方法进行挂载
createApp(App).mount('#app')
这里的挂载是在，public目录下的index.html里的id为app的盒子里进行渲染。
2.2 App.vue
Vue2 中的 htm 模版中必须要有一对根标签，Vue3 组件的 html 模版中可以没有根标签：
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>
这里可以使用ts代码：
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
name: 'App',
components: {
HelloWorld
}
});
</script>
上述代码解释：
-
defineComponent 函数， 目的是定义一个组件， 内部可以传入一个配置对象
-
import HelloWorld from ‘./components/HelloWorld.vue’; 引入一个子级组件
-
export default defineComponent：暴露出去一个定义好的组件
组件名字是App， components：注册组件，里面是注册一个子级组件。
name: 'App',
components: {
HelloWorld
}