参考
[1] Vue.js build set-up from scratch with webpack, vue-loader and hot reload
[2] Vue笔记二:进阶[译]用Webpack构建Vue(上一篇的翻译)
准备
- 安装 npm, vue, webpack, node.js,安装方法见 Ubuntu, Mac 下 Web 开发环境搭建:node.js, golang 与 revel 配置安装
杂记
babel 用于将 ES6(JavaScript 的下一代标准)代码转换为现代标准(ES5)的 JavaScript 代码的工具;
webpack 用于将必要的 JavaScript 代码打包为一个 .js 文件;
npm 用于下载依赖包,package.json 文件中指定了需要的依赖包(见 Using a package.json);
以上代码仅仅运行在前端,并没有服务端的数据或服务提供。运行顺序:打开 html → 查找 dist/build.js 文件。编译时 build.js 文件是将 main.js 文件转换并和许多依赖文件由 webpack 打包生成,打包规则和入口 javascript 代码(这里是 main.js)由 webpack.config.js 指定,依赖文件由 npm 根据 package.json 文件里的内容 fetch 得到。
babel 可看成是将下一代的 .js 代码(ES6)转成当代的 .js 代码(ES5)的工具,而 vue-loader 可看成是将 vue 组件转成 .js 代码的工具。二者都在 webpack.config.js 里的 “loaders” 部分指定好,用于代码转换,并最终打包成一个 .js 文件;
webpack 打包必须要有 webpack.config.js 文件,而 npm 安装依赖则必须要有 package.json 文件,文件名和后缀不能变;
npm (node package manager) 是 node.js 相关包的管理器,为了使用 babel,node.js 是必须的;
需要一个 main.js 作为入口函数,在 webpack.config.js 的 entry 中指定;
在 .vue 文件中设计一个模块(component),在 main.js 中导入这个模块,并通过 Vue 的声明式绑定来使用这个模块;
问题
- 网页为什么需要入口函数 main.js 呢?
- module.exports 中的 data,为什么是 function() 中 return 而不是直接指定呢?(经试验,确实是不可以的,直接写 a:”b” 的映射时,页面不显示组件)