学成在线day02,webpack打包配置，nodejs,cnpm,CMS前端工程创建，单页面应用，前后端请求响应流程图
webpack有什么好处呢？
1、模块化开发（多个js,css文件打包成一个文件）
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文
件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
2、 编译typescript、ES6等高级js语法（把语法转换成主流浏览器识别的语法）
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，
webpack可以将打包文件转换成浏览器可识别的js语法。
3、CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。
webpack的缺点：
1、配置有些繁琐
2、文档不丰富
1.3.2 安装webpack
1.3.2.1 安装Node.js
webpack基于node.js运行，首先需要安装node.js。（理解node.js，属于JDK这种。）
nodejs下载地址:https://nodejs.org/en/download/
推荐下载LTS版本，本教程安装9.4.0。
2 、选安装目录进行安装
默认即可
安装完成检查PATH环境变量是否设置了node.js的路径。
3、测试
在命令提示符下输入命令
node ‐v
1.3.2.2 安装NPM，nodejs，自带npm
npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM
的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。
node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本
2、设置包路径
包路径就是npm从远程下载的js包所存放的路径。
使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）
NPM 默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，我
们将管理包的路径设置在单独的地方，本教程将安装目录设置在node.js的目录下，创建npm_modules和
npm_cache，执行下边的命令：
1）配置环境变量
NODE_HOME = D:\Program Files\nodejs (node.js安装目录)
在PATH变量中添加：%NODE_HOME%;%NODE_HOME%\npm_modules;
本教程安装node.js在C:\Program Files\nodejs 目录下所以执行命令如下：
npm config set prefix "C:\Program Files\nodejs\npm_modules"
npm config set cache "c:\Program Files\nodejs\npm_cache"
此时再使用 npm config ls 查询NPM管理包路径发现路径已更改
3、安装cnpm
npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像
下边我们来安装cnpm：
有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令，进行全局安装淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后，我们可以使用以下命令来查看cnpm的版本
cnpm -v
安装镜像切换器：
cnpm install -g nrm
nrm ls 查看镜像指向哪里，目标是taobao，如果没有指向淘宝，就使nrm use taobao切换 镜像
1.3.2.3 安装webpack
1、连网安装
webpack安装分为本地安装和全局安装：
本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。
全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数。
进入webpacktest测试目录目录，运行：
1）本地安装：
只在我的项目中使用 webpack，需要进行本地安装，因为项目和项目所用的webpack的版本不一样。本地安装就会将webpack的js包下载到项目下的npm_modeuls目录下。
在门户目录下创建webpack测试目录webpacktest01：
npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)
2）全局安装加-g，如下：
全局安装就将webpack的js包下载到npm的包路径下。
npm install webpack -g 或 cnpm install webpack -g
3）安装webpack指定的版本：
本教程使用webpack3.6.0，安装webpack3.6.0：
进入webpacktest测试目录，运行：
cnpm install --save-dev webpack@3.6.0
全局安装：
npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g
测试：
在cmd状态输入webpack，出现如下提示说明 webpack安装成功
1.3.4 webpack-dev-server
webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。
1.3.4.1安装配置
1、安装webpack-dev-server
创建一个新的程序目录，这里我们创建webpacktest02目录，将webpack入门程序的代码拷贝进来，并在目录下创
建src目录、dist目录。
将main.js和model01.js拷贝到src目录。
使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
————————————————————
淘宝镜像安装的三个包的命令：
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。
2、配置webpack-dev-server
在package.json中配置script
"scripts": {
"dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
},
--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
此时package.json的文件内容如下：
{
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
devDependencies：开发人员在开发过程中所需要的依赖。
scripts：可执行的命令
2 、配置 html-webpack-plugin
在webpack.config.js中配置html-webpack-plugin插件
//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
devtool: 'eval-source-map',
plugins:[
new htmlwp({
title: '首页', //生成的页面标题首页
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
1.3.4.3 启动
启动文件：
1、进入 webpacktest02目录，执行npm run dev
2、使用webstorm，右键package.json文件，选择“Show npm Scripts”
打开窗口：
双击 dev。
注意：dev就是在package.json中配置的webpack dev server命令。
发现启动成功自动打开浏览器。
修改src中的任意文件内容，自动加载并刷新浏览器。
1.3.4.4 debug调试
使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。
配置如下：
1、在webpack.config.js中配置：
devtool: 'eval‐source‐map',
webpack.config.js部分内容如下：
var htmlwp = require('html‐webpack‐plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
devtool: 'eval‐source‐map',
2、在js中跟踪代码的位置上添加debugger
一个例子：
在add方法中添加debugger
// 定义add函数
function add(x, y) {
debugger
return x + y
}
启动应用，刷新页面跟踪代码：
点击“计算” 即进入debugger代码位置，此时可以使用chrome进行调试了。
2 CMS 前端工程创建
2.2.1 工程结构
如果我要基于Vue-Cli创建的工程进行开发还需要在它基础上作一些封装，导入课程资料中提供Vue-Cli封装工程。
将课程资料中的xc-ui-pc-sysmanage.7z拷贝到UI工程目录中，并解压，用WebStorm打开xc-ui-pc-sysmanage目
录。
2.2.2 package.json
package.json记录了工程所有依赖，及脚本命令
2.2.3 webpack.base.conf.js
webpack.base.conf.js就是webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader。
webpack 是通过vue-load解析.vue文件，通过css-load打包css文件等。
2.2.4 main.js
main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。
index.html是模板文件
2.2.5 src目录
src目录下存放页面及js代码。
assets：存放一些静态文件，如图片。
base：存放基础组件
base/api：基础api接口
base/component：基础组件，被各各模块都使用的组件
base/router：总的路由配置，加载各模块的路由配置文件。
common：工具类
component：组件目录，本项目不用。
mock：存放前端单元测试方法。
module：存放各业务模块的页面和api方法。
下级目录以模块名命名，下边以cms举例：
cms/api：cms模块的api接口
cms/component：cms模块的组件
cms/page： cms模块的页面
北京市昌平区建材城西路金燕龙办公楼一层 电话：400-618-9090
cms/router ：cms模块的路由配置
statics：存放第三方组件的静态资源
vuex：存放vuex文件，本项目不使用
static：与src的平级目录，此目录存放静态资源
它与assets的区别在于，static目录中的文件不被webpack打包处理，会原样拷贝到dist目录下。
2.2 单页面应用介绍
单页面应用的优缺点：
优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。
缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则
用户体验不好。
2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎
排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。
总结：
做的是后台，不需要SEO，管理人员用着舒服就行。很合适就对了
3.1.1.1 页面结构
在model目录创建 cms模块的目录结构
在page目录新建page_list.vue，扩展名为.vue。
<template>
//模板中一定要加一个div,不然要报没有根节点的错误
<!‐‐编写页面静态部分，即view部分‐‐>
测试页面显示...
</template>
<script>
/*编写页面静态部分，即model及vm部分。*/
</script>
<style>
/*编写页面样式，不是必须*/
</style
3.1.1.2 页面路由
在cms目录下创建page_list.vue页面。
现在先配置路由，实现url访问到页面再进行内容完善与调试。
1、在cms的router下配置路由
import Home from '@/module/home/page/home.vue';
//导入模板页面取名为page_list
import page_list from '@/module/cms/page/page_list.vue';
export default [{
//通过路径访问这个页面块
path: '/cms',
component: Home,
//页面块的名称
name: 'CMS内容管理',
//显示这个页面块
hidden: false,
//页面块下面的子页面块
children:[
{path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false}
]
}
2 、在base目录下的router导入cms模块的路由
//@符号，表示src目录下
// 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)
concat(CmsRouter)
3、测试
启动工程，刷新页面，页面可以外正常浏览，并且看到“测试页面显示…”字样
3.1.2 Table组件测试
本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库。
Element-UI官方站点：http://element.eleme.io/#/zh-CN/component/installation
根据饿了么UI，组件添加html模板。备用
3.2.1 Api方法中定义ajax工具类：
在cms模块的api目录定义cms.js，
在cms.js中定义如下js方法，此方法实现http请求服务端页面查询接口。
axios实现了http方法的封装，vue.js官方不再继续维护vue-resource,推荐使用 axios。
3.2.2 Api调用
前端页面导入cms.js，调用js方法请求服务端页面查询接口。
1）再模板html页面中，导入cms.js
import * as cmsApi from '../api/cms'
在query方法中调用 page_list方法
3.3 跨域问题解决
测试 上边的代理 ，结果 报错如下 ：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin
‘http://localhost:11000’ is therefore not allowed access.
原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。
解决：采用proxyTable解决。
vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy-middleware（https://github.com/chimurai/http-proxy-middleware），它是 http代理中间件，它依赖node.js，基本原理是用服务端代理解决浏览器跨域：（总结原因就是，浏览器到服务，不能跨域，也就是地址不能变，服务器到服务器，就没有跨域方面的问题。所以解决方法，就是找个中间服务，浏览器先地址不变的访问中间件，再由中间件服务器，变更地址访问服务端）
具体的配置如下：
1）修改api方法中url的定义
请求前加/api前缀
//public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;//这个变量，就是地址上多一个Api
export const page_list = (page,size,params) => {
return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size)
}
2）在config/index.js下配置proxyTable。
以/api/cms开头的请求，代理请求http://localhost:31001
'/api/cms': {
target: 'http://localhost:31001',
pathRewrite: {
'^/api': ''//实际请求去掉/api
}
3.4 分页查询测试
1、定义分页视图
使用v-on监听更改分页事件
<el-pagination
layout="prev, pager, next"
:total="total"
:page-size="params.size"
:current-page="params.page"
v-on:current-change="changePage"
style="float:right">
</el-pagination>
3.5 进入页面立即查询，运用的是Vue的生命周期方法
通常使用最多的是created和mounted两个钩子：
created：vue实例已创建但是DOM元素还没有渲染生成。
mounted：DOM元素渲染生成完成后调用。
mounted(){
//当DOM元素渲染完成后调用query
this.query()
},
4 前后端请求响应流程小结图
1、在浏览器输入前端url
2、前端框架vue.js根据url解析路由，根据路由找到page_list.vue页面
3、首先执行page_list.vue中的钩子方法
4、在钩子方法中调用query方法。
5、在query方法中调用cms.js中的page_list方法
6、cms.js中的page_list方法通过axios请求服务端接口
7、采用proxyTable解决跨域问题，node.js将请求转发到服务端(http://localhost:31001/cms/page/list)
8、服务端处理，将查询结果响应给前端
9、成功响应调用then方法，在then方法中处理响应结果，将查询结果赋值给数据模型中的total和list变量。
10、vue.js通过双向数据绑定将list数据渲染输出。