脚手架
稍微像样一点的 vue.js 的开发过程,几乎总是需要使用脚手架的。使用它可以解锁新的可能:
- Single-file components(单文件组件)。因为它可以把 HTML,CSS,JavaScript 放到一起,以一个组件形式出现。
- 可以使用你喜爱的脚本。ES6、Coffee 等,都可以通过脚手架提供的代码把它们翻译成浏览器可以识别的格式。
单文件组件
一个 .vue
文件包含三个部分:<template>
标签包围内的是模板代码; <script>
内包围的是 js 代码,并且可以使用 ES6 的语法。 <style>
内的则是 css 代码。
然而,浏览器是无法识别这个看起来简单但是却不真实的组件的。因此 Vue.js 需要做 打包,一个 预处理工作,把这样组件转换成为浏览器可以识别的格式。其中包括:
- 创建一个
vue-loader
的工具,先抽取 vue 文件的各个部分,把它打包成 js。 - 工具
babel
把 ES6 语法的 js 转换为浏览器支持的 ES5 代码。 - 打包工具
webpack
组合两者的工作。
于是 webpack 首先调用 vue-loader,vue-loader 会调用 babel 转换 ES6 代码为 ES5 代码,并且把 css 和 html 作为模块也转换为客户端 js 代码。这些 js 代码浏览器就可以识别了。
vue-cli 脚手架工具
把 webpack、babel 搭配起来需要很多配置,极为繁琐。vue.js 提供了一个工具,叫做 vue-cli
,它可用于快速搭建应用起步代码。
包括:
- 可用的脚手架代码。
- 热重载。组件代码更新后自动重新加载。
- 静态代码检查。
- ES6语言特性。
🧙♀️ 使用:
-
安装
vue-cli
:npm install -g vue-cli
-
使用 vue-cli 创建新项目:
vue init webpack my-project
参数 webpack,指明创建一个基于 “webpack” 模板的 vuejs 项目。此模板会创建一个 webpack 的脚手架代码。
webpack 是一个打包工具,可以把 js、css、image 打包成一个或者多个 js 文件,并且可以支持各种 loader 作为插件,对不同类型的文件做转换处理。实际上 webpack 就是通过插件 vue-loader,在加载 vue 类型的文件时做格式转换,把 vue 类型文件翻译为浏览器可以识别的 js 文件。
当前可以使用的模板有:webpack
—— 通过 webpack 和 vue-loader 插件,可以调用 babel 把 .vue 文件编译为客户端可以识别的 js 文件。默认还可以提供热加载、代码检查、测试。webpack-simple
——最简单的 webpack 和 vue-loader 插件。browserify
—— 通过 Browserify + vueify 的组合,可以调用 babel 把 .vue 文件编译为客户端可以识别的 js 文件。默认还可以提供热加载、代码检查、测试。browserify-simple
—— 最简单的 Browserify + vueify 插件。
-
安装依赖:
cd my-project npm install npm run dev # vue-cli的版本不同运行命令不同 (此命令为 vue-cli 2)
此时服务器已经启动并监听到 8080 端口,使用浏览器访问 http://localhost:8080
,可以看到 vue-cli 默认的界面。
应用单文件组件
在 components
文件夹下添加 .vue
文件,应用单文件组件。
热加载测试
如果代码被改动了,并不需要刷新浏览器,它会自动更新最新的代码过来。
回归日常
我们所有的编辑修改一旦完成,最终需要把所有的 vue、ES6 代码等编译出来到 ES5 的 js 文件。现在可以构建这些 webpack 代码:
npm run build
此命令会把我们已经有的开发成果,编译到 dist
目录下,就是说编译成前端可以直接使用的 html、js、css。
有了它们,我就可以使用一个 http 静态服务器,在 dist 目录内执行:
cd dist
npm install http-server -g
http-server
然后,到 http://localhost:8080
查看效果。和运行 npm run dev
看到的一模一样。
🔗: