Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
将 Vue.js 添加到项目中有三种主要方式。
最新版本:
每个版本的详细发行说明可在 GitHub 上找到。
当前是 Beta 版——Vuex 和 Router 的集成仍然是 WIP
在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools,它允许你在一个更友好的界面中审查和调试 Vue 应用。
对于制作原型或学习,你可以这样使用最新版本
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
在用 Vue 构建大型应用时推荐使用 npm 安装 。NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版 $ npm install vue@next
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
TIP
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,在熟悉 Vue 本身之后再使用 CLI。
对于 Vue 3,你应该使用npm上可用的 Vue CLI v4.5 作为@vue/cli@next。要升级,你应该需要全局重新安装最新版本的@vue/cli:
yarn global add @vue/cli@next # OR npm install -g @vue/cli@next
然后在 Vue 项目运行:
vue upgrade --next
Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码。
通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。
使用 npm:
$ npm init vite-app$ cd$ npm install $ npm run dev
或者 yarn:
$ yarn create vite-app$ cd$ yarn $ yarn dev
在 npm 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别:
提示
全局打包不是 UMD 构建的,它们被打包成 IIFEs,并且仅用于通过直接使用。
@vue/runtime-core,@vue/runtime-compiler)
vue.cjs(.prod).js
:
如果需要在客户端上编译模板 (即:将字符串传递给 template 选项,或使用其在 DOM 中 HTML 作为模板挂载到元素),你需要编译器,因此需要完整的版本:
// 需要编译器 Vue.createApp({ template: '{{ hi }}' }) // 不需要 Vue.createApp({ render() { return Vue.h('div', {}, this.hi) } })
当使用vue-loader时,*.vue文件中的模板在生成时预编译为 JavaScript,在最终的打包器中并不需要编译器,因此可以只使用运行时构建。