发布时间:2023-11-29 11:30
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
将 Vue.js 添加到项目中主要有四种方式:
每个版本的详细发布说明都可以在 GitHub 上找到。
目前处于测试阶段 - Vuex 和 Router 的集成仍在进行中。
通过 Vue School 的免费课程学习如何安装和使用 Vue Devtools
在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools,它允许你在一个更友好的界面中审查和调试 Vue 应用。
获取 Chrome 扩展程序
获取 Firefox 附加组件
获取独立的 Electron 应用程序
对于制作原型或学习,你可以这样使用最新版本:
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。
如果你想避免使用构建工具,但又无法在生产环境使用 CDN,那么你可以下载相关 .js
文件并自行托管在你的服务器上。然后你可以通过 标签引入,与使用 CDN 的方法类似。
这些文件可以在 unpkg 或者 jsDelivr 这些 CDN 上浏览和下载。各种不同文件将在以后解释,但你通常需要同时下载开发环境构建版本以及生产环境构建版本。
在用 Vue 构建大型应用时推荐使用 npm 安装[1] 。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 构建版本。
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
TIP
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 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。
通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。
使用 npm:
# npm 6.x
$ npm init vite@latest --template vue
# npm 7+,需要加上额外的双短横线
$ npm init vite@latest -- --template vue
$ cd
$ npm install
$ npm run dev
或者 yarn:
$ yarn create vite --template vue
$ cd
$ yarn
$ yarn dev
或者 pnpm:
$ pnpm create vite -- --template vue
$ cd
$ pnpm install
$ pnpm dev
在 npm 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。下面是一个概述,根据不同的使用情况,应该使用哪个 dist
文件:
#vue(.runtime).global(.prod).js
:
直接使用,则暴露 Vue 全局。vue.global.js
是包含编译器和运行时的“完整”构建版本,因此它支持动态编译模板。vue.runtime.global.js
只包含运行时,并且需要在构建步骤期间预编译模板。