Vue3教程:安装

Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。

将 Vue.js 添加到项目中主要有四种方式:

  1. 在页面上以 CDN 包的形式导入。
  2. 下载 JavaScript 文件并自行托管。
  3. 使用 npm 安装它。
  4. 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。

发布版本说明

最新版本:3.2.36

每个版本的详细发布说明都可以在 GitHub 上找到。

Vue Devtools

目前处于测试阶段 – Vuex 和 Router 的集成仍在进行中。

在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools ,它允许你在一个更友好的界面中审查和调试 Vue 应用。

获取 Chrome 扩展程序

获取 Firefox 附加组件

获取独立的 Electron 应用程序

CDN

对于制作原型或学习,你可以这样使用最新版本:

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - Web176教程(web176.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Web176教程!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

下载并自托管

如果你想避免使用构建工具,但又无法在生产环境使用 CDN,那么你可以下载相关 .js 文件并自行托管在你的服务器上。然后你可以通过 <script> 标签引入,与使用 CDN 的方法类似。

这些文件可以在 unpkg 或者 jsDelivr

这些 CDN 上浏览和下载。各种不同文件将在以后解释,但你通常需要同时下载开发环境构建版本以及生产环境构建版本。

npm

由于 npm 安装速度慢,可以使用淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。

使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

$ npm install -g cnpm --registry=https://registry.npmmirror.com

这样就可以使用 cnpm 命令来安装模块了:

$ cnpm install [name]

更多信息可以查阅:http://npm.taobao.org/。

注意:

npm 版本需要大于 3.0,如果低于此版本需要升级它:

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

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

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

$ npm install -D @vue/compiler-sfc

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

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

大多数情况下,我们更倾向于使用 Vue CLI 来创建一个配置最小化的 webpack 构建版本。

命令行工具 (CLI)

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

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,在熟悉 Vue 本身之后再使用 CLI。

对于 Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级,你应该需要全局重新安装最新版本的 @vue/cli

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

然后在 Vue 项目中运行:

vue upgrade --next

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

或者 pnpm:

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

对不同构建版本的解释

npm 包的 dist/ 目录 你将会找到很多不同的 Vue.js 构建版本。下面是一个概述,根据不同的使用情况,应该使用哪个 dist 文件:

使用 CDN 或没有构建工具

vue(.runtime).global(.prod).js

  • 若要通过浏览器中的 <script src="..."> 直接使用,则暴露 Vue 全局。
  • 浏览器内模板编译:
    • vue.global.js 是包含编译器和运行时的“完整”构建版本,因此它支持动态编译模板。
    • vue.runtime.global.js 只包含运行时,并且需要在构建步骤期间预编译模板。
  • 内联所有 Vue 核心内部包——即:它是一个单独的文件,不依赖于其他文件。这意味着你必须导入此文件和此文件中的所有内容,以确保获得相同的代码实例。
  • 包含硬编码的 prod/dev 分支,并且 prod 构建版本是预先压缩过的。将 *.prod.js 文件用于生产环境。

全局打包不是 UMD 构建的,它们被打包成 IIFEs ,并且仅用于通过 <script src="..."> 直接使用。

vue(.runtime).esm-browser(.prod).js

  • 用于通过原生 ES 模块导入使用 (在浏览器中通过 <script type="module"> 来使用)。
  • 与全局构建版本共享相同的运行时编译、依赖内联和硬编码的 prod/dev 行为。

使用构建工具

vue(.runtime).esm-bundler.js

  • 用于 webpackrollupparcel 等构建工具。
  • 留下 prod/dev 分支的 process.env.NODE_ENV 守卫语句 (必须由构建工具替换)。
  • 不提供压缩版本 (打包后与其余代码一起压缩)。
  • import 依赖 (例如:@vue/runtime-core@vue/runtime-compiler)
    • 导入的依赖项也是 esm bundler 构建版本,并将依次导入其依赖项 (例如:@vue/runtime-core imports @vue/reactivity)。
    • 这意味着你可以单独安装/导入这些依赖,而不会导致这些依赖项的不同实例,但你必须确保它们都为同一版本。
  • 浏览器内模板编译:
    • vue.runtime.esm-bundler.js (默认) 仅运行时,并要求所有模板都要预先编译。这是构建工具的默认入口 (通过 package.json 中的 module 字段),因为在使用构建工具时,模板通常是预先编译的 (例如:在 *.vue 文件中)。
    • vue.esm-bundler.js 包含运行时编译器。如果你使用了一个构建工具,但仍然想要运行时的模板编译 (例如,DOM 内 模板或通过内联 JavaScript 字符串的模板),请使用这个文件。你需要配置你的构建工具,将 vue 设置为这个文件。

对于服务端渲染

vue.cjs(.prod).js

  • 通过 require() 在 Node.js 服务器端渲染使用。
  • 如果你将应用程序与带有 target: 'node' 的 webpack 打包在一起,并正确地将 vue 外部化,则将加载此文件。
  • dev/prod 文件是预构建的,但是会根据 process.env.NODE_ENV 自动加载相应的文件。

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

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

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

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

当使用 vue-loader 时,*.vue 文件中的模板会在构建时预编译为 JavaScript,在最终的捆绑包中并不需要编译器,因此可以只使用运行时构建版本。

作者:terry,如若转载,请注明出处:https://www.web176.com/vue3/6290.html

(3)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年7月11日 下午2:52
下一篇 2022年8月9日 上午11:04

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注