234

1.1目的
本文指导如何基于Vue-Cli（Vue脚手架）搭建WEB代码开发框架，基础三方组件库引入，及开发IDE配置，Eslint静态检查配置，保持代码框架一致，和团队代码书写风格的一致性。
1.2 前期准备
 安装Node.js（需要8.9及更高版本，推荐8.11.0+）
 安装VSCode，我安装的是1.30.2版本
 参考Vue官网完成Vue，Vuex，Vue Router，Vue-Cli等知识学习
具体安装步骤，按照默认安装即可
1.3 配置npm镜像
镜像基于华为开源镜像站进行配置：
https://mirrors.huaweicloud.com/
首页内搜索npm，点击图标打开弹出框有指导如何使用

步骤如下：
打开cmd控制台
npm config set registry https://repo.huaweicloud.com/repository/npm/
npm cache clean –f
华为开源镜像站同时也提供了工具类加速镜像，可以通过如下的命令设置加速地址：
※ 设置nodejs工具的镜像地址
npm config set disturl https://mirrors.huaweicloud.com/nodejs
※ 设置Node-Sass的镜像地址
npm config set SASS_BINARY_SITE https://mirrors.huaweicloud.com/node-sass

注：华为开源镜像站现在支持免代理访问了，但是因为无法解决域名冲突的问题，因此需要配置hosts文件：（C:\Windows\System32\drivers\etc）
参考http://3ms.huawei.com/km/blogs/details/5587793
Host文件增加如下:
172.30.163.193 mirrors.huaweicloud.com
172.30.163.142 repo.huaweicloud.com

验证npm镜像是否配置成功：
cmd控制台命令行内敲入如 npm view vue，可以查看npm上最新的vue版本信息，
有如下回显表示配置成功

1.4 安装Vue-Cli （3.3版本）
关于Vue-Cli详细介绍参考https://cli.vuejs.org/zh/guide/
步骤如下:
1、 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g卸载它
2、 执行 npm install –g @vue/cli 安装Vue-Cli，安装完成后，执行vue --version来检查是否安装正确及查看当前vue-cli的版本（3.x）
注：安装3.3版本，可执行npm install –g @vue/cli@3.3.0

1.5 使用Vue-Cli创建一个项目
cmd命令行下切换目录到要创建项目的文件夹下，或在该文件夹下shift+右键，选择“在此处打开命令窗口”，打开命令行执行：
vue create demo
1、窗口内提示选择一个preset（预设），这里我们选择“手动选择特性”
注：第一行的preset是我将手动选择的特性，另存为了常用预设，方便下次创建项目，后面会有提到

3、 接下来提示选择你项目需要的feature，我们选择“Babel，Router，Vuex，CSS Pre-processors，Linter/Formatter”，对各选项的具体介绍，可以下来网上查询相关资料

4、 下来提示Router是否使用History模式，我们选择“否”

5、 下来提示选择一个CSS预处理器，这里可以根据自己需要选择使用，这里我选择“Sass”

6、 接下来提示选择代码静态检查和格式化配置，我们选择使用Eslint座位代码静态检查，Prettier作为格式化工具

7、 接下来选择Eslint检查的配置，保存时检查还是提交时检查，我们选择“Lint on save”

8、 下来询问你在哪里保存你刚选择的这些配置，我们选择“在独立文件”中

9、 接下来询问是否将配置保存为Preset，下次创建项目可直接使用，我们选择“是”

10、接下来要求你对这个Preset命名，如我们命名为“genex-preset”
输入回车
注：Preset文件会保存在C:\Users\g00206358下.vuerc 文件中 （工号替换自己的）
下图可以看到我创建的两个preset，在下次用vue create命令创建项目时，即可以选择已保存的预设，如果不需要哪个预设了，可以在该文件中进行删除

11、项目开始创建，vue-cli会根据我们刚才的选择，安装依赖的包和插件，等待安装完成
有如下信息，表示项目创建成功

cd到demo 目录，执行npm run serve 即可打开demo页面
默认Vue工程页面如下

• 使用Vue ui命令可开启图形化界面来创建工程
  1.6 配置Eslint及VSCode
  在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的，这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。
  配置VSCode
  1、首先给干活的工具，配置一些好用的扩展插件
  在VSCode的扩展里，搜索并安装“Vetur，Eslint，Prettier” 这3个必须扩展（安装最新的版本），这3个将辅助我们完成代码静态检查及代码格式化。
  关于几个扩展的介绍，可以网上查询下资料了解。

*其他扩展的推荐如：
“Chinese (Simplified) Language Pack for Visual Studio Code”（VSCode的中文汉化包）
“JetBrains IDE Keymap”（JetBrain IDE的快捷键，由于本人长期使用Webstorm，所以安装了这个，保持2个IDE快捷键一致）“
“Project Manager”（可以将经常打开的文件夹保存为Project，后续直接打开，方法： Ctrl+Shift+P， 输入Project Manager，根据联想的，选择Save Project）
“Debugger for Chrome”（VSCode基于Chrome的一个调试工具）
“vscode-icons”（不同文件增加了图标标注）
“Path Intellisense” （如img的src里写入文件路径时会开启联想， import * from ‘’里的路径联想）
“Auto Close Tag” （自动闭合html标签）
“Auto Rename Tag”（自动重命名html标签）
“Local History”（在本地将文件的历史信息保存，方便回退到某一时刻）
“LineCount”（统计代码行数信息方法： Ctrl+Shift+P， 输入LineCount，根据联想的，选择Current workspace file, 即会在项目根目录下生成output文件夹，里面有代码行信息代码行信息
注： 统计时，需要屏蔽一些文件夹，如node_module, dist等，配置如下，粘贴如自己VSCode的setting.json里即可，根据自己需要修改屏蔽的文件夹
“LineCount.excludes”: [
“/.vscode/”,
“/node_modules/”,
“/.history/”,
“/.svn/”,
“/mapping_conf/”,
“/mocks/”,
“/out/”,
“/vop/”,
“/.browserslistrc",
"/.eslintrc.js”,
“/.gitignore",
"/babel.config.js”,
“/db.json",
"/generate-mappings.js”,
“/package.json",
"/package-lock.json”,
“/postcss.config.js",
"/README.md”,
“**/vue.config.js”
]
）

2、打开VSCode的Setting，以json配置文件方式打开
将如下配置项直接复制粘贴到用户设置或工作区设置（如自己原也有配置，记得将两个配置合并后粘贴进去）
*用户设置：全局生效，即所有VSCode工程都生效
工作区设置：只在当前打开的项目工程内生效

附配置项：
{
“editor.tabSize”: 2,
“editor.fontSize”: 16,
“editor.formatOnSave”: true,
“editor.formatOnPaste”: true,
“editor.renderWhitespace”: “all”,
“editor.mouseWheelZoom”: true,
“editor.wordWrap”: “on”,
“breadcrumbs.enabled”: true,
//不搜索如下目录文件
“search.exclude”: {
“/node_modules": true,
"/dist”: true
},
“eslint.alwaysShowStatus”: true,
“eslint.autoFixOnSave”: true,
//开启对.vue文件中错误的检查
“eslint.validate”: [
“javascript”,
“javascriptreact”,
{
“language”: “html”,
“autoFix”: true
},
{
“language”: “vue”,
“autoFix”: true
}
],
“prettier.eslintIntegration”: true,
// js文件格式化方式
“prettier.singleQuote”: true,
“prettier.semi”: true,
“prettier.tabWidth”: 2,
“prettier.bracketSpacing”: false,
// 省略箭头函数不必要的(), 即只有1个参数时
“prettier.arrowParens”: “avoid”,
“prettier.printWidth”: 120,
“vetur.format.defaultFormatter.js”: “prettier-eslint”,
“vetur.format.defaultFormatter.html”: “prettier”,
“vetur.format.defaultFormatterOptions”: {
// .vue文件里面的js 格式化方式,与eslinttrc.js一致
// 参考https://vuejs.github.io/vetur/formatting.html#settings
“prettier”: {
“tabWidth”: 2,
“semi”: true,
“singleQuote”: true,
// { a:1, b:2 }, {}中的空格
“bracketSpacing”: false,
// 省略箭头函数不必要的(), 即只有1个参数时
“arrowParens”: “avoid”,
“printWidth”: 120
}
},
“workbench.iconTheme”: “vscode-icons”,
“update.mode”: “default”,
“workbench.statusBar.feedback.visible”: false,
“vsicons.dontShowNewVersionMessage”: true
}

按上述配置后，在我们对代码写完Ctrl + S保存时，就会按配置的项对代码格式进行格式化，保持组内代码风格的一致
解决VSCode 不能在线安装扩展
部分同事，可能无法在线安装VSCode扩展，下面讲下如何进行离线安装
1、 打开 VSCode 插件市场网址 Extensions for the Visual Studio family of product，输入你想要的插件名称
2、 点击进入插件主页，点击右侧的 Download Extension 链接，得到下载下来的离线安装包，以 .vsix 为扩展名结尾（如果无法下载的，可以联系有外网权限同事下载）

3、 打开VSCode，在左侧“扩展”页签，点击如下链接

选择你下载的VSCode扩展VSIX进行安装
配置Eslint
由于创建项目时，已安装了Eslint及相关插件，这里我们只需要配置Eslint配置文件.eslintrc.js
编辑项目根目录下.eslintrc.js文件，将如下内容复制粘贴进去
/*eslint-disable */
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
// 规则参考如下https://vuejs.github.io/eslint-plugin-vue/rules/ 也可以根据需要调整为其他
//可选值： plugin:vue/essential plugin:vue/strongly-recommended plugin:vue/recommended，规则描述参考网页
extends: [‘plugin:vue/essential’, ‘@vue/prettier’],
// off | 0 :表示关闭规则。
// warn | 1 : 表示将该规则转换为警告。
// error | 2 : 表示将该规则转换为错误。
/*eslint-disable */
/*eslint-enable */
// 这里替换成你自己代码中使用的全局变量，如jQuery, $等
globals: {
Gis3D: true,
Cesium: true
},
rules: {
// 变量中禁止出现如下 字面值
‘id-blacklist’: [‘error’, ‘admin’, ‘root’, ‘sys’, ‘system’, ‘secadmin’, ‘password’, ‘Admin’, ‘Root’],
// 强制使用驼峰命名,包含变量及属性
camelcase: [‘error’, {properties: ‘always’}],
// 变量名称最短为2个字符
‘id-length’: [‘error’, {min: 2, properties: ‘always’, exceptions: [‘e’, ‘i’, ‘j’, ‘h’]}],
// 最大可嵌套深度4
‘max-depth’: [‘error’, 4],
‘max-nested-callbacks’: [‘error’, 4],
// 最大长度120
‘max-len’: [‘error’, {code: 120, tabWidth: 2}],
// 最大连续空行数 2
‘no-multiple-empty-lines’: [‘error’, {max: 2}],
// 不允许花括号中有空格如 { a:1, b:2 }
‘object-curly-spacing’: [‘error’, ‘never’],
‘prettier/prettier’: [
‘error’,
{
// 属性参考https://prettier.io/docs/en/options.html
tabWidth: 2,
semi: true,
singleQuote: true,
// { a:1, b:2 }, {}中的空格
bracketSpacing: false,
// 省略箭头函数不必要的(), 即只有1个参数时
arrowParens: ‘avoid’,
printWidth: 120
}
],
‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’,
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’,
‘no-alert’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’
},
parserOptions: {
parser: ‘babel-eslint’
}
};
/*eslint-enable */

具体校验规则可以参考https://vuejs.github.io/eslint-plugin-vue/rules/
我们默认使用的是其中essential （必须）类型的
可选值： plugin:vue/essential， plugin:vue/strongly-recommended， plugin:vue/recommended，规则描述参考网页

使用介绍
根据上述配置，我们不光配置的校验规则，还有VSCode基于Prettier的格式化规则，我们在写好代码，保存时，工作区内代码会根据我们配置自动格式化
格式化大的规则如下：
1、 缩进统一为两个空格
2、 字符串使用单引号
3、 结尾强制使用分号结尾
4、 对象大括号中{}括号符号跟前不要空格
5、 省略箭头函数不必要()， 即只有1个参数时
6、 html和js在单行到120字符时换行

其余格式化规则，可参考eslint-plugin-vue的校验规则https://vuejs.github.io/eslint-plugin-vue/rules/

*打开存量的一些代码时，里面可能有大部分代码不满足Eslint规则，可以在命令行输入
npm run lint， 会根据eslint规则修复部分错误，其余的需要手动修复
也可以根据VSCode快捷键，打开文件，右键选择 “设置文档格式”进行快速格式化，由于默认的快捷键按键太多，可以修改为自己顺手的（在键盘快捷设置里，找到“设置文档格式”选项，重新设置快捷键，如我设置为Ctrl+`）

*执行npm run lint 命令，可以在控制台显示所有eslint错误
不过，当错误很多的时候，控制台查看很不方便，我们在package.json里配置一项，将eslint检查的问题生成一份html格式的报告来查看
package.json的script脚本里加入
“lintReport”: “eslint src -f html --ext .js,.vue > lintReport.html”
当执行 npm run lintReport时，就会将错误内容生成到报告里，如下

注： 如在控制台执行产生如类似如下错误， 可不用管，只要项目根目录下正常生成了lintReport.html文件即可

1.7 安装项目需要组件及组件使用
安装如下组件：
element-ui
axios
vue-i18n
vuex （根据需要可选）
echarts （根据业务需要选择是否要）
或其他自己项目开发需要引用的组件

因为这些组件都属于开发依赖，所以用npm install –S xx来安装
如 npm install –S element-ui 进行安装
Element-UI组件库使用
关于element-ui的使用，可以参考官网http://element-cn.eleme.io/#/

ElementUI按需加载
参考ElementUI官网 http://element-cn.eleme.io/#/zh-CN/component/quickstart 引入Element-> 按需引入 手动操作可以完成, 其中，babel.config.js 修改为如下
module.exports = {
“presets”: [
“@vue/app”
],
“plugins”: [
[
“component”,
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-chalk”
}
]
]
}

同时Vue-Cli 3提供了element插件，基于此插件，也能完成element的按需加载
使用步骤：
1、 Vue add element
等待插件安装完，会提示 ，我们选择Import on demand

2、 接下来会让选择加载的语言，我们默认选择zh-CN（ElementUI的语言，在下述的i18n插件内也可切换）
完成后，Vue会对本地的部分文件（main.js, App.vue, babel.config.js）进行修改， src下增加了plugins 目录
3、 在src/plugins/element.js文件中，我们可以参考示例配置对element-UI的按需引入， 同时在文件头记得引入css文件

4、 最后在页面的main文件中，检查是否完成了对elementUI的引用

i18n国际化插件使用
关于Vue-i18n的使用如下
src目录下建立如下目录和文件

各文件内容如下
I18n.js
import Vue from ‘vue’;
import VueI18n from ‘vue-i18n’;
import locale from ‘element-ui/lib/locale’;
import messages from ‘./lang’;

function getCookie(name) {
//正则匹配
var reg = new RegExp(’(^| )’ + name + ‘=([^;]*)(;|$)’);
var res = document.cookie.match(reg);
if (res != null) return unescape(res[2]);
return null;
}
Vue.use(VueI18n);
const i18n = new VueI18n({
// 这里修改成你自己获取语言的方法，如从cookie，或者url，对应函数也做响应修改, 默认为en
locale: getCookie(‘lang’) || ‘en’,
silentTranslationWarn: process.env.NODE_ENV === ‘production’,
messages
});
locale.i18n((key, value) => i18n.t(key, value));
export default i18n;

index.js
import en from ‘./en’;
import zh from ‘./zh’;
export default {
en,
zh
};

en.js
import enLocale from ‘element-ui/lib/locale/lang/en’;
const en = {
// 这里开始定义你自己的国际化内容，建议按组件类型分类，如btn.ok, label.ne等
btn: {
ok: ‘OK’
},
label: {
ne: ‘NE:’
},
…enLocale
};

export default en;

zh.js
import zhLocale from ‘element-ui/lib/locale/lang/zh-CN’;
const zh = {
// 这里开始定义你自己的国际化内容，建议按组件类型分类，如btn.ok, label.ne等
btn: {
ok: ‘确认’
},
label: {
ne: ‘网元：’
},
…zhLocale
};

export default zh;
修改main.js，增加红框部分代码

在html页面中使用





或

{{$t('label.buildingStatistic')}}

Js文件中使用 name: this.$t('label.building') axios插件使用

1、 在src目录下创建util文件夹，将如上文件放入到文件夹下，该文件中创建了一个axios实例
2、 在src目录下创建api文件夹，文件夹下放置组件和后台交互的接口
如下:

3、 在对应组件中引入该api，即可使用mapApi.getGridData查询数据
demoApi.getCellData().then(data => {
this.cellData = data.data;
console.log(this.gridData);
});

Axios更详细使用说明参考
https://www.kancloud.cn/yunye/axios/234845
1.8 本地Mock环境配置
本地mock搭建，需要npm上安装json-server，jsonpath及concurrently开发依赖的包
*json-server 构建本地json服务器，可以启动http服务，根据请求，返回响应json数据

• concurrently 可以辅助在npm内运行两个命令的工具
  步骤：
  安装依赖包
  依赖包都属于开发依赖，使用npm install –D xx来安装
  npm install -D json-server
  npm install -D jsonpath
  npm install -g concurrently
  新建generate-mappings.js 文件
  在项目根目录下配置generate-mappings.js 文件
  配置mapping-conf
  在项目根目录下创建mapping-conf文件夹，文件夹内创建mapping-conf.json文件，此文件用来做请求url和返回json数据的映射文件
  文件内容如下：
  [
  {
  “description”: “查询小区信息”,
  “request”: [],
  “url”: “/discovery/access/queryCell.do”,
  “response”: “accessAnalysis-queryCell-response.json”
  },
  {
  “description”: “查询栅格信息”,
  “request”: [],
  “url”: “/discovery/access/queryGrid.do”,
  “response”: “accessAnalysis-queryGrid-response.json”
  }
  ]

创建mock数据文件
在项目根目录下创建mocks文件夹，里面放置接口返回的数据，文件名与步骤3里response里文件名相匹配，如创建accessAnalysis-queryCell-response.json 文件，文件内容如下：
{
“cellList”: [
{
“cellId”: 111,
“cellName”: “111”,
“lon”: 111,
“lat”: 111
},
{
“cellId”: 222,
“cellName”: “222”,
“lon”: 222,
“lat”: 222
}
]
}

配置mock启动脚本
在package.json中，script脚本内加入
“json-server”: “json-server db.json -p 8888 -m generate-mappings.js”,
“dev”: “concurrently “npm run serve” “npm run json-server””
-p 8888可修改为其他端口号
项目根目录下放入 文件
配置请求代理
在项目根目录下vue.config.js 添加如下配置（如果没有该文件就新建一个） 可参考该文件，里面内容根据自己app修改
devServer: {
proxy: {
‘/discovery/’: {
target: ‘http://localhost:8888/’ // 端口号与package.json里json-server里启动端口号一致
}
}
},
根据如上配置，所有已discovery开头的请求，均会代理到我们启动的json-server地址上去，并返回响应的mock数据
启动本地服务和mock
执行npm run dev即可， 在页面发送请求时，打开F12可查看请求url及响应的mock数据。
如下表示mock数据返回成功

1.9 项目代码目录一览