第3章Webpack+Vue.js开发准备.PDFVIP

第 3 章 ◄ Webpack+Vue.js开发准备 ► 所有的 Vue.js 项目都是在 Webpack 的框架下进 行开发的。可以 说 vue-cli 直接把 Webpack 做 了集成 。在开发时，一边享受着飞一般 的开发速度，一边体验着 Webpack 带来的 便利 。 本章将介绍如何使用 Webpack+Vue.js 进行开发的基本知识 。 3.1 学习过程 在学习任何一种框架的时候，都是按照循序渐进的顺序来的。 （1）安装 。 （2 ）新建一个页面。 （3 ）做一些简单变量的渲染 。 （4 ）实现页面的跳转 （路 由）。 （5 ）实现页面间的参数传递 （路 由）。 （6 ）实现真实的 http 请求（访 问接口）。 （7 ）提交表单。 （8 ）使用一些技巧让代码层次化 （组件）。 按照笔者之前在惠普、联通、移动等公司的讲课经验，只需要一天的时间就可以把本章 内容学会，并且上手开发 Vue.js 项目。 3.1.1 可以跳过的章节 对于有一定 Node 基础 的读者，可以跳过“NVM 的安装 ”。对于使用 Linux/Mac 的读 者，可以跳过“Git Bash 的安装 ”。 3.1.2 简写说明 由于本章是 Webpack + Vue.js 下的实 战开发，所以统一使用 Vue.js 来代 替冗长 的 Webpack + Vue.js 。 第 3 章 Webpack+Vue.js 开发准备 例如，在 Vue.js 中创建页面需要以下两步 。 （1）新建路 由。 （2 ）新建 vue 页面。 3.1.3 本书例子文件下载 本章 中的所有例子，由于都需要与 Webpack 相结合，因此笔者将其单独做成一个项目： /sg552/vue_js_lesson_demo ，读者可以下载后直接运行。 $ git clone /sg552/vue_js_lesson_demo.git $ npm install -v $ npm run dev 可 以在 http://localhost:8080/#/ 中看到效果，如图 3-1 所示。 图3-1 页面效果 3.2 NVM、NPM 与 Node NVM （Node Version Manager ）是非常好用的 Node 版本管理器。这个技术出现的原因， 是由于不同的项目 node 版本也不同，有的是 5.0.1，有的是 6.3.2 。如果 node 版本不对，运行 某个应用时，很可能就会遇到各种莫名其妙的问题。 Node NVM 因此，我们需要在同一台机器上同时安装多个版本的 。 应用而生，很好地帮 我们解决了这个问题。 Linux/Mac 下的 NVM 官方网址：/creationix/nvm 。 Windows 下的 NVM 官方网址：/coreybutler/nvm-windows 。 NPM （Node Package Manager ）只要安装 了 node ，就会捆绑安装该命令 。它 的作用与 27 Vue.js 快速入门 Ruby 中的 bundler 及 Java 中的 maven 相 同，都是对第三方依赖进行管理的。 3.2.1 Windows 下的安装 使用浏览器打开 /coreybutler/nvm-windows/releases ，如图 3-2 所示。