Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
xqz
/
dianDemo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
5f3bc05b
authored
2020-08-23 08:37:59 +0800
by
sunnie1992
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
readme add vw and update npm
1 parent
bc90d276
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
366 additions
and
125 deletions
.eslintrc.js
README.md
package-lock.json
package.json
vue.config.js
.eslintrc.js
View file @
5f3bc05
...
...
@@ -3,66 +3,98 @@ module.exports = {
env
:
{
node
:
true
},
extends
:
[
'plugin:vue/essential'
,
'eslint:recommended'
,
'@vue/prettier'
],
extends
:
[
'plugin:vue/essential'
,
'eslint:recommended'
],
parserOptions
:
{
parser
:
'babel-eslint'
},
rules
:
{
"vue/max-attributes-per-line"
:
[
2
,
{
"singleline"
:
10
,
"multiline"
:
{
"max"
:
1
,
"allowFirstLine"
:
false
}
}],
"vue/singleline-html-element-content-newline"
:
"off"
,
"vue/multiline-html-element-content-newline"
:
"off"
,
"vue/name-property-casing"
:
[
"error"
,
"PascalCase"
],
"vue/no-v-html"
:
"off"
,
'vue/max-attributes-per-line'
:
[
2
,
{
singleline
:
10
,
multiline
:
{
max
:
1
,
allowFirstLine
:
false
}
}
],
'vue/singleline-html-element-content-newline'
:
'off'
,
'vue/multiline-html-element-content-newline'
:
'off'
,
'vue/name-property-casing'
:
[
'error'
,
'PascalCase'
],
'vue/no-v-html'
:
'off'
,
'accessor-pairs'
:
2
,
'arrow-spacing'
:
[
2
,
{
'before'
:
true
,
'after'
:
true
}],
'arrow-spacing'
:
[
2
,
{
before
:
true
,
after
:
true
}
],
'block-spacing'
:
[
2
,
'always'
],
'brace-style'
:
[
2
,
'1tbs'
,
{
'allowSingleLine'
:
true
}],
'camelcase'
:
[
0
,
{
'properties'
:
'always'
}],
'brace-style'
:
[
2
,
'1tbs'
,
{
allowSingleLine
:
true
}
],
camelcase
:
[
0
,
{
properties
:
'always'
}
],
'comma-dangle'
:
[
2
,
'never'
],
'comma-spacing'
:
[
2
,
{
'before'
:
false
,
'after'
:
true
}],
'comma-spacing'
:
[
2
,
{
before
:
false
,
after
:
true
}
],
'comma-style'
:
[
2
,
'last'
],
'constructor-super'
:
2
,
'curly'
:
[
2
,
'multi-line'
],
curly
:
[
2
,
'multi-line'
],
'dot-location'
:
[
2
,
'property'
],
'eol-last'
:
2
,
'eqeqeq'
:
[
"error"
,
"always"
,
{
"null"
:
"ignore"
}],
'generator-star-spacing'
:
[
2
,
{
'before'
:
true
,
'after'
:
true
}],
eqeqeq
:
[
'error'
,
'always'
,
{
null
:
'ignore'
}],
'generator-star-spacing'
:
[
2
,
{
before
:
true
,
after
:
true
}
],
'handle-callback-err'
:
[
2
,
'^(err|error)$'
],
'indent'
:
[
2
,
2
,
{
'SwitchCase'
:
1
}],
indent
:
[
2
,
2
,
{
SwitchCase
:
1
}
],
'jsx-quotes'
:
[
2
,
'prefer-single'
],
'key-spacing'
:
[
2
,
{
'beforeColon'
:
false
,
'afterColon'
:
true
}],
'keyword-spacing'
:
[
2
,
{
'before'
:
true
,
'after'
:
true
}],
'new-cap'
:
[
2
,
{
'newIsCap'
:
true
,
'capIsNew'
:
false
}],
'key-spacing'
:
[
2
,
{
beforeColon
:
false
,
afterColon
:
true
}
],
'keyword-spacing'
:
[
2
,
{
before
:
true
,
after
:
true
}
],
'new-cap'
:
[
2
,
{
newIsCap
:
true
,
capIsNew
:
false
}
],
'new-parens'
:
2
,
'no-array-constructor'
:
2
,
'no-caller'
:
2
,
...
...
@@ -93,17 +125,23 @@ module.exports = {
'no-irregular-whitespace'
:
2
,
'no-iterator'
:
2
,
'no-label-var'
:
2
,
'no-labels'
:
[
2
,
{
'allowLoop'
:
false
,
'allowSwitch'
:
false
}],
'no-labels'
:
[
2
,
{
allowLoop
:
false
,
allowSwitch
:
false
}
],
'no-lone-blocks'
:
2
,
'no-mixed-spaces-and-tabs'
:
2
,
'no-multi-spaces'
:
2
,
'no-multi-str'
:
2
,
'no-multiple-empty-lines'
:
[
2
,
{
'max'
:
1
}],
'no-multiple-empty-lines'
:
[
2
,
{
max
:
1
}
],
'no-native-reassign'
:
2
,
'no-negated-in-lhs'
:
2
,
'no-new-object'
:
2
,
...
...
@@ -131,62 +169,93 @@ module.exports = {
'no-undef-init'
:
2
,
'no-unexpected-multiline'
:
2
,
'no-unmodified-loop-condition'
:
2
,
'no-unneeded-ternary'
:
[
2
,
{
'defaultAssignment'
:
false
}],
'no-unneeded-ternary'
:
[
2
,
{
defaultAssignment
:
false
}
],
'no-unreachable'
:
2
,
'no-unsafe-finally'
:
2
,
'no-unused-vars'
:
[
2
,
{
'vars'
:
'all'
,
'args'
:
'none'
}],
'no-unused-vars'
:
[
2
,
{
vars
:
'all'
,
args
:
'none'
}
],
'no-useless-call'
:
2
,
'no-useless-computed-key'
:
2
,
'no-useless-constructor'
:
2
,
'no-useless-escape'
:
0
,
'no-whitespace-before-property'
:
2
,
'no-with'
:
2
,
'one-var'
:
[
2
,
{
'initialized'
:
'never'
}],
'operator-linebreak'
:
[
2
,
'after'
,
{
'overrides'
:
{
'?'
:
'before'
,
':'
:
'before'
}
}],
'one-var'
:
[
2
,
{
initialized
:
'never'
}
],
'operator-linebreak'
:
[
2
,
'after'
,
{
overrides
:
{
'?'
:
'before'
,
':'
:
'before'
}
}
],
'padded-blocks'
:
[
2
,
'never'
],
'quotes'
:
[
2
,
'single'
,
{
'avoidEscape'
:
true
,
'allowTemplateLiterals'
:
true
}],
'semi'
:
[
2
,
'never'
],
'semi-spacing'
:
[
2
,
{
'before'
:
false
,
'after'
:
true
}],
quotes
:
[
2
,
'single'
,
{
avoidEscape
:
true
,
allowTemplateLiterals
:
true
}
],
semi
:
[
2
,
'never'
],
'semi-spacing'
:
[
2
,
{
before
:
false
,
after
:
true
}
],
'space-before-blocks'
:
[
2
,
'always'
],
'space-before-function-paren'
:
[
2
,
'never'
],
'space-in-parens'
:
[
2
,
'never'
],
'space-infix-ops'
:
2
,
'space-unary-ops'
:
[
2
,
{
'words'
:
true
,
'nonwords'
:
false
}],
'spaced-comment'
:
[
2
,
'always'
,
{
'markers'
:
[
'global'
,
'globals'
,
'eslint'
,
'eslint-disable'
,
'*package'
,
'!'
,
','
]
}],
'space-unary-ops'
:
[
2
,
{
words
:
true
,
nonwords
:
false
}
],
'spaced-comment'
:
[
2
,
'always'
,
{
markers
:
[
'global'
,
'globals'
,
'eslint'
,
'eslint-disable'
,
'*package'
,
'!'
,
','
]
}
],
'template-curly-spacing'
:
[
2
,
'never'
],
'use-isnan'
:
2
,
'valid-typeof'
:
2
,
'wrap-iife'
:
[
2
,
'any'
],
'yield-star-spacing'
:
[
2
,
'both'
],
'yoda'
:
[
2
,
'never'
],
yoda
:
[
2
,
'never'
],
'prefer-const'
:
2
,
'no-debugger'
:
process
.
env
.
NODE_ENV
===
'production'
?
2
:
0
,
'object-curly-spacing'
:
[
2
,
'always'
,
{
objectsInObjects
:
false
}],
'object-curly-spacing'
:
[
2
,
'always'
,
{
objectsInObjects
:
false
}
],
'array-bracket-spacing'
:
[
2
,
'never'
]
}
}
...
...
README.md
View file @
5f3bc05
...
...
@@ -168,7 +168,8 @@ module.exports = {
**新手必看,老鸟跳过**
很多小伙伴会问我,适配的问题。
很多小伙伴会问我,适配的问题,因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上
传到蓝湖,我们就可以需要的尺寸了。下面就大搞普及一下 rem。
我们知道
`1rem`
等于
`html`
根元素设定的
`font-size`
的
`px`
值。Vant UI 设置
`rootValue: 37.5`
,你可以看到在 iPhone 6 下
看到 (
`1rem 等于 37.5px`
):
...
...
@@ -210,6 +211,62 @@ module.exports = {
[
▲ 回顶部
](
#top
)
### <span id="vw">✅ vm 适配方案 </span>
本项目使用的是 rem 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做
。如果你想用 vw,你可以按照下面的方式切换。
#### 1.安装依赖
```
bash
npm install postcss-px-to-viewport -D
```
#### 2.修改 .postcssrc.js
将根目录下 .postcssrc.js 文件修改如下
```
javascript
// https://github.com/michael-ciniawsky/postcss-load-config
module
.
exports
=
{
plugins
:
{
autoprefixer
:
{
overrideBrowserslist
:
[
'Android 4.1'
,
'iOS 7.1'
,
'Chrome > 31'
,
'ff > 31'
,
'ie >= 8'
]
},
'postcss-px-to-viewport'
:
{
viewportWidth
:
375
,
// 视窗的宽度,对应的是我们设计稿的宽度,一般是750
unitPrecision
:
3
,
// 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit
:
'vw'
,
// 指定需要转换成的视窗单位,建议使用vw
selectorBlackList
:
[
'.ignore'
,
'.hairlines'
],
// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue
:
1
,
// 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery
:
false
// 允许在媒体查询中转换`px`
}
}
}
```
#### 3.删除原来的 rem 相关代码
src/main.js 删除如下代码
```
javascript
// 移动端适配
import
'lib-flexible/flexible.js'
```
package.json 删除如下代码
```
javascript
"lib-flexible"
:
"^0.3.2"
,
"postcss-pxtorem"
:
"^5.1.1"
,
```
运行起来,F12 元素 css 就是 vw 单位了
[
▲ 回顶部
](
#top
)
### <span id="vant">✅ VantUI 组件按需加载 </span>
项目采
...
...
@@ -365,7 +422,7 @@ Vue.prototype.$cdn = $cdn
.logo
{
width
:
120px
;
height
:
120px
;
background
:
url($cdn
+
'/weapp/logo.png')
center
/
contain
no-repeat
;
background
:
url($cdn
+
'/weapp/logo.png')
center
/
contain
no-repeat
;
}
</style>
```
...
...
@@ -900,7 +957,8 @@ module.exports = {
### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span>
VScode 安装
`eslint`
`prettier`
`vetur`
插件
VScode (版本 1.47.3)安装
`eslint`
`prettier`
`vetur`
插件
`.vue`
文件使用 vetur 进行格式化,其他使用
`prettier`
,后面会
专门写个如何使用配合使用这三个玩意
在文件
`.prettierrc`
里写 属于你的 pettier 规则
...
...
@@ -930,30 +988,144 @@ VScode 安装 `eslint` `prettier` `vetur` 插件
Vscode setting.json 设置
```
bash
"[vue]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[javascript]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
// 保存时用eslint格式化
"editor.codeActionsOnSave"
:
{
"source.fixAll.eslint"
:
true
{
// 将设置放入此文件中以覆盖默认设置
"files.autoSave"
:
"off"
,
// 控制字体系列。
"editor.fontFamily"
:
"Consolas, 'Courier New', monospace,'宋体'"
,
"terminal.integrated.shell.windows"
:
"C:
\\
Program Files
\\
Git
\\
bin
\\
bash.exe"
,
// 以像素为单位控制字号。
"editor.fontSize"
: 16,
// 控制选取范围是否有圆角
"editor.roundedSelection"
:
false
,
// 建议小组件的字号
"editor.suggestFontSize"
: 16,
// 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
"explorer.openEditors.visible"
: 0,
// 是否已启用自动刷新
"git.autorefresh"
:
true
,
// 以像素为单位控制终端的字号,这是 editor.fontSize 的默认值。
"terminal.integrated.fontSize"
: 14,
// 控制终端游标是否闪烁。
"terminal.integrated.cursorBlinking"
:
true
,
// 一个制表符等于的空格数。该设置在
`
editor.detectIndentation
`
启用时根据文件内容进行重写。
// Tab Size
"editor.tabSize"
: 2,
// By default, common template. Do not modify it!!!!!
"editor.formatOnType"
:
true
,
"window.zoomLevel"
: 0,
"editor.detectIndentation"
:
false
,
"css.fileExtensions"
:
[
"css"
,
"scss"
]
,
"files.associations"
:
{
"*.string"
:
"html"
,
"*.vue"
:
"vue"
,
"*.wxss"
:
"css"
,
"*.wxml"
:
"wxml"
,
"*.wxs"
:
"javascript"
,
"*.cjson"
:
"jsonc"
,
"*.js"
:
"javascript"
}
,
// 为指定的语法定义配置文件或使用带有特定规则的配置文件。
"emmet.syntaxProfiles"
:
{
"vue-html"
:
"html"
,
"vue"
:
"html"
}
,
"search.exclude"
:
{
"**/node_modules"
:
true
,
"**/bower_components"
:
true
}
,
//保存时eslint自动修复错误
"editor.formatOnSave"
:
true
,
// Enable per-language
//配置 ESLint 检查的文件类型
"editor.quickSuggestions"
:
{
"strings"
:
true
}
,
// 添加 vue 支持
// 这里是针对vue文件的格式化设置,vue的规则在这里生效
"vetur.format.options.tabSize"
: 2,
"vetur.format.options.useTabs"
:
false
,
"vetur.format.defaultFormatter.html"
:
"js-beautify-html"
,
"vetur.format.defaultFormatter.css"
:
"prettier"
,
"vetur.format.defaultFormatter.scss"
:
"prettier"
,
"vetur.format.defaultFormatter.postcss"
:
"prettier"
,
"vetur.format.defaultFormatter.less"
:
"prettier"
,
"vetur.format.defaultFormatter.js"
:
"vscode-typescript"
,
"vetur.format.defaultFormatter.sass"
:
"sass-formatter"
,
"vetur.format.defaultFormatter.ts"
:
"prettier"
,
"vetur.format.defaultFormatterOptions"
:
{
"js-beautify-html"
:
{
"wrap_attributes"
:
"aligned-multiple"
, // 超过150折行
"wrap-line-length"
: 150
}
,
// 两者会在格式化js时冲突,所以需要关闭默认js格式化程序
"javascript.format.enable"
:
false
,
"typescript.format.enable"
:
false
,
"vetur.format.defaultFormatter.html"
:
"none"
,
// js/ts程序用eslint,防止vetur中的prettier与eslint格式化冲突
"vetur.format.defaultFormatter.js"
:
"none"
,
"vetur.format.defaultFormatter.ts"
:
"none"
,
//
#vue组件中html代码格式化样式
"prettier"
:
{
"printWidth"
: 120,
"tabWidth"
: 2,
"singleQuote"
:
false
,
"trailingComma"
:
"none"
,
"semi"
:
false
,
"wrap_line_length"
: 120,
"wrap_attributes"
:
"aligned-multiple"
, // 超过150折行
"proseWrap"
:
"always"
,
"arrowParens"
:
"avoid"
,
"bracketSpacing"
:
true
,
"jsxBracketSameLine"
:
true
,
"useTabs"
:
false
,
"overrides"
:
[
{
"files"
:
".prettierrc"
,
"options"
:
{
"parser"
:
"json"
}
}
]
}
}
,
// Enable per-language
"[json]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"vetur.validation.template"
:
false
,
"html.format.enable"
:
false
,
"json.format.enable"
:
false
,
"javascript.format.enable"
:
false
,
"typescript.format.enable"
:
false
,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions"
:
false
,
"[html]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[javascript]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[jsonc]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
"[vue]"
:
{
"editor.defaultFormatter"
:
"octref.vetur"
}
,
"emmet.includeLanguages"
:
{
"wxml"
:
"html"
}
,
"[typescriptreact]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
}
,
// 开启eslint自动修复js/ts功能
"editor.codeActionsOnSave"
:
{
"source.fixAll.eslint"
:
true
}
,
"minapp-vscode.disableAutoConfig"
:
true
,
"javascript.implicitProjectConfig.experimentalDecorators"
:
true
,
"editor.maxTokenizationLineLength"
: 200000
}
```
[
▲ 回顶部
](
#top
)
# 鸣谢
[
vue-cli4-config
](
https://github.com/staven630/vue-cli4-config
)
[
vue-cli4-config
](
https://github.com/staven630/vue-cli4-config
)
[
vue-element-admin
](
https://github.com/PanJiaChen/vue-element-admin
)
# 关于我
...
...
package-lock.json
View file @
5f3bc05
This diff could not be displayed because it is too large.
package.json
View file @
5f3bc05
{
"name"
:
"vue-h5-template"
,
"version"
:
"2.
0
.0"
,
"version"
:
"2.
1
.0"
,
"description"
:
"A vue h5 template with Vant UI"
,
"author"
:
"Sunnie <sunniejs@163.com>"
,
"private"
:
true
,
...
...
@@ -16,28 +16,27 @@
"lib-flexible"
:
"^0.3.2"
,
"lodash"
:
"^4.17.15"
,
"regenerator-runtime"
:
"^0.13.5"
,
"vant"
:
"^2.
4.7
"
,
"vant"
:
"^2.
10.2
"
,
"vue"
:
"^2.6.11"
,
"vue-router"
:
"^3.
1.5
"
,
"vuex"
:
"^3.
1.2
"
"vue-router"
:
"^3.
2.0
"
,
"vuex"
:
"^3.
4.0
"
},
"devDependencies"
:
{
"@vue/cli-plugin-babel"
:
"~4.3.0"
,
"@vue/cli-plugin-eslint"
:
"~4.3.0"
,
"@vue/cli-service"
:
"~4.3.0"
,
"@vue/eslint-config-prettier"
:
"^6.0.0"
,
"babel-eslint"
:
"^10.0.3"
,
"@vue/cli-plugin-babel"
:
"~4.5.0"
,
"@vue/cli-plugin-eslint"
:
"~4.5.0"
,
"@vue/cli-plugin-router"
:
"~4.5.0"
,
"@vue/cli-plugin-vuex"
:
"~4.5.0"
,
"@vue/cli-service"
:
"~4.5.0"
,
"babel-eslint"
:
"^10.1.0"
,
"babel-plugin-import"
:
"^1.13.0"
,
"babel-plugin-transform-remove-console"
:
"^6.9.4"
,
"eslint"
:
"^6.7.2"
,
"eslint-plugin-prettier"
:
"^3.1.1"
,
"eslint-plugin-vue"
:
"^6.2.2"
,
"node-sass"
:
"^4.13.1"
,
"postcss-pxtorem"
:
"^4.0.1"
,
"prettier"
:
"^1.19.1"
,
"node-sass"
:
"^4.14.1"
,
"postcss-pxtorem"
:
"^5.1.1"
,
"sass-loader"
:
"^8.0.2"
,
"script-ext-html-webpack-plugin"
:
"^2.1.4"
,
"vue-template-compiler"
:
"^2.6.11"
,
"webpack-bundle-analyzer"
:
"^3.
7
.0"
"webpack-bundle-analyzer"
:
"^3.
8
.0"
}
}
...
...
vue.config.js
View file @
5f3bc05
...
...
@@ -6,6 +6,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
const
resolve
=
dir
=>
path
.
join
(
__dirname
,
dir
)
// page title
const
name
=
defaultSettings
.
title
||
'vue mobile template'
// 生产环境,测试和正式
const
IS_PROD
=
[
'production'
,
'prod'
].
includes
(
process
.
env
.
NODE_ENV
)
// externals
...
...
@@ -64,7 +65,7 @@ module.exports = {
// }
},
css
:
{
extract
:
IS_PROD
,
//是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
extract
:
IS_PROD
,
//
是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
sourceMap
:
false
,
loaderOptions
:
{
scss
:
{
...
...
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment