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
  }
标签：

相关文章