Skip to content

Commit 5813b5e

Browse files
coderjamcoderjam
committed
init
1 parent 15ec692 commit 5813b5e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+13902
-101
lines changed

‎.browserslistrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not dead

‎.env.development

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
NODE_ENV='development'
2+
# must start with VUE_APP_
3+
VUE_APP_ENV = 'development'
4+
OUTPUT_DIR = 'test'

‎.env.production

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
NODE_ENV='production'
2+
# must start with VUE_APP_
3+
VUE_APP_ENV = 'production'
4+
OUTPUT_DIR = 'dist'

‎.env.staging

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
NODE_ENV='production'
2+
# must start with VUE_APP_
3+
VUE_APP_ENV = 'staging'
4+
OUTPUT_DIR = 'test'

‎.eslintrc.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
node: true,
6+
es6: true
7+
},
8+
extends: [
9+
'plugin:vue/vue3-essential',
10+
'eslint:recommended',
11+
'@vue/typescript/recommended',
12+
'@vue/prettier',
13+
'@vue/prettier/@typescript-eslint'
14+
],
15+
parserOptions: {
16+
ecmaVersion: 2020
17+
},
18+
rules: {
19+
// 禁止使用 var
20+
'no-empty': 'off',
21+
'no-var': 'error',
22+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
23+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
24+
'@typescript-eslint/no-empty-function': 0,
25+
'@typescript-eslint/no-var-requires': 0,
26+
'@typescript-eslint/interface-name-prefix': 0,
27+
'@typescript-eslint/no-explicit-any': 0, // TODO
28+
'@typescript-eslint/consistent-type-assertions': 0,
29+
'@typescript-eslint/no-unused-vars': 0,
30+
'typescript-eslint/no-unused-vars': 'off'
31+
}
32+
}

‎.gitignore

Lines changed: 21 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,24 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
8-
9-
# Diagnostic reports (https://nodejs.org/api/report.html)
10-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11-
12-
# Runtime data
13-
pids
14-
*.pid
15-
*.seed
16-
*.pid.lock
17-
18-
# Directory for instrumented libs generated by jscoverage/JSCover
19-
lib-cov
20-
21-
# Coverage directory used by tools like istanbul
22-
coverage
23-
*.lcov
24-
25-
# nyc test coverage
26-
.nyc_output
27-
28-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29-
.grunt
30-
31-
# Bower dependency directory (https://bower.io/)
32-
bower_components
33-
34-
# node-waf configuration
35-
.lock-wscript
36-
37-
# Compiled binary addons (https://nodejs.org/api/addons.html)
38-
build/Release
39-
40-
# Dependency directories
41-
node_modules/
42-
jspm_packages/
43-
44-
# TypeScript v1 declaration files
45-
typings/
46-
47-
# TypeScript cache
48-
*.tsbuildinfo
49-
50-
# Optional npm cache directory
51-
.npm
1+
.DS_Store
2+
node_modules
3+
/dist
4+
/test
525

53-
# Optional eslint cache
54-
.eslintcache
556

56-
# Microbundle cache
57-
.rpt2_cache/
58-
.rts2_cache_cjs/
59-
.rts2_cache_es/
60-
.rts2_cache_umd/
7+
# local env files
8+
.env.local
9+
.env.*.local
6110

62-
# Optional REPL history
63-
.node_repl_history
64-
65-
# Output of 'npm pack'
66-
*.tgz
67-
68-
# Yarn Integrity file
69-
.yarn-integrity
70-
71-
# dotenv environment variables file
72-
.env
73-
.env.test
74-
75-
# parcel-bundler cache (https://parceljs.org/)
76-
.cache
77-
78-
# Next.js build output
79-
.next
80-
81-
# Nuxt.js build / generate output
82-
.nuxt
83-
dist
84-
85-
# Gatsby files
86-
.cache/
87-
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88-
# https://nextjs.org/blog/next-9-1#public-directory-support
89-
# public
90-
91-
# vuepress build output
92-
.vuepress/dist
93-
94-
# Serverless directories
95-
.serverless/
96-
97-
# FuseBox cache
98-
.fusebox/
99-
100-
# DynamoDB Local files
101-
.dynamodb/
102-
103-
# TernJS port file
104-
.tern-port
11+
# Log files
12+
npm-debug.log*
13+
yarn-debug.log*
14+
yarn-error.log*
15+
pnpm-debug.log*
16+
17+
# Editor directories and files
18+
.idea
19+
.vscode
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.postcssrc.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// https://github.com/michael-ciniawsky/postcss-load-config
2+
module.exports = {
3+
plugins: {
4+
autoprefixer: {
5+
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
6+
},
7+
'postcss-px-to-viewport': {
8+
viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
9+
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
10+
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
11+
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
12+
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
13+
mediaQuery: false // 允许在媒体查询中转换`px`
14+
}
15+
}
16+
}

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
README.md

‎README.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
2+
### 已完成
3+
- [x] 配置多环境变量
4+
- [x] vw 适配方案
5+
- [x] VantUI 组件按需加载
6+
- [x] Scss 全局样式
7+
- [x] 自定义 TabBar
8+
- [x] 适配苹果底部安全距离
9+
- [x] 使用 Mock 数据
10+
- [x] Axios 封装及接口管理
11+
- [x] Vuex 状态管理
12+
- [x] Vuex 持久化储存
13+
- [x] Vue-router
14+
- [x] Webpack 4 vue.config.js 基础配置
15+
- [x] 配置 alias 别名
16+
- [x] 配置 proxy 跨域
17+
- [x] 配置 打包分析
18+
- [x] externals 引入 cdn 资源
19+
- [x] 去掉 console.log
20+
- [x] splitChunks 单独打包第三方模块
21+
- [x] gzip 压缩
22+
- [x] uglifyjs 压缩
23+
- [x] eruda移动端调试
24+
- [x] 动态设置 title
25+
- [x] 本地存储 storage 封装
26+
- [x] 配置 Jssdk
27+
28+
### 计划完成
29+
- [ ] vue版本升级
30+
- [ ] TabBar优化
31+
32+
### Node 版本要求
33+
34+
`Vue CLI` 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或 [nvm-windows](https://github.com/coreybutler/nvm-windows) 在同一台电脑中管理多个 Node 版本。
35+
36+
本示例 Node.js 12.14.0
37+
### 项目结构
38+
```js
39+
h5 -- UI 主目录
40+
├── public -- 静态资源
41+
├ ├── favicon.ico -- 图标
42+
├ └── index.html -- 首页
43+
├── src -- 源码目录
44+
├ ├── api -- 后端交互的接口
45+
├ ├── assets -- 静态资源目录
46+
├ ├ ├── css
47+
├ ├ ├── index.scss -- 全局通用样式
48+
├ ├ ├── mixin.scss -- 全局 mixin
49+
├ ├ └── variables.scss -- 全局变量
50+
├ ├── components -- 封装的组件
51+
├ ├── config -- 环境配置
52+
├ ├── hooks -- vue3 Hooks
53+
├ ├── model -- 类型声明文件
54+
├ ├── const -- 放 vue 页面的配置常量
55+
├ ├── plugins -- 插件
56+
├ ├── route -- VUE 路由
57+
├ ├ ├── index -- 路由入口
58+
├ ├ └── router.config.js -- 路由表
59+
├ ├── store -- VUEX
60+
├ ├── utils -- 工具包
61+
├ ├ ├── request.js -- axios 封装
62+
├ ├ └── storage.js -- 本地存储封装
63+
├ ├── views -- 业务上的 vue 页面
64+
├ ├ ├── layouts -- 路由布局页面(是否缓存页面)
65+
├ ├ ├── tabBar -- 底部菜单页面
66+
├ ├ └── orther -- 其他页面
67+
├ ├── App.vue -- 根组件
68+
├ ├── main.ts -- 入口 ts
69+
├ ├── shims-axios.d.ts -- axios 声明文件
70+
├ └── shims-vue.d.ts -- vue 组件声明文件
71+
├── .env.development -- 开发环境
72+
├── .env.production -- 生产环境
73+
├── .env.staging -- 测试环境
74+
├── .eslintrc.js -- ESLint 配置
75+
├── .gitignore -- git 忽略
76+
├── .postcssrc.js -- CSS 预处理配置(rem 适配)
77+
├── babel.config.js -- barbel 配置入口
78+
├── tsconfig.json -- vscode 路径引入配置
79+
├── package.json -- 依赖管理
80+
└── vue.config.js -- vue cli4 的 webpack 配置
81+
```
82+
### 启动项目
83+
84+
```bash
85+
npm install
86+
87+
npm run serve
88+
```
89+

‎babel.config.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
2+
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
3+
const plugins = [
4+
[
5+
'import',
6+
{
7+
libraryName: 'vant',
8+
libraryDirectory: 'es',
9+
style: true
10+
},
11+
'vant'
12+
]
13+
]
14+
// 去除 console.log
15+
// if (IS_PROD) {
16+
// plugins.push('transform-remove-console')
17+
// }
18+
19+
module.exports = {
20+
presets: ['@vue/cli-plugin-babel/preset'],
21+
plugins
22+
}

‎mock/index.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* eslint-disable */
2+
const Mock = require('mockjs')
3+
4+
const user = require('./user')
5+
// const role = require('./role')
6+
// const article = require('./article')
7+
// const search = require('./remote-search')
8+
9+
// const mocks = [...user, ...role, ...article, ...search]
10+
const mocks = [...user]
11+
// for front mock
12+
// please use it cautiously, it will redefine XMLHttpRequest,
13+
// which will cause many of your third-party libraries to be invalidated(like progress event).
14+
function mockXHR() {
15+
// mock patch
16+
// https://github.com/nuysoft/Mock/issues/300
17+
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
18+
Mock.XHR.prototype.send = function() {
19+
if (this.custom.xhr) {
20+
this.custom.xhr.withCredentials = this.withCredentials || false
21+
22+
if (this.responseType) {
23+
this.custom.xhr.responseType = this.responseType
24+
}
25+
}
26+
this.proxy_send(...arguments)
27+
}
28+
29+
function XHR2ExpressReqWrap(respond) {
30+
return function(options) {
31+
let result = null
32+
if (respond instanceof Function) {
33+
const { body, type, url } = options
34+
// https://expressjs.com/en/4x/api.html#req
35+
result = respond({
36+
method: type,
37+
body: JSON.parse(body),
38+
query: url
39+
})
40+
} else {
41+
result = respond
42+
}
43+
return Mock.mock(result)
44+
}
45+
}
46+
47+
for (const i of mocks) {
48+
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
49+
}
50+
}
51+
52+
module.exports = {
53+
mocks,
54+
mockXHR
55+
}

0 commit comments

Comments
 (0)