ie
Showing
6 changed files
with
62 additions
and
21 deletions
... | @@ -4,10 +4,10 @@ | ... | @@ -4,10 +4,10 @@ |
4 | 4 | ||
5 | 掘金: [vue-cli4 vant rem 移动端框架方案](https://juejin.im/post/5cfefc73f265da1bba58f9f7) | 5 | 掘金: [vue-cli4 vant rem 移动端框架方案](https://juejin.im/post/5cfefc73f265da1bba58f9f7) |
6 | 6 | ||
7 | [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看 | 7 | [查看 demo](https://solui.cn/vue-h5-template/#/) 建议手机端查看 |
8 | 8 | ||
9 | <p> | 9 | <p> |
10 | <img src="./static/demo.png" width="256" style="display:inline;"> | 10 | <img src="./static/demo.png" width="300" style="display:inline;"> |
11 | </p> | 11 | </p> |
12 | 12 | ||
13 | ### Node 版本要求 | 13 | ### Node 版本要求 |
... | @@ -29,9 +29,10 @@ npm install | ... | @@ -29,9 +29,10 @@ npm install |
29 | 29 | ||
30 | npm run serve | 30 | npm run serve |
31 | ``` | 31 | ``` |
32 | |||
32 | <span id="top">目录</span> | 33 | <span id="top">目录</span> |
33 | 34 | ||
34 | - [√ Vue-cli4](https://cli.vuejs.org/zh/guide/){:target="_blank"} | 35 | - √ Vue-cli4 |
35 | - [√ 配置多环境变量](#env) | 36 | - [√ 配置多环境变量](#env) |
36 | - [√ rem 适配方案](#rem) | 37 | - [√ rem 适配方案](#rem) |
37 | - [√ VantUI 组件按需加载](#vant) | 38 | - [√ VantUI 组件按需加载](#vant) |
... | @@ -368,12 +369,10 @@ new Vue({ | ... | @@ -368,12 +369,10 @@ new Vue({ |
368 | 369 | ||
369 | ```html | 370 | ```html |
370 | <script> | 371 | <script> |
371 | import { mapGetters } from 'vuex' | 372 | import {mapGetters} from 'vuex' |
372 | export default { | 373 | export default { |
373 | computed: { | 374 | computed: { |
374 | ...mapGetters([ | 375 | ...mapGetters(['userName']) |
375 | 'userName' | ||
376 | ]) | ||
377 | }, | 376 | }, |
378 | 377 | ||
379 | methods: { | 378 | methods: { |
... | @@ -382,9 +381,10 @@ export default { | ... | @@ -382,9 +381,10 @@ export default { |
382 | this.$store.dispatch('setUserName', '真乖,赶紧关注公众号,组织都在等你~') | 381 | this.$store.dispatch('setUserName', '真乖,赶紧关注公众号,组织都在等你~') |
383 | } | 382 | } |
384 | } | 383 | } |
385 | } | 384 | } |
386 | </script> | 385 | </script> |
387 | ``` | 386 | ``` |
387 | |||
388 | [▲ 回顶部](#top) | 388 | [▲ 回顶部](#top) |
389 | 389 | ||
390 | ### <span id="router">✅ Vue-router </span> | 390 | ### <span id="router">✅ Vue-router </span> |
... | @@ -834,14 +834,23 @@ module.exports = { | ... | @@ -834,14 +834,23 @@ module.exports = { |
834 | 834 | ||
835 | ### <span id="ie">✅ 添加 IE 兼容 </span> | 835 | ### <span id="ie">✅ 添加 IE 兼容 </span> |
836 | 836 | ||
837 | 之前的方式 会报 `@babel/polyfill` is deprecated. Please, use required parts of `core-js` and | ||
838 | `regenerator-runtime/runtime` separately | ||
839 | |||
840 | `@babel/polyfill` 废弃,使用 `core-js` 和 `regenerator-runtime` | ||
841 | |||
837 | ```bash | 842 | ```bash |
838 | npm i -S @babel/polyfill | 843 | npm i --save core-js regenerator-runtime |
839 | ``` | 844 | ``` |
840 | 845 | ||
841 | 在 `main.js` 中添加 | 846 | 在 `main.js` 中添加 |
842 | 847 | ||
843 | ```javascript | 848 | ```javascript |
844 | import '@babel/polyfill' | 849 | // 兼容 IE |
850 | // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill | ||
851 | import 'core-js/stable' | ||
852 | import 'regenerator-runtime/runtime' | ||
853 | |||
845 | ``` | 854 | ``` |
846 | 855 | ||
847 | 配置 `babel.config.js` | 856 | 配置 `babel.config.js` |
... | @@ -850,16 +859,42 @@ import '@babel/polyfill' | ... | @@ -850,16 +859,42 @@ import '@babel/polyfill' |
850 | const plugins = [] | 859 | const plugins = [] |
851 | 860 | ||
852 | module.exports = { | 861 | module.exports = { |
853 | presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]], | 862 | presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]], |
854 | plugins | 863 | plugins |
855 | } | 864 | } |
856 | ``` | 865 | ``` |
857 | 866 | ||
858 | [▲ 回顶部](#top) | 867 | [▲ 回顶部](#top) |
859 | 868 | ||
860 | #### 总结 | 869 | ### <span id="pettier">✅ Eslint+Pettier 统一开发规范 </span> |
870 | |||
871 | 在文件 `.prettierrc` 里写 属于你的 pettier 规则 | ||
872 | |||
873 | ```bash | ||
874 | { | ||
875 | "printWidth": 120, | ||
876 | "tabWidth": 2, | ||
877 | "singleQuote": true, | ||
878 | "trailingComma": "none", | ||
879 | "semi": false, | ||
880 | "wrap_line_length": 120, | ||
881 | "wrap_attributes": "auto", | ||
882 | "proseWrap": "always", | ||
883 | "arrowParens": "avoid", | ||
884 | "bracketSpacing": false, | ||
885 | "jsxBracketSameLine": true, | ||
886 | "useTabs": false, | ||
887 | "overrides": [{ | ||
888 | "files": ".prettierrc", | ||
889 | "options": { | ||
890 | "parser": "json" | ||
891 | } | ||
892 | }] | ||
893 | } | ||
894 | ``` | ||
895 | |||
896 | [▲ 回顶部](#top) | ||
861 | 897 | ||
862 | 因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长 | ||
863 | 898 | ||
864 | # 关于我 | 899 | # 关于我 |
865 | 900 | ||
... | @@ -870,6 +905,7 @@ module.exports = { | ... | @@ -870,6 +905,7 @@ module.exports = { |
870 | <p> | 905 | <p> |
871 | <img src="./static/gognzhonghao.jpg" width="256" style="display:inline;"> | 906 | <img src="./static/gognzhonghao.jpg" width="256" style="display:inline;"> |
872 | </p> | 907 | </p> |
908 | |||
873 | 扫描添加下方的微信并备注 Sol 加交流群,交流学习,及时获取代码最新动态。 | 909 | 扫描添加下方的微信并备注 Sol 加交流群,交流学习,及时获取代码最新动态。 |
874 | 910 | ||
875 | <p> | 911 | <p> | ... | ... |
... | @@ -17,6 +17,6 @@ if (IS_PROD) { | ... | @@ -17,6 +17,6 @@ if (IS_PROD) { |
17 | } | 17 | } |
18 | 18 | ||
19 | module.exports = { | 19 | module.exports = { |
20 | presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]], | 20 | presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]], |
21 | plugins | 21 | plugins |
22 | } | 22 | } | ... | ... |
This diff could not be displayed because it is too large.
... | @@ -15,13 +15,13 @@ | ... | @@ -15,13 +15,13 @@ |
15 | "core-js": "^3.6.4", | 15 | "core-js": "^3.6.4", |
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 | "vant": "^2.4.7", | 19 | "vant": "^2.4.7", |
19 | "vue": "^2.6.11", | 20 | "vue": "^2.6.11", |
20 | "vue-router": "^3.1.5", | 21 | "vue-router": "^3.1.5", |
21 | "vuex": "^3.1.2" | 22 | "vuex": "^3.1.2" |
22 | }, | 23 | }, |
23 | "devDependencies": { | 24 | "devDependencies": { |
24 | "@babel/polyfill": "^7.8.3", | ||
25 | "@vue/cli-plugin-babel": "~4.2.0", | 25 | "@vue/cli-plugin-babel": "~4.2.0", |
26 | "@vue/cli-plugin-eslint": "~4.2.0", | 26 | "@vue/cli-plugin-eslint": "~4.2.0", |
27 | "@vue/cli-service": "~4.2.0", | 27 | "@vue/cli-service": "~4.2.0", | ... | ... |
1 | // IE 兼容 | 1 | // 兼容 IE |
2 | import '@babel/polyfill' | 2 | // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill |
3 | import 'core-js/stable' | ||
4 | import 'regenerator-runtime/runtime' | ||
5 | |||
3 | import Vue from 'vue' | 6 | import Vue from 'vue' |
4 | import App from './App.vue' | 7 | import App from './App.vue' |
5 | import router from './router' | 8 | import router from './router' | ... | ... |
... | @@ -31,16 +31,18 @@ export default { | ... | @@ -31,16 +31,18 @@ export default { |
31 | '配置 externals 引入 cdn 资源', | 31 | '配置 externals 引入 cdn 资源', |
32 | '去掉 console.log', | 32 | '去掉 console.log', |
33 | 'splitChunks 单独打包第三方模块', | 33 | 'splitChunks 单独打包第三方模块', |
34 | ' 添加 IE 兼容' | 34 | '添加 IE 兼容', |
35 | 'Eslint+Pettier 统一开发规范' | ||
36 | |||
35 | ] | 37 | ] |
36 | } | 38 | } |
37 | }, | 39 | }, |
38 | 40 | ||
39 | computed: { | 41 | computed: { |
40 | |||
41 | }, | 42 | }, |
42 | 43 | ||
43 | mounted() {}, | 44 | mounted() { |
45 | }, | ||
44 | 46 | ||
45 | methods: {} | 47 | methods: {} |
46 | } | 48 | } | ... | ... |
-
Please register or sign in to post a comment