Vue.js 是一个轻量级的 JavaScript 库,它可以帮助开发者构建快速、可维护的 Web 应用程序。本文将介绍如何在 Windows 系统上安装 Vue.js。
首先,你需要准备一个新的文件夹,用于存放 Vue.js 的相关文件。然后,打开命令行工具(如 Windows PowerShell 或者 CMD),并进入到你刚才准备的文件夹中。
接下来,使用 npm 命令安装 Vue.js。npm 是 Node.js 的包管理器,它可以帮助我们快速安装 Vue.js 依赖的库和框架。在命令行中输入如下命令即可安装 Vue.js:
npm install vue
当 npm 安装完成后,你就可以在你的文件夹中看到 node_modules 文件夹了。node_modules 文件夹中存放了所有依赖的库和框架,包括 Vue.js 也在其中。
最后,我们需要使用 npm 命令来启动 Vue.js 服务器。在命令行中输入如下命令即可启动服务器:
npm run serve
当服务器启动成功之后,你就可以在浏览器中访问 http://localhost:8080/ (端口号根据你的配置而不同)来测试 Vue.js 的运行情况了。
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
最新稳定版本:2.6.14
每个版本的更新日志见 GitHub。
在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。
重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。
注意:开发环境不要用最小压缩版,不然就失去了错误提示和警告!
推荐:unpkg, 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue/ 浏览 npm 包资源。
也可以从 jsdelivr 或 cdnjs 获取,不过这两个服务版本更新可能略滞后。
在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
有两种构建方式,独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。
模板编译用于编译 Vue 模板字符串成纯 JavaScript 渲染函数。如果你想用 template 选项,你需要编译。
模板编译器的职责是将模板字符串编译为纯 JavaScript 的渲染函数。如果你想要在组件中使用 template 选项,你就需要编译器。
默认 NPM 包导出的是运行时构建。为了使用独立构建,在 webpack 配置中添加下面的别名:
resolve: {
alias: {
"vue$": "vue/dist/vue.js"
}
}
对于Browserify,可以用 aliasify
不要用 import Vue from "vue/dist/vue.js" - 用一些工具或第三方库引入 Vue ,这可能会导致应用程序在同一时间加载运行时和独立构建并造成错误。
有些环境,如 Google Chrome Apps,强制应用内容安全策略 (CSP) ,不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。独立的构建取决于该功能编译模板,所以无法使用这些环境。
另一方面,运行时构建的是完全兼容 CSP 的。当通过 Webpack + vue-loader 或者 Browserify + vueify 构建时,在 CSP 环境中模板将被完美预编译到 render 函数中。
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
如果全局安装完 vue-cli 后,执行 vue 命令出错
解决方法:全局搜索 vue.cmd 将 vue.cmd 所在的路径添加到环境变量 Path 后面。再执行 vue -V 即可。
CLI 默认了用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读本教程,熟悉 Vue 本身之后再研究 CLI。
对于大陆用户,建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度。
重要:Github 仓库的 /dist 文件夹只有在新版本发布时才会更新。如果想要使用 Github 上 Vue 最新的源码,你需要自己构建。
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build
# 最新稳定版本
$ bower install vue
独立下载版本或通过 Bower 安装的版本已用 UMD 包装,因此它们可以直接用作 AMD 模块。
什么是组件?组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是...
Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底...
监听事件可以用v-on指令监听 DOM 事件来触发一些 JavaScript 代码。示例:div id="example-1"button v-on:click="counter += 1"...
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:div ...
v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy (真值)的时候被渲染。h1 v-if="awesome"Vue i...