Vue3教程

阅读: 3361     评论:1

博主在B站分享了视频教程,点击观看:

最新《Vue3从入门到工程化》视频教程:点此查看

本教程基于官方中文教程进行了精简和通俗化,添加了一些注释,目的是更容易理解和上手。

官方文档地址:https://v3.cn.vuejs.org/

Vue.js 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

学习Vue需要 HTML、CSS 和 JavaScript 的中级知识。

安装

根据不同的应用场景和需求,主要有四种方式将 Vue.js 添加到项目中,使用一种即可:

  • 在页面上以 CDN 包的形式导入。
  • 下载 JavaScript 源代码文件并以<script>标签导入。
  • 使用 npm 安装。
  • 使用官方的Vue CLI 脚手架工具创建工程化项目。

不推荐新手直接使用 vue-cli,尤其是在你不熟悉 Node.js 的时候。

截至2021年9月20日,最新版本为3.2.20

Vue Devtools

截至2021-09,新版本的vue devtools还处于测试阶段 - Vuex 和 Router 的集成仍在进行中。

在合适的时机,当你可以翻墙的时候,尽可能安装并熟悉使用这个页面调试工具。

CDN

<script src="https://unpkg.com/vue@next"></script>

对于生产环境,我们最好链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。

比如:

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.cjs.js"></script>

源代码

在这里下载https://unpkg.com/browse/vue@3.2.12/dist/。

npm

在用 Vue 构建大型应用时推荐使用 npm 安装 。npm 能很好地和诸如 webpackRollup 模块打包器配合使用。

# 最新稳定版
$ npm install vue@next

对于国内用户,建议将 NPM 源设置为国内的镜像,可以大幅提升安装速度。

Vue 还提供了编写单文件组件的配套工具。如果你想使用单文件组件,你还需要安装 @vue/compiler-sfc

如果你是从 Vue 2 过渡而来的,请注意 @vue/compiler-sfc 替换掉了 vue-template-compiler

$ npm install -D @vue/compiler-sfc

除了 @vue/compiler-sfc 之外,你还需要为已选择的打包工具选择一个配套的单文件组件 loader 或 plugin。更多信息请查阅单文件组件文档

实际上,大多数情况下,我们会使用 Vue CLI 来创建一个配置最小化的 webpack 构建版本,不用关心上面的事情,CLI会帮我们搞定一切。

脚手架工具 (CLI)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来,并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。

使用下面的命令全局安装CLI:

yarn global add @vue/cli
# 或
npm install -g @vue/cli

Vite

Vite 是尤雨溪新开发的一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。

使用 npm:

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+,需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

或者 yarn:

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev

版本说明

在 npm 包的 dist/ 目录中有很多不同的 Vue.js 构建版本:

  • runtime:只包含运行时
  • global:完整构建版本
  • prod:包含硬编码,预先压缩
  • esm-bundler:使用构建工具时
  • cjs:使用服务端渲染时

运行时 + 编译器 vs. 仅运行时

如果需要在客户端上编译模板 (即:将字符串传递给 template 选项,或者使用元素的 DOM 内 HTML 作为模板挂载到元素),需要编译器,也就是完整的构建版本:

// 需要编译器
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// 不需要
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

 前面没有了.... 起步 

评论总数: 1


点击登录后方可评论

user_image

Vue来了