Vue3快速上手+俩种创建方式+主要源码讲解

时间:2023-01-09 00:53:58

一.Vue3快速上手

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、

出现下面命令,说明没有安装过。

Vue3快速上手+俩种创建方式+主要源码讲解

安装或者升级Vue:

npm install -g @vue/cli

Vue3快速上手+俩种创建方式+主要源码讲解

保证 vue cli 版本在 4.5.0 以上

vue --version

创建项目

vue create my-project

耐心等待:

Vue3快速上手+俩种创建方式+主要源码讲解

步骤:

  • 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

Vue3快速上手+俩种创建方式+主要源码讲解

访问项目:http://localhost:8080/

Vue3快速上手+俩种创建方式+主要源码讲解

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 创建启动成功:

Vue3快速上手+俩种创建方式+主要源码讲解

访问效果如下:

Vue3快速上手+俩种创建方式+主要源码讲解

二. 部分源码讲解

在vscode里打开上面创建的vue项目,我们得到下面的目录结构:

Vue3快速上手+俩种创建方式+主要源码讲解

2.1 main.ts

  1. 在src目录下的main.ts是程序的主入口文件,ts 文件。

  2. 引入 createApp 函数,创建对应的应用,产生应用的实例对象

import { createApp } from 'vue'
  1. 引入 App 组件(所有组件的父级组件)
import App from './App.vue'
  1. 创建 App 应用返回对应的实例对象,调用 mount 方法进行挂载
createApp(App).mount('#app')

这里的挂载是在,public目录下的index.html里的id为app的盒子里进行渲染。

Vue3快速上手+俩种创建方式+主要源码讲解

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
  }