Vue模块化

一、模块化的原因

前端代码量的增加使得代码通常被放在多个js文件中进行维护，但存在全局变量同名等问题，同时对js文件的引用顺序有要求

解法一：使用匿名函数把变量限制在函数内部

缺点：未解决代码复用性问题

解法二：使用模块作为出口

在函数内部定义一个包含所有要暴露的方法和属性的对象，并将这个对象返回并用一个变量接收，在main.js中直接使用模块属性和方法即可。

常见的模块：CommonJS，ES6中的modules

模块化的核心：输入与导出

二、ES6的模块化

使用<script type= "module">

导入：export {变量名}，也可以在导出时声明变量

当某个模块包含某个功能且导入者想自己给功能命名时，可以使用export default进行默认导出，只需使用import + 命名 + from '模块位置'即可导入。一个模块仅能有一个默认导出

导出：import {变量名} from "模块位置"

全部导入 import * as {别名} from "模块位置"，再调用通过对象属性和方法的形式使用

三、Webpack

安装webpack

安装webpack首先要安装Node.js，Node.js里面自带了软件包管理工具npm

查看Node版本方式: 在终端输入node -v命令

全局安装webpack：npm install webpack@3.6.0-g

局部安装webpack：cd 对应目录 npm install webpack@3.6.0 --save-dev （开发时依赖，项目打包不需要继续使用） 或者在package.json中的script中加入webpack（优先在本地查找）

如果在终端中使用webpack，使用的都是全局的webpack

使用webpack前的准备工作

创建两个文件夹 dist文件夹中放最终要发布的打包后的文件 src文件夹中放要被打包的源文件

创建index.html文件为浏览器打开的首页html文件

通过在终端输入npm init命令生成的npm包管理的文件package.json （使用node的项目一般都会有一个package.json文件，包含项目的信息）

使用webpack的方法

在终端使用cd命令找到文件夹，在文件夹内使用 webpack ./src/main.js ./dist/bundle命令即可创建bundle.js文件，这个文件处理了main.js文件中的文件依赖并打包文件，可以直接在index.html中引用./bundle.js文件即可

使用cd ..可以到达上一层文件

webpack会自动将main.js文件中引用的所有文件一起打包，不管是使用CommonJS语法还是ES6语法的都可以打包

出口和入口配置

创建一个webpack.config.js文件可以通过配置webpack来自动完成打包

局部安装webpack配置

目前使用的webpack都是全局的webpack，但在开发项目时往往依赖不同版本的webpack，可能会导致打包时出现问题，所以项目中通常会有自己的webpack

即开发时依赖和运行时依赖

局部安装webpack：cd 对应目录 npm install webpack@3.6.0 --save-dev （开发时依赖，项目打包不需要继续使用）

启动webpack打包方法：

方法一、通过node_modules/.bin/webpack 启动局部webpack进行打包

方法二、在package.json中的script中加入webpack，该命令会优先在本地查找，没有找到会去全局的环境变量查找，通过 npm run build指令进行调用

如果在终端中使用webpack，使用的都是全局的webpack

loader

webpack能够会自动处理js代码之间的相互依赖，但不能够将ES6、TS转化为ES5、将less、scss转化为css，所以需要给webpack扩展相应的loader

loader的使用要先使用npm install xxx-loader进行安装，然后在webpack.config.js文件的modules下进行配置，在package.json文件中可以看到配置loader的版本

1.css文件处理

在css文件夹下创建css文件，要在main.js中对css文件进行引用require('./css/normal.css')

需要同时安装style-loader和css-loader 并在webpack.config.js文件中的module中进行配置

无法安装时可以将--legacy-peer-deps标志传递给npm(e.g.，npm i --legacy-peer-deps），或者使用npm@6。

2.图片处理 url-loader file-loader

图片的编译模式收到limit属性的限制，当加载的图片小于limit时，会将图片编译成base64字符串格式，当加载的图片大于limit时，需要使用file-loader模块进行加载

使用file-loader不需要进行配置

webpack使用file-loader进行打包时会在dist文件夹下生成一个非常长的名字，是32位的hash值，能有效防止名字重复

但在实际开发中不仅要知道图片的名字，还要将图片打包成一个文件夹，所以要在webpack.config.js文件下配置url-loader的option处加上属性name:'img/[name].[hash:8].[ext]'

name是原来的名字；hash值是为了防止重复，为了方便只取八位；ext是extension的缩写，扩展名

3.ES6语法处理

使用webpack打包仍然会使用ES6语法，对不支持ES6语法的浏览器不适用 可以使用babel进行转换

安装：npm install --save-dev bable-loader@7 bable-core bable-preset-es2015

es2015即ES5

使用Vue的配置

安装Vue：npm i vue -s

不仅是开发时用到Vue，运行时也要用到，所以不用--save-dev

Vue发布时构建了两类发布版本，分别是runtime-only和runtime-compiler

runtime-only的代码中不能有任何template；runtime-compiler的代码中可以有template，因为有compiler对模板进行编译

引用runtime-compiler的版本需要以import Vue from 'vue/dist/vue.esm.js'的方式引入

引用runtime-only的版本以import Vue from 'vue'的方式引入即可

vue文件的封装处理

使用webpack对.vue文件进行打包时要安装vue-loader和vue-template-compiler两个loader，其中vue-template-compiler的版本要和Vue的版本相同，同时还要修改webpack.config.js文件中的配置

创建Vue时el和template之间的关系

为了在使用组件时不频繁修改index.html中的内容，可以将组件进行打包

在Vue实例中添加template属性，会将template中的内容添加到el所在的位置，在index.html中保留一个基本的div元素即可

使用vetur插件，输入<>即可快速生成 .vue插件模板

输出中的内容和Vue实例相似，但不需要地址和模板，模板在上方的<template>标签处编写，下方style标签可以定义样式

在一个.vue文件中可以import另一个.vue文件作为子组件

plugin插件

一、横幅插件 webpack中自带的插件

const webpack = require('webpack')

//在module.exports对象中加入plugins，冒号后面是数组

plugins: [new webpack.BannerPlugin('wsnd')]

二、打包html文件的插件

在项目真实发布时，index.html文件是放在dist文件夹下的，所以需要插件将index.html打包到dist文件夹中

三、压缩（丑化）js文件的插件

安装 npm i uglifyjs-webpack-plugin --save-dev --legacy-peer-deps版本号和CLI2保持一致

修改配置：plugins: [new uglifyjsWebpackPlugin()]

搭建本地服务器

使用webpack建立一个本地服务器，基于node.js搭建，内部使用express框架，可以实时让浏览器自动刷新显示的结果

安装：npm i --save-dev webpack-dev-server

在配置文件中要加上devServer选项，包含属性：

contentBase：为哪一个文件提供本地服务

port：端口号

inline：页面是否实时刷新

historyApiFallback：在SPA页面中依赖HTML5的history模式

由于是本地服务器，要在package.json文件中加入脚本"dev"="webpack-dev-server"

配置文件的抽离

目的：开发时依赖一个配置文件，发布时依赖另一个

分离

将webpack.config.js文件分成三个文件：公共文件base.config.js、开发时文件dev.config.js、生产时文件prod.config.js

合并

安装：npm i webpack-merge

const webpackMerge = require('webpack-merge')
const base = require('./base.config.js')
module.exports.webpackMerge={base,{dev.config.js里的内容}}

指定配置文件

package.js 文件中脚本修改引用配置文件

    "build": "webpack --config ./build/dev.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"

修改输出路径

path: path.resolve(__dirname, './dist')

不加./的话会在build文件夹下创建一个dist文件夹