readme add vw and update npm
Showing
5 changed files
with
366 additions
and
125 deletions
... | @@ -3,66 +3,98 @@ module.exports = { | ... | @@ -3,66 +3,98 @@ module.exports = { |
3 | env: { | 3 | env: { |
4 | node: true | 4 | node: true |
5 | }, | 5 | }, |
6 | extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'], | 6 | extends: ['plugin:vue/essential', 'eslint:recommended'], |
7 | parserOptions: { | 7 | parserOptions: { |
8 | parser: 'babel-eslint' | 8 | parser: 'babel-eslint' |
9 | }, | 9 | }, |
10 | rules: { | 10 | rules: { |
11 | "vue/max-attributes-per-line": [2, { | 11 | 'vue/max-attributes-per-line': [ |
12 | "singleline": 10, | 12 | 2, |
13 | "multiline": { | 13 | { |
14 | "max": 1, | 14 | singleline: 10, |
15 | "allowFirstLine": false | 15 | multiline: { |
16 | } | 16 | max: 1, |
17 | }], | 17 | allowFirstLine: false |
18 | "vue/singleline-html-element-content-newline": "off", | 18 | } |
19 | "vue/multiline-html-element-content-newline":"off", | 19 | } |
20 | "vue/name-property-casing": ["error", "PascalCase"], | 20 | ], |
21 | "vue/no-v-html": "off", | 21 | 'vue/singleline-html-element-content-newline': 'off', |
22 | 'vue/multiline-html-element-content-newline': 'off', | ||
23 | 'vue/name-property-casing': ['error', 'PascalCase'], | ||
24 | 'vue/no-v-html': 'off', | ||
22 | 'accessor-pairs': 2, | 25 | 'accessor-pairs': 2, |
23 | 'arrow-spacing': [2, { | 26 | 'arrow-spacing': [ |
24 | 'before': true, | 27 | 2, |
25 | 'after': true | 28 | { |
26 | }], | 29 | before: true, |
30 | after: true | ||
31 | } | ||
32 | ], | ||
27 | 'block-spacing': [2, 'always'], | 33 | 'block-spacing': [2, 'always'], |
28 | 'brace-style': [2, '1tbs', { | 34 | 'brace-style': [ |
29 | 'allowSingleLine': true | 35 | 2, |
30 | }], | 36 | '1tbs', |
31 | 'camelcase': [0, { | 37 | { |
32 | 'properties': 'always' | 38 | allowSingleLine: true |
33 | }], | 39 | } |
40 | ], | ||
41 | camelcase: [ | ||
42 | 0, | ||
43 | { | ||
44 | properties: 'always' | ||
45 | } | ||
46 | ], | ||
34 | 'comma-dangle': [2, 'never'], | 47 | 'comma-dangle': [2, 'never'], |
35 | 'comma-spacing': [2, { | 48 | 'comma-spacing': [ |
36 | 'before': false, | 49 | 2, |
37 | 'after': true | 50 | { |
38 | }], | 51 | before: false, |
52 | after: true | ||
53 | } | ||
54 | ], | ||
39 | 'comma-style': [2, 'last'], | 55 | 'comma-style': [2, 'last'], |
40 | 'constructor-super': 2, | 56 | 'constructor-super': 2, |
41 | 'curly': [2, 'multi-line'], | 57 | curly: [2, 'multi-line'], |
42 | 'dot-location': [2, 'property'], | 58 | 'dot-location': [2, 'property'], |
43 | 'eol-last': 2, | 59 | 'eol-last': 2, |
44 | 'eqeqeq': ["error", "always", {"null": "ignore"}], | 60 | eqeqeq: ['error', 'always', { null: 'ignore' }], |
45 | 'generator-star-spacing': [2, { | 61 | 'generator-star-spacing': [ |
46 | 'before': true, | 62 | 2, |
47 | 'after': true | 63 | { |
48 | }], | 64 | before: true, |
65 | after: true | ||
66 | } | ||
67 | ], | ||
49 | 'handle-callback-err': [2, '^(err|error)$'], | 68 | 'handle-callback-err': [2, '^(err|error)$'], |
50 | 'indent': [2, 2, { | 69 | indent: [ |
51 | 'SwitchCase': 1 | 70 | 2, |
52 | }], | 71 | 2, |
72 | { | ||
73 | SwitchCase: 1 | ||
74 | } | ||
75 | ], | ||
53 | 'jsx-quotes': [2, 'prefer-single'], | 76 | 'jsx-quotes': [2, 'prefer-single'], |
54 | 'key-spacing': [2, { | 77 | 'key-spacing': [ |
55 | 'beforeColon': false, | 78 | 2, |
56 | 'afterColon': true | 79 | { |
57 | }], | 80 | beforeColon: false, |
58 | 'keyword-spacing': [2, { | 81 | afterColon: true |
59 | 'before': true, | 82 | } |
60 | 'after': true | 83 | ], |
61 | }], | 84 | 'keyword-spacing': [ |
62 | 'new-cap': [2, { | 85 | 2, |
63 | 'newIsCap': true, | 86 | { |
64 | 'capIsNew': false | 87 | before: true, |
65 | }], | 88 | after: true |
89 | } | ||
90 | ], | ||
91 | 'new-cap': [ | ||
92 | 2, | ||
93 | { | ||
94 | newIsCap: true, | ||
95 | capIsNew: false | ||
96 | } | ||
97 | ], | ||
66 | 'new-parens': 2, | 98 | 'new-parens': 2, |
67 | 'no-array-constructor': 2, | 99 | 'no-array-constructor': 2, |
68 | 'no-caller': 2, | 100 | 'no-caller': 2, |
... | @@ -93,17 +125,23 @@ module.exports = { | ... | @@ -93,17 +125,23 @@ module.exports = { |
93 | 'no-irregular-whitespace': 2, | 125 | 'no-irregular-whitespace': 2, |
94 | 'no-iterator': 2, | 126 | 'no-iterator': 2, |
95 | 'no-label-var': 2, | 127 | 'no-label-var': 2, |
96 | 'no-labels': [2, { | 128 | 'no-labels': [ |
97 | 'allowLoop': false, | 129 | 2, |
98 | 'allowSwitch': false | 130 | { |
99 | }], | 131 | allowLoop: false, |
132 | allowSwitch: false | ||
133 | } | ||
134 | ], | ||
100 | 'no-lone-blocks': 2, | 135 | 'no-lone-blocks': 2, |
101 | 'no-mixed-spaces-and-tabs': 2, | 136 | 'no-mixed-spaces-and-tabs': 2, |
102 | 'no-multi-spaces': 2, | 137 | 'no-multi-spaces': 2, |
103 | 'no-multi-str': 2, | 138 | 'no-multi-str': 2, |
104 | 'no-multiple-empty-lines': [2, { | 139 | 'no-multiple-empty-lines': [ |
105 | 'max': 1 | 140 | 2, |
106 | }], | 141 | { |
142 | max: 1 | ||
143 | } | ||
144 | ], | ||
107 | 'no-native-reassign': 2, | 145 | 'no-native-reassign': 2, |
108 | 'no-negated-in-lhs': 2, | 146 | 'no-negated-in-lhs': 2, |
109 | 'no-new-object': 2, | 147 | 'no-new-object': 2, |
... | @@ -131,62 +169,93 @@ module.exports = { | ... | @@ -131,62 +169,93 @@ module.exports = { |
131 | 'no-undef-init': 2, | 169 | 'no-undef-init': 2, |
132 | 'no-unexpected-multiline': 2, | 170 | 'no-unexpected-multiline': 2, |
133 | 'no-unmodified-loop-condition': 2, | 171 | 'no-unmodified-loop-condition': 2, |
134 | 'no-unneeded-ternary': [2, { | 172 | 'no-unneeded-ternary': [ |
135 | 'defaultAssignment': false | 173 | 2, |
136 | }], | 174 | { |
175 | defaultAssignment: false | ||
176 | } | ||
177 | ], | ||
137 | 'no-unreachable': 2, | 178 | 'no-unreachable': 2, |
138 | 'no-unsafe-finally': 2, | 179 | 'no-unsafe-finally': 2, |
139 | 'no-unused-vars': [2, { | 180 | 'no-unused-vars': [ |
140 | 'vars': 'all', | 181 | 2, |
141 | 'args': 'none' | 182 | { |
142 | }], | 183 | vars: 'all', |
184 | args: 'none' | ||
185 | } | ||
186 | ], | ||
143 | 'no-useless-call': 2, | 187 | 'no-useless-call': 2, |
144 | 'no-useless-computed-key': 2, | 188 | 'no-useless-computed-key': 2, |
145 | 'no-useless-constructor': 2, | 189 | 'no-useless-constructor': 2, |
146 | 'no-useless-escape': 0, | 190 | 'no-useless-escape': 0, |
147 | 'no-whitespace-before-property': 2, | 191 | 'no-whitespace-before-property': 2, |
148 | 'no-with': 2, | 192 | 'no-with': 2, |
149 | 'one-var': [2, { | 193 | 'one-var': [ |
150 | 'initialized': 'never' | 194 | 2, |
151 | }], | 195 | { |
152 | 'operator-linebreak': [2, 'after', { | 196 | initialized: 'never' |
153 | 'overrides': { | 197 | } |
154 | '?': 'before', | 198 | ], |
155 | ':': 'before' | 199 | 'operator-linebreak': [ |
156 | } | 200 | 2, |
157 | }], | 201 | 'after', |
202 | { | ||
203 | overrides: { | ||
204 | '?': 'before', | ||
205 | ':': 'before' | ||
206 | } | ||
207 | } | ||
208 | ], | ||
158 | 'padded-blocks': [2, 'never'], | 209 | 'padded-blocks': [2, 'never'], |
159 | 'quotes': [2, 'single', { | 210 | quotes: [ |
160 | 'avoidEscape': true, | 211 | 2, |
161 | 'allowTemplateLiterals': true | 212 | 'single', |
162 | }], | 213 | { |
163 | 'semi': [2, 'never'], | 214 | avoidEscape: true, |
164 | 'semi-spacing': [2, { | 215 | allowTemplateLiterals: true |
165 | 'before': false, | 216 | } |
166 | 'after': true | 217 | ], |
167 | }], | 218 | semi: [2, 'never'], |
219 | 'semi-spacing': [ | ||
220 | 2, | ||
221 | { | ||
222 | before: false, | ||
223 | after: true | ||
224 | } | ||
225 | ], | ||
168 | 'space-before-blocks': [2, 'always'], | 226 | 'space-before-blocks': [2, 'always'], |
169 | 'space-before-function-paren': [2, 'never'], | 227 | 'space-before-function-paren': [2, 'never'], |
170 | 'space-in-parens': [2, 'never'], | 228 | 'space-in-parens': [2, 'never'], |
171 | 'space-infix-ops': 2, | 229 | 'space-infix-ops': 2, |
172 | 'space-unary-ops': [2, { | 230 | 'space-unary-ops': [ |
173 | 'words': true, | 231 | 2, |
174 | 'nonwords': false | 232 | { |
175 | }], | 233 | words: true, |
176 | 'spaced-comment': [2, 'always', { | 234 | nonwords: false |
177 | 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] | 235 | } |
178 | }], | 236 | ], |
237 | 'spaced-comment': [ | ||
238 | 2, | ||
239 | 'always', | ||
240 | { | ||
241 | markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] | ||
242 | } | ||
243 | ], | ||
179 | 'template-curly-spacing': [2, 'never'], | 244 | 'template-curly-spacing': [2, 'never'], |
180 | 'use-isnan': 2, | 245 | 'use-isnan': 2, |
181 | 'valid-typeof': 2, | 246 | 'valid-typeof': 2, |
182 | 'wrap-iife': [2, 'any'], | 247 | 'wrap-iife': [2, 'any'], |
183 | 'yield-star-spacing': [2, 'both'], | 248 | 'yield-star-spacing': [2, 'both'], |
184 | 'yoda': [2, 'never'], | 249 | yoda: [2, 'never'], |
185 | 'prefer-const': 2, | 250 | 'prefer-const': 2, |
186 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, | 251 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, |
187 | 'object-curly-spacing': [2, 'always', { | 252 | 'object-curly-spacing': [ |
188 | objectsInObjects: false | 253 | 2, |
189 | }], | 254 | 'always', |
255 | { | ||
256 | objectsInObjects: false | ||
257 | } | ||
258 | ], | ||
190 | 'array-bracket-spacing': [2, 'never'] | 259 | 'array-bracket-spacing': [2, 'never'] |
191 | } | 260 | } |
192 | } | 261 | } | ... | ... |
... | @@ -168,7 +168,8 @@ module.exports = { | ... | @@ -168,7 +168,8 @@ module.exports = { |
168 | 168 | ||
169 | **新手必看,老鸟跳过** | 169 | **新手必看,老鸟跳过** |
170 | 170 | ||
171 | 很多小伙伴会问我,适配的问题。 | 171 | 很多小伙伴会问我,适配的问题,因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上 |
172 | 传到蓝湖,我们就可以需要的尺寸了。下面就大搞普及一下 rem。 | ||
172 | 173 | ||
173 | 我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 | 174 | 我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 |
174 | 看到 (`1rem 等于 37.5px`): | 175 | 看到 (`1rem 等于 37.5px`): |
... | @@ -210,6 +211,62 @@ module.exports = { | ... | @@ -210,6 +211,62 @@ module.exports = { |
210 | 211 | ||
211 | [▲ 回顶部](#top) | 212 | [▲ 回顶部](#top) |
212 | 213 | ||
214 | ### <span id="vw">✅ vm 适配方案 </span> | ||
215 | |||
216 | 本项目使用的是 rem 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做 | ||
217 | 。如果你想用 vw,你可以按照下面的方式切换。 | ||
218 | |||
219 | #### 1.安装依赖 | ||
220 | |||
221 | ```bash | ||
222 | |||
223 | npm install postcss-px-to-viewport -D | ||
224 | |||
225 | ``` | ||
226 | |||
227 | #### 2.修改 .postcssrc.js | ||
228 | |||
229 | 将根目录下 .postcssrc.js 文件修改如下 | ||
230 | |||
231 | ```javascript | ||
232 | // https://github.com/michael-ciniawsky/postcss-load-config | ||
233 | module.exports = { | ||
234 | plugins: { | ||
235 | autoprefixer: { | ||
236 | overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] | ||
237 | }, | ||
238 | 'postcss-px-to-viewport': { | ||
239 | viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 | ||
240 | unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) | ||
241 | viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw | ||
242 | selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 | ||
243 | minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 | ||
244 | mediaQuery: false // 允许在媒体查询中转换`px` | ||
245 | } | ||
246 | } | ||
247 | } | ||
248 | ``` | ||
249 | |||
250 | #### 3.删除原来的 rem 相关代码 | ||
251 | |||
252 | src/main.js 删除如下代码 | ||
253 | |||
254 | ```javascript | ||
255 | // 移动端适配 | ||
256 | import 'lib-flexible/flexible.js' | ||
257 | ``` | ||
258 | |||
259 | package.json 删除如下代码 | ||
260 | |||
261 | ```javascript | ||
262 | "lib-flexible": "^0.3.2", | ||
263 | "postcss-pxtorem": "^5.1.1", | ||
264 | ``` | ||
265 | |||
266 | 运行起来,F12 元素 css 就是 vw 单位了 | ||
267 | |||
268 | [▲ 回顶部](#top) | ||
269 | |||
213 | ### <span id="vant">✅ VantUI 组件按需加载 </span> | 270 | ### <span id="vant">✅ VantUI 组件按需加载 </span> |
214 | 271 | ||
215 | 项目采 | 272 | 项目采 |
... | @@ -365,7 +422,7 @@ Vue.prototype.$cdn = $cdn | ... | @@ -365,7 +422,7 @@ Vue.prototype.$cdn = $cdn |
365 | .logo { | 422 | .logo { |
366 | width: 120px; | 423 | width: 120px; |
367 | height: 120px; | 424 | height: 120px; |
368 | background: url($cdn+'/weapp/logo.png') center / contain no-repeat; | 425 | background: url($cdn + '/weapp/logo.png') center / contain no-repeat; |
369 | } | 426 | } |
370 | </style> | 427 | </style> |
371 | ``` | 428 | ``` |
... | @@ -900,7 +957,8 @@ module.exports = { | ... | @@ -900,7 +957,8 @@ module.exports = { |
900 | 957 | ||
901 | ### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span> | 958 | ### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span> |
902 | 959 | ||
903 | VScode 安装 `eslint` `prettier` `vetur` 插件 | 960 | VScode (版本 1.47.3)安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化,其他使用`prettier`,后面会 |
961 | 专门写个如何使用配合使用这三个玩意 | ||
904 | 962 | ||
905 | 在文件 `.prettierrc` 里写 属于你的 pettier 规则 | 963 | 在文件 `.prettierrc` 里写 属于你的 pettier 规则 |
906 | 964 | ||
... | @@ -930,30 +988,144 @@ VScode 安装 `eslint` `prettier` `vetur` 插件 | ... | @@ -930,30 +988,144 @@ VScode 安装 `eslint` `prettier` `vetur` 插件 |
930 | Vscode setting.json 设置 | 988 | Vscode setting.json 设置 |
931 | 989 | ||
932 | ```bash | 990 | ```bash |
933 | "[vue]": { | 991 | { |
934 | "editor.defaultFormatter": "esbenp.prettier-vscode" | 992 | // 将设置放入此文件中以覆盖默认设置 |
935 | }, | 993 | "files.autoSave": "off", |
936 | "[javascript]": { | 994 | // 控制字体系列。 |
937 | "editor.defaultFormatter": "esbenp.prettier-vscode" | 995 | "editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'", |
938 | }, | 996 | "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe", |
939 | // 保存时用eslint格式化 | 997 | // 以像素为单位控制字号。 |
940 | "editor.codeActionsOnSave": { | 998 | "editor.fontSize": 16, |
941 | "source.fixAll.eslint": true | 999 | // 控制选取范围是否有圆角 |
1000 | "editor.roundedSelection": false, | ||
1001 | // 建议小组件的字号 | ||
1002 | "editor.suggestFontSize": 16, | ||
1003 | // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。 | ||
1004 | "explorer.openEditors.visible": 0, | ||
1005 | // 是否已启用自动刷新 | ||
1006 | "git.autorefresh": true, | ||
1007 | // 以像素为单位控制终端的字号,这是 editor.fontSize 的默认值。 | ||
1008 | "terminal.integrated.fontSize": 14, | ||
1009 | // 控制终端游标是否闪烁。 | ||
1010 | "terminal.integrated.cursorBlinking": true, | ||
1011 | // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。 | ||
1012 | // Tab Size | ||
1013 | "editor.tabSize": 2, | ||
1014 | // By default, common template. Do not modify it!!!!! | ||
1015 | "editor.formatOnType": true, | ||
1016 | "window.zoomLevel": 0, | ||
1017 | "editor.detectIndentation": false, | ||
1018 | "css.fileExtensions": ["css", "scss"], | ||
1019 | "files.associations": { | ||
1020 | "*.string": "html", | ||
1021 | "*.vue": "vue", | ||
1022 | "*.wxss": "css", | ||
1023 | "*.wxml": "wxml", | ||
1024 | "*.wxs": "javascript", | ||
1025 | "*.cjson": "jsonc", | ||
1026 | "*.js": "javascript" | ||
1027 | }, | ||
1028 | // 为指定的语法定义配置文件或使用带有特定规则的配置文件。 | ||
1029 | "emmet.syntaxProfiles": { | ||
1030 | "vue-html": "html", | ||
1031 | "vue": "html" | ||
1032 | }, | ||
1033 | "search.exclude": { | ||
1034 | "**/node_modules": true, | ||
1035 | "**/bower_components": true | ||
1036 | }, | ||
1037 | //保存时eslint自动修复错误 | ||
1038 | "editor.formatOnSave": true, | ||
1039 | // Enable per-language | ||
1040 | //配置 ESLint 检查的文件类型 | ||
1041 | "editor.quickSuggestions": { | ||
1042 | "strings": true | ||
1043 | }, | ||
1044 | // 添加 vue 支持 | ||
1045 | // 这里是针对vue文件的格式化设置,vue的规则在这里生效 | ||
1046 | "vetur.format.options.tabSize": 2, | ||
1047 | "vetur.format.options.useTabs": false, | ||
1048 | "vetur.format.defaultFormatter.html": "js-beautify-html", | ||
1049 | "vetur.format.defaultFormatter.css": "prettier", | ||
1050 | "vetur.format.defaultFormatter.scss": "prettier", | ||
1051 | "vetur.format.defaultFormatter.postcss": "prettier", | ||
1052 | "vetur.format.defaultFormatter.less": "prettier", | ||
1053 | "vetur.format.defaultFormatter.js": "vscode-typescript", | ||
1054 | "vetur.format.defaultFormatter.sass": "sass-formatter", | ||
1055 | "vetur.format.defaultFormatter.ts": "prettier", | ||
1056 | "vetur.format.defaultFormatterOptions": { | ||
1057 | "js-beautify-html": { | ||
1058 | "wrap_attributes": "aligned-multiple", // 超过150折行 | ||
1059 | "wrap-line-length": 150 | ||
942 | }, | 1060 | }, |
943 | // 两者会在格式化js时冲突,所以需要关闭默认js格式化程序 | 1061 | // #vue组件中html代码格式化样式 |
944 | "javascript.format.enable": false, | 1062 | "prettier": { |
945 | "typescript.format.enable": false, | 1063 | "printWidth": 120, |
946 | "vetur.format.defaultFormatter.html": "none", | 1064 | "tabWidth": 2, |
947 | // js/ts程序用eslint,防止vetur中的prettier与eslint格式化冲突 | 1065 | "singleQuote": false, |
948 | "vetur.format.defaultFormatter.js": "none", | 1066 | "trailingComma": "none", |
949 | "vetur.format.defaultFormatter.ts": "none", | 1067 | "semi": false, |
1068 | "wrap_line_length": 120, | ||
1069 | "wrap_attributes": "aligned-multiple", // 超过150折行 | ||
1070 | "proseWrap": "always", | ||
1071 | "arrowParens": "avoid", | ||
1072 | "bracketSpacing": true, | ||
1073 | "jsxBracketSameLine": true, | ||
1074 | "useTabs": false, | ||
1075 | "overrides": [ | ||
1076 | { | ||
1077 | "files": ".prettierrc", | ||
1078 | "options": { | ||
1079 | "parser": "json" | ||
1080 | } | ||
1081 | } | ||
1082 | ] | ||
1083 | } | ||
1084 | }, | ||
1085 | // Enable per-language | ||
1086 | "[json]": { | ||
1087 | "editor.defaultFormatter": "esbenp.prettier-vscode" | ||
1088 | }, | ||
1089 | "vetur.validation.template": false, | ||
1090 | "html.format.enable": false, | ||
1091 | "json.format.enable": false, | ||
1092 | "javascript.format.enable": false, | ||
1093 | "typescript.format.enable": false, | ||
1094 | "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false, | ||
1095 | "[html]": { | ||
1096 | "editor.defaultFormatter": "esbenp.prettier-vscode" | ||
1097 | }, | ||
1098 | "[javascript]": { | ||
1099 | "editor.defaultFormatter": "esbenp.prettier-vscode" | ||
1100 | }, | ||
1101 | "[jsonc]": { | ||
1102 | "editor.defaultFormatter": "esbenp.prettier-vscode" | ||
1103 | }, | ||
1104 | "[vue]": { | ||
1105 | "editor.defaultFormatter": "octref.vetur" | ||
1106 | }, | ||
1107 | "emmet.includeLanguages": { | ||
1108 | "wxml": "html" | ||
1109 | }, | ||
1110 | "[typescriptreact]": { | ||
1111 | "editor.defaultFormatter": "esbenp.prettier-vscode" | ||
1112 | }, | ||
1113 | // 开启eslint自动修复js/ts功能 | ||
1114 | "editor.codeActionsOnSave": { | ||
1115 | "source.fixAll.eslint": true | ||
1116 | }, | ||
1117 | "minapp-vscode.disableAutoConfig": true, | ||
1118 | "javascript.implicitProjectConfig.experimentalDecorators": true, | ||
1119 | "editor.maxTokenizationLineLength": 200000 | ||
1120 | } | ||
1121 | |||
950 | ``` | 1122 | ``` |
951 | 1123 | ||
952 | [▲ 回顶部](#top) | 1124 | [▲ 回顶部](#top) |
953 | 1125 | ||
954 | # 鸣谢 | 1126 | # 鸣谢 |
955 | 1127 | ||
956 | [vue-cli4-config](https://github.com/staven630/vue-cli4-config) | 1128 | [vue-cli4-config](https://github.com/staven630/vue-cli4-config) |
957 | [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) | 1129 | [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) |
958 | 1130 | ||
959 | # 关于我 | 1131 | # 关于我 | ... | ... |
This diff could not be displayed because it is too large.
1 | { | 1 | { |
2 | "name": "vue-h5-template", | 2 | "name": "vue-h5-template", |
3 | "version": "2.0.0", | 3 | "version": "2.1.0", |
4 | "description": "A vue h5 template with Vant UI", | 4 | "description": "A vue h5 template with Vant UI", |
5 | "author": "Sunnie <sunniejs@163.com>", | 5 | "author": "Sunnie <sunniejs@163.com>", |
6 | "private": true, | 6 | "private": true, |
... | @@ -16,28 +16,27 @@ | ... | @@ -16,28 +16,27 @@ |
16 | "lib-flexible": "^0.3.2", | 16 | "lib-flexible": "^0.3.2", |
17 | "lodash": "^4.17.15", | 17 | "lodash": "^4.17.15", |
18 | "regenerator-runtime": "^0.13.5", | 18 | "regenerator-runtime": "^0.13.5", |
19 | "vant": "^2.4.7", | 19 | "vant": "^2.10.2", |
20 | "vue": "^2.6.11", | 20 | "vue": "^2.6.11", |
21 | "vue-router": "^3.1.5", | 21 | "vue-router": "^3.2.0", |
22 | "vuex": "^3.1.2" | 22 | "vuex": "^3.4.0" |
23 | }, | 23 | }, |
24 | "devDependencies": { | 24 | "devDependencies": { |
25 | "@vue/cli-plugin-babel": "~4.3.0", | 25 | "@vue/cli-plugin-babel": "~4.5.0", |
26 | "@vue/cli-plugin-eslint": "~4.3.0", | 26 | "@vue/cli-plugin-eslint": "~4.5.0", |
27 | "@vue/cli-service": "~4.3.0", | 27 | "@vue/cli-plugin-router": "~4.5.0", |
28 | "@vue/eslint-config-prettier": "^6.0.0", | 28 | "@vue/cli-plugin-vuex": "~4.5.0", |
29 | "babel-eslint": "^10.0.3", | 29 | "@vue/cli-service": "~4.5.0", |
30 | "babel-eslint": "^10.1.0", | ||
30 | "babel-plugin-import": "^1.13.0", | 31 | "babel-plugin-import": "^1.13.0", |
31 | "babel-plugin-transform-remove-console": "^6.9.4", | 32 | "babel-plugin-transform-remove-console": "^6.9.4", |
32 | "eslint": "^6.7.2", | 33 | "eslint": "^6.7.2", |
33 | "eslint-plugin-prettier": "^3.1.1", | ||
34 | "eslint-plugin-vue": "^6.2.2", | 34 | "eslint-plugin-vue": "^6.2.2", |
35 | "node-sass": "^4.13.1", | 35 | "node-sass": "^4.14.1", |
36 | "postcss-pxtorem": "^4.0.1", | 36 | "postcss-pxtorem": "^5.1.1", |
37 | "prettier": "^1.19.1", | ||
38 | "sass-loader": "^8.0.2", | 37 | "sass-loader": "^8.0.2", |
39 | "script-ext-html-webpack-plugin": "^2.1.4", | 38 | "script-ext-html-webpack-plugin": "^2.1.4", |
40 | "vue-template-compiler": "^2.6.11", | 39 | "vue-template-compiler": "^2.6.11", |
41 | "webpack-bundle-analyzer": "^3.7.0" | 40 | "webpack-bundle-analyzer": "^3.8.0" |
42 | } | 41 | } |
43 | } | 42 | } | ... | ... |
... | @@ -6,6 +6,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl | ... | @@ -6,6 +6,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl |
6 | const resolve = dir => path.join(__dirname, dir) | 6 | const resolve = dir => path.join(__dirname, dir) |
7 | // page title | 7 | // page title |
8 | const name = defaultSettings.title || 'vue mobile template' | 8 | const name = defaultSettings.title || 'vue mobile template' |
9 | // 生产环境,测试和正式 | ||
9 | const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) | 10 | const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) |
10 | 11 | ||
11 | // externals | 12 | // externals |
... | @@ -64,7 +65,7 @@ module.exports = { | ... | @@ -64,7 +65,7 @@ module.exports = { |
64 | // } | 65 | // } |
65 | }, | 66 | }, |
66 | css: { | 67 | css: { |
67 | extract: IS_PROD, //是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 | 68 | extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 |
68 | sourceMap: false, | 69 | sourceMap: false, |
69 | loaderOptions: { | 70 | loaderOptions: { |
70 | scss: { | 71 | scss: { | ... | ... |
-
Please register or sign in to post a comment