Vue.Js实战
需求来源
前端框架引入地图
初识
Vue是一个前端框架，类似于JSP，聚焦于HTML模板复用，单个vue文本组件，内部作用域包含html-css-js，其虚拟DOM操作可以优化频繁的DOM操作。
Jquery则主要是原生JsAPI的封装，以DOM选择器为核心，以简单插件方式使用，在应用简单时易用，但复杂后要借用其他框架。
其他框架如React，则是以JS为核心，用逻辑来复用HTML和CSS，有额外的jsx语法糖（xml写js）。
以前端最多的工作【换肤】来举例，Jquery进行频繁的dom操作，而React则是多套js，Vue多个页面，其复用的设计侧重点不同。
Vue官网教程：https://cn.vuejs.org/v2/guide
战前准备
Node.js
Node.js是运行在服务器端的javaScript，基于google的V8 js引擎，js也可以写服务器逻辑，只要服务器端有js编译解释器即可，java语言里也有js引擎包的。
学习VueJs为什么还要学NodeJs?
NodeJs带来的不仅仅是js的领域拓展，还有一个包生态系统，即npm，这类似于maven的jar包管理。
安装好NodeJs，cmd输入path查看node是否存在，
输入node –-version查看是否有版本号，有则安装成功。
Node下载地址：https://nodejs.org/en/download
选择windows installer
我的安装目录为D:\software\node
npm
npm是随NodeJs一起安装的包管理工具（Node Package Manager），能解决js代码部署的问题，这个在webpack使用时需要。
- npm的安装
cmd输入npm –v查看版本号，有则安装成功。 下载依赖
npm install [-g]
-g加上为下载到全局路径（能被所有项目引用），不加则下载到cmd当前路径
如npm install webpack -g，就会远程下载webpack包，
该包的地址使用npm config get prefix获取，一般为C:\Users\31261\AppData\Roaming\npm，我改成了D:\software\node\node_global，webpack在D:\software\node\node_global\node_modules下
由于是虚拟环境，重启后就得重装node，不过包可以保留，重装后设下prefix即可。cnpm
由于国内访问npm官网较慢，可使用淘宝镜像cnpm
注册cnpm命令，使用npm install –g cnpm –registry=https://registry.npm.taobao.org注册，然后环境变量path增加D:\software\node\node_global，重启cmd即可使用
npm参考地址：https://www.runoob.com/nodejs/nodejs-npm.html
公司镜像地址: http://10.35.93.100/2018/01/18/private-npm/#more
webpack
webpack是个模块打包工具，使用NodeJs编写的，它根据给定主文件（index.js）分析项目结构，找出所有依赖的js模块，和拓展类语言（Scss,TypeScript等），打包成一个或多个浏览器能识别（js，css，html）的格式的文件。
- 打包命令
webpack main.js app.js，根据main.js的require的模块寻找各类exports模块，全部打包到app.js供主html引入即可
在此之前应下载webpack-cli，脚手架，可以自动生成默认目录，cnpm install –g webpack-cli
webpack参考入门地址：https://www.runoob.com/w3cnote/webpack-tutorial.html
https://segmentfault.com/a/1190000006178770
第三方包引入
地图依赖supermap,openlayer,jquery
jquery使用expose-loader引入，而其他则在index.html直接引用不参与打包的static/js
开发工具
对于IDE开发工具，入门的我选择Sublime_text3。
ST3入门地址：https://blog.csdn.net/bao19901210/article/details/53208654
ST3下载地址：https://www.sublimetext.com/3 选择windows 64 bit
Hbuilder下载地址：http://www.dcloud.io 选择Hbuilder.9.0.2.windows下载（220M）
ECMAScript6
es6相对es5增加了大量语法，主要在类、模块等方面有显著变化。
有很多工具可以将es6转化为es5，如Babel,Traceur，还有检测代码风格的ESlint和测试用的Mocha工具。
let类似于var，但只在{}代码块有效，for循环中适合使用。const则是常量，必须初始化赋值。
阮一峰es6入门：http://es6.ruanyifeng.com
地图前端vue化
整体改成npm文件结构
node,npm,webpack都安装好后，开始搭建vue脚手架，自动创建适合vue项目的npm文件结构
- 先安装vue-cli
指令为npm install vue-cli –g，输入vue –V检查是否成功。 - cd到需要安装的目录
本人cd到D:\DSS\Emap\maven_branches\XXX\src\main\vue，cmd指令vue init webpack config，这里config为项目名，不能中文
由于公司内网环境，出现failed to download repo vuejs-templates/webpack，解决办法如下：
- 手动下载模板https://github.com/vuejs-templates/webpack
- C:\Users\31261文件夹下新建文件名 .vue-templates.
- 把下载好的模板复制到该文件夹，名为webpack-develop
- cd到要新建项目的路径
- 执行指令vue init webpack-develop config–offline，后面加–offline才能离线安装
- cnpm install安装所有依赖
- npm run-script build打包压缩
默认会打包到dist，我这边改为../../../webapp/views/emapConfig，需要更改build/index.js的build.index为path.resolve(__dirname, ‘../../../webapp/views/emapConfig/index.html’)，build.assetsRoot为path.resolve(__dirname, ‘../../webapp/views/emapConfig ‘)。 - npm run-script start启动http服务器
其端口在config/index.js的dev.port配置，默认为8080，服务器地址为http://localhost:8080/#/
vue2.0搭建指南：https://www.jianshu.com/p/1626b8643676
jsp/html的vue化
- 修改主页
index.html中 id为app的div为vue页面的载体。src/main.js新建了Vue对象，并引入了App.vue（vue主页）和route/index.js（路由设置），路由中引入了HelloWorld.vue，更改此页面为Home.vue，这个页面作为地图的首页，以此跳转其他页面。main.js配置了router.beforeEach，使默认跳到emapConfig路径，则进入地图管理端。 - 添加vue页面
config.vue作为其他引入所有vue的主页，要引入sider-bar.vue，则在js处import SideBar from ‘./bar/side-bar.vue’;申明为components，在template使用
js的模块化(emap,mapApi,dhmap模块分离)
首先地图分成三块，管理端，客户端，mapApi
- 管理端源码放src\main\vue\config，打包路径为src\main\webapp\views\emapConfig
- 客户端源码放src\main\vue\client，打包路径为src\main\webapp\views\emapClient
- api源码放src\main\vue\mapApi，不打包，上传到npm供其他引入使用
dhmap基本只用基于mapApi的使用
- 根据es6语法改造原js
css的模块化
- 引入之前的css
如common.css,sider.css放于src/assets/style/common
components/config.vue引入@import “../assets/style/common/common.css”;
对引入的图片放于src/assets/img - 新建less
对应模块的样式放于src/assets/style/components
后端接口封装
- 统一封装入库
src/assets/restAjax.js封装jquery的ajax - 单独模块使用
src/store/modules/index使用vuex使接口状态暴露到全局
src/store/modules下放置个模块对restAjax的使用
vue页面中使用$store.state.emapConfig.isShowEmapConfigPop得到src/modules/emapConfig/index.js里state. isShowEmapConfigPop属性 - 模拟数据
build增加dev-server.js中使用express使app.use(‘/mock’,express.static(‘./mock’))，
增加config/index.js增加proxyTable设置代理API到mock，参考地址：
https://www.jianshu.com/p/ccd53488a61b
模拟的json数据放置到/mock下，src/store/modules/emapConfig/interface.js传给restAjax的参数中加入root: ‘/API，其url对应json文件名，
启动脚本【npm run-script start】用于开发环境测试数据。 - 远程调用
设置proxyTable将对本地的请求转发到其他服务器ip，changeOrigin设为true即可跨域，用于本地前端代码调用服务器后台开发。
国际化
- 前端js建立语言键值对
src/assets/i18n新建en.js和zh-CN.js对应英文和中文 - 页面初始化获取语言
config.vue初始化请求后端接口，获取语言类型 - 根据语言类型区分
main.js引入vue-i18n包，使用VueI18n实例作为其他模块国际化使用 - vue页面使用
在data里加key:this.$t(‘menu.vehicle.home’)，标签内用{{key}}，或直接{{$t(“menu.vehicle.home”)}}