0.1.1 • Published 3 years ago
electricity-test-ui v0.1.1
WEB 前端框架-Vue
- vue2.6.10+element2.12.0+webpack4.40.2+vue-cli4.5.7
- version: 2.0.0
- update: 2020-10-20
准备工作
- nodejs 环境 + npm 包管理器
- cnpm npm 的淘宝镜像
- 开发工具 VSCODE
vscode编辑器
安装EditorConfig for VS Code、Prettier - Code formatter、ESLint插件
eslint.workingDirectories
字段是指定要配置具体哪个项目要参与自动化格式,如果有新增项目,记得在这个新增一下。
# 复制以下内容在终端(base)执行,自动创建,输入后回车
mkdir .vscode && cat -e >.vscode/settings.json<<END
{
"eslint.workingDirectories": ["./"],
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"search.useIgnoreFiles": false,
"search.exclude": {
"**/dist": true,
"**/node_modules": true
},
"vetur.validation.script": false
}
END
ESLint 配置
安装 eslint 插件
安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置
{
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.options": {
"plugins": ["vue"]
},
"eslint.run": "onSave",
"eslint.autoFixOnSave": true
}
自动修复 进行检测
npm run lint -- --fix
开发运行
# 安装依赖
npm install
# 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 1 - 由于 node-sass 不兼容高版本的 node环境 可能会出现npm warn node-sass
npm i node-sass@4.11.0 --ignore-script
# 2 - 找到node_modules > node-sass 建立 vendor 文件夹 然后重新执行rebuild
npm rebuild node-sass
# 本地开发 开启服务
npm run dev
# 本地开发 开启服务 连接测试环境
npm run test
# 打包分析
npm run analyz
浏览器访问 http://localhost:9080
发布
# 构建生成环境
npm run build
# 打包并部署到服务器,前提是要先配置deploy/config.js的服务器相关信息
npm run deploy
部署 nginx 配置参考
location / {
# 指向我们打包后上传的前端文件
root /opt/nginx/dist;
index index.html;
}
# 转发请求到后端服务网关
location /api/ {
proxy_pass http://192.168.2.45:8762/;
}
目录结构
├── config // 配置相关
├── deploy // 部署工具
│ └── index.js // 部署工具主要文件
│ └── config.js // 部署工具配置文件
│ └── spinner_style.js // 部署工具命令行样式文件
├── public // 静态资源
│ └── favicon.ico // 网站图标文件
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体 图片等静态资源
│ ├── components // 全局公用组件
│ ├── router // 路由
│ ├── plugins // UI插件配置
│ ├── mixins // mixins
│ ├── store // 全局store管理 状态管理模式
│ ├── utils // 全局公用方法
│ ├── view // view页面
│ │ ├── base // 全局基础框架页面
│ │ ├── page // 具体业务模块页面
│ ├── App.vue // 入口页面
│ └── main.js // 入口加载组件 初始化等
├── .babel.config // babel-loader 配置
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── .env // 环境变量配置
└── package.json // package.json
#常用方法
// 在vue里调用
/**
* 全局查看图片使用方法
* @param {Array} imgs - 图片数组[url, ...]
* @param {Number} index - 设置默认显示图片下标
*/
this.$setViewer(imgs, index)
// 调用接口 base.js @utils/index.js
const [err, res] = await this.$to(
api,
loading的上下文(context),
key,默认loading(context[key])
)
// 调用时间 base.js utils/index.js
this.$dayjs()
// 调用枚举(下拉框之类会用到) base.js
this.$d[xxxx] 或者 this.$d.xxx
支持语法
- 支持
ES11
相关语法(matchAll
,Promise.allSettled
,BigInt
,GlobalThis
,Nullish coalescing Operator
,Optional Chaining
)- 其中
Nullish coalescing Operator
和Optional Chaining
不能在模板(template
)语法中生效,只能在script
中生效。 Nullish coalescing Operator
:a ?? 2Optional Chaining
:a?.x
- 其中
装饰器语法,需要关闭 vscode 的 vetur 的验证,并交给和开启 eslint 验证。
在 .vscode/settings.json 中添加一行 关闭 vetur 对script 的校验 我选择将验证交给 eslint 处理 "vetur.validation.script": false,
function log() { /** * @param target 对应 methods 这个对象 * @param name 对应属性方法的名称 * @param descriptor 对应属性方法的修饰符 */ return function (target, name, descriptor) { console.log(target, name, descriptor) const fn = descriptor.value descriptor.value = function (...rest) { console.log(this) console.log(`这是调用方法【${name}】前打印的日志`) fn.call(this, ...rest) console.log(`这是调用方法【${name}】后打印的日志`) } } } // home.vue export default { ..., methods: { @log() test() { console.log('获取数据') } } }
0.1.1
3 years ago