Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带你了解其核心概念和一个示例工程。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<div id="counter">
Counter: {{ counter }}
</div>
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
安装
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
将 Vue.js 添加到项目中主要有四种方式:
- 在页面上以 CDN 包的形式导入。
- 下载 JavaScript 文件并自行托管。
- 使用 npm 安装它。
- 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。
下载并自托管
如果你想避免使用构建工具,但又无法在生产环境使用 CDN,那么你可以下载相关 .js 文件并自行托管在你的服务器上。然后你可以通过 <script> 标签引入,与使用 CDN 的方法类似。
这些文件可以在 unpkg 或者 jsDelivr 这些 CDN 上浏览和下载。各种不同文件将在以后解释,但你通常需要同时下载开发环境构建版本以及生产环境构建版本。
#npm
在用 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 构建版本。