paperless-ui v1.0.0
iot-ui
主要依赖
vue vue-router Vuex element sass webpack ECMAScript 6 入门 codemirror mint-ui echarts echarts使用方法
推荐编辑器
代码约束
如需关闭 eslint 搜索 config/index.js 文件下 useEslint 字段更改其为 false
vscode 安装插件 esLint + prettier 编辑器设置
{
"workbench.startupEditor": "newUntitledFile",
// 以下是按照ESLint格式化代码
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.quickSuggestions": {
"strings": true
},
"editor.tabSize": 2,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
{
"language": "html",
"autoFix": true
}
],
"vetur.validation.template": false,
// // 防止格式化代码后单引号变双引号
"prettier.singleQuote": true,
"files.autoSave": "onWindowChange",
// "git.confirmSync": false
// 配置是否从更新通道接收自动更新。更改后需要重启。
"update.channel": "none",
"window.zoomLevel": 2,
"eslint.autoFixOnSave": true,
"workbench.iconTheme": "vscode-icons",
"workbench.colorTheme": "Dracula",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"prettier.eslintIntegration": true
}复制（剪贴板）功能
npm install --save vue-clipboard2导出功能
npm install -S file-saver
npm install -S xlsx
npm install -D script-loader
// -S就是--save的简写，这样安装的包的名称及版本号就会存在package.json的dependencies里面。
// -D就是--save-dev， 这样安装的包的名称及版本号就会存在package.json的devDependencies里面。安装插件 ECharts
npm install echarts --save
// 通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require('echarts') 得到 ECharts。jsoneditor
npm install codemirror
npm install jsonlint -g
npm install --save-dev script-loader移动端基于vue 2.0
cnpm install mint-ui -S延伸文档
自动化操作
npm i --unsafe-perm //拉取依赖
npm start //本地启动
npm build:uat //构建uat环境
npm build:prod //构建生产环境演示登录
用户名 admin 密码 111111
目录结构
.
├── build //构建文件
├── config //环境配置文件
├── index.html //入口文件
├── src //主目录
│ ├── assets //主目录依赖静态资源
│ ├── components //组件目录
│ ├── router //路由目录
│ ├── store //状态目录
│ ├── server //请求目录
│ ├── style //样式目录
│ ├── utils //工具目录
│ │ ├── auth.js //验证信息方法
│ │ └── request.js //请求方法
│ ├── views //业务view
│ ├── main.js //入口js
│ └── App.vue
├── static //目录外依赖静态资源
└── package.json引入语法糖
我们在 build/webpack.base.conf.js alias 下配置规则@指向 src 主目录， 所以你可以在不必考虑文件层级情况下以@为根目录获取 src 下的需要文件。
import { getToken, setToken, removeToken } from '@/utils/auth'
// src/store/modules/user.js 获取 src/util/auth.js 下的方法请求集成
server 目录下的文件值根据业务模块进行划分的 api 请求集合，例如
import request from '@/utils/request' //公共请求方法
export function loginByUsername (username, password) {
// 这里做请求前的预处理
const data = {
username,
password
}
return request({
url: '/login/login',//路径
method: 'post',//请求方式
data // post 传参
})
}
export function getUserInfo (token) {
return request({
url: '/user/info',
method: 'get',
params: { token } // get传参
})
}所以请求模块可以和 views 业务模块相关联一一对应编写，更利于管理
业务入口
views 目录下是根据 业务划分的不同模块,基本规则例如
// views/layout
├── layout //layout模块
│ ├── components //模块组件被index.vue引用
│ │ ├── header.vue //头部组件
│ │ ├── sider.vue //菜单组件
│ │ ├── tagsView.vue //浏览条组件
│ │ ├── main.vue //内容入口组件
│ │ └── index.js //整合组件输出的index
│ └── index.vue //模块入口至于为什么需要 index.js？ 这其实是 es6 的语法糖，我们利用它做便捷的引用方式
// components/index.js
export { default as SrHeader } from './header.vue' // SrHeader 可以自定义组件的输出名称
export { default as SrSider } from './sider.vue'
export { default as SrMain } from './main.vue'
export { default as SrTagsView } from './tagsView.vue'// index.vue 引入
import { SrHeader, SrSider, SrMain, SrTagsView } from './components'
// ./components 默认寻找 components 下的index.js组件
模块的编写建议通读 vue vuex 的基础文档这是必须的
组件的划分 组件分为业务组件和公共 组件，如果所编写的组件涉及比较单一的业务只需要放在相应的模块的 components 下即可，但组件涉及的业务需要重复使用或者根本不涉及业务的无状态组件(比如 button) 就放在 src/components 即可
组件的引用 组件命名一般使用 SrSider 这样驼峰式的写法,引用后在 components 进行注册，在 template 使用时则使用 -分词的方式，注意小写 ，所有组件的使用都是如此，规范。
<template>
<div>
<sr-header></sr-header> // 使用
<el-container>
<sr-sider></sr-sider>
<el-main>
<sr-tags-view></sr-tags-view>
<sr-main></sr-main>
</el-main>
</el-container>
</div>
</template>
<script>
import { SrHeader, SrSider, SrMain, SrTagsView } from './components'
export default {
name: 'layout',
components: { SrHeader, SrSider, SrMain, SrTagsView }, //注册
computed: {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-container {
min-height: 100vh;
}
</style>合理使用 utils
utils 是工具方法的集合，我们根据工具功能的不同进行 编写，举个 🌰
// utils
├── utils
│ ├── auth.js //身份验证类方法
│ ├── validate.js //效验规则
│ └── request.js //请求方法路由模块的安装
在 router/index 中使用_import('table/index')实现模块的按需加载，路径是以 views 为根目录的模块入口文件
let _import = require('./_import_' + process.env.NODE_ENV)
export const constantRouterMap = [
{ path: '/404', hidden: true },
{
path: '/',
component: _import('login/index'), // this
name: 'login',
hidden: true
}
]解释下 package.json
我们主要关心的项目模块依赖 ，以及启动脚本
dependencies 是项目依赖
npm i 模块名 --save //如果需要安装新的以来的话devDependencies 是项目开发依赖，这类依赖一般是构建后用不到的
npm i 模块名 --save--dev //安装开发依赖scripts
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:uat": "cross-env NODE_ENV=production env_config=uat node build/build.js"
}主要解释下 以 "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", 作解释
分为两部分
cross-env NODE_ENV=production env_config=prod
// 先赋值环境变量 cross-env是用来解决跨平台赋值环境变量问题的依赖插件 在此之后进行赋值
// NODE_ENV 是项目环境变量一般被框架锁依赖 构建情况下必须是production
// env_config 是业务环境变量，可以是dev本地，prod生产环境，uat测试环境自己随意添加。全局环境变量会根据这个值找寻config下相应的配置文件。比如dev的话找寻dev.env.js
node build/build.js //启动构建脚本全局变量使用
我们在dev.env.js 定义一个请求api的域
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
ENV_CONFIG: '"dev"',
BASE_API: '"https://api-dev"', // 这里这里
TOKEN_NAME: '"dev-userToken"'
})那么我在utils/request.js 使用这个变量
const service = axios.create({
baseURL: process.env.BASE_API, // 这里在使用 总之process.env 是全局环境集合 属于node知识有兴趣可以了解下 在项目里node知识用的还不多
timeout: 5000 // request timeout
})前端项目工程化需要有人开疆扩土 这里只讲了规范和简单使用上的关键点
vue后台开发比较成熟案例项目值得一看可以学习到很多东西 更加全面的vue项目开发指南建议值得依赖这是现阶段很成熟的配置权衡
5 years ago