这一部分主要讲的是vue的模块化开发

模块

node模块的规范commonjs
js模块cmd(seajs) ，amd(require)
umd 为了上面两种做兼容处理
esmodule
- 如何定义模块（一个js就是一个模块）
- 如何导出模块（export）
- 如何使用模块（import）

如何分模块开发

假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？

第一种：require.js
第二种：CommonJS
第三种：ES6

依次来看怎么使用？
一、require.js

//content.js
define('content.js', function(){
    return 'A cat';
})

//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})

二、CommonJS

//content.js
module.exports = 'A cat'

//index.js
var animal = require('./content.js')

三、ES6

//content.js
export default 'A cat'

//index.js
import animal from './content'

如何使用webpack

下载webpack

npm init -y
//全局安装
npm install webpack -g
//安装到你的项目目录
npm install webpack --save-dev
//运行
npm run build

注：

安装webpack或者less最好不要安装全局的，否则可能导致webpack的版本差异
webpack必须采用commonjs写法
在package.js中配置一个脚本，这个脚本用的命令是webpack，会去当前的node_modules下找bin对应的webpack名字让其执行，执行的就是bin/webpack.js，webpack.js需要当前目录下有个名字叫webpack.config.js的文件，我们通过npm run build执行的目录是当前文件的目录，所以会去当前目录下查找。

babel转化es6->es5

安装babel

npm install babel-core --save-dev
npm install babel-loader --save-dev

让babel拥有es6语法的功能

npm install babel-preset-es2015 --save-dev

解析更高级语法

npm install babel-preset-stage-0 --save-dev

解析样式

css-loader将css解析成模板，将解析的内容插入到style标签内（style-loader）

npm install css-loader style-loader --save-dev

less,sass,stylus(预处理语言)

less-loader less css-loader style-loader
sass-loader less css-loader style-loader
stylus-loader less css-loader style-loader

解析图片

-file-loader
-url-loader(依赖于file-loader)

需要解析html插件

插件的作用是以我们自己的html为模板，将打包后的结果自动引入到html中产出的dist目录下

npm install html-webpack-plugin --save-dev

打包html

扫描二维码关注公众号，回复： 5586751 查看本文章

webpack-dev-server

这里内置了服务，可以帮我们启动一个端口号，当代码更细时，可以自动打包（在内存中打包），代码的变化就重新执行。这样做防止一更新代码，就得执行npm run build，只需要执行一次npm run dev即可。

npm install webpack-dev-server --save-dev

运行

npm run dev

webpack服务

安装vue-loader vue-template-compiler

vue-loader 是用来解析.vue文件的，vue会自动的调用vue-template-compiler
vue-template-compiler用来解析vue模板的

静态页引用的js文件

//引入Vue后在node_modules文件夹下中的vue文件夹中的package.json文件中的main对应的文件dist/vue.runtime.common.js，即为要引入的文件。node_modules->vue->package.json->main
//这样直接引用vue，引用的并不是vue.js，引用的时vue的runtime
//vue=compiler+runtime(compiler可以编译模板)
//为什么不引用compiler呢？因为compiler有6k,当不引用模板时就不需要引用compiler
import Vue from 'vue';
import App from './App.vue'
new Vue({
    //当不引用compiler时，可以使用render
    //render函数的作用是将虚拟dom渲染成真实的dom
    //createElement返回的是虚拟的dom
    // render:(createElement)=>{
    //     return createElement('h1',[
    //         'hello',createElement('span','一则头条')
    //     ])
    // }

    //当引入compiler后，可以这样写
    render:(h)=>h(App)
}).$mount('#app');

准备工作

安装必要的文件
下载一个全局生成vue项目的脚手架

npm install vue-cli -g
vue init webpack 项目名字
cd 项目名
npm install 
npm run dev

VUE快速入门与实践（下）

模块