ie
Showing
6 changed files
with
70 additions
and
29 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) |
| ... | @@ -364,27 +365,26 @@ new Vue({ | ... | @@ -364,27 +365,26 @@ new Vue({ |
| 364 | }) | 365 | }) |
| 365 | ``` | 366 | ``` |
| 366 | 367 | ||
| 367 | 使用 | 368 | 使用 |
| 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 | }, |
| 376 | ]) | ||
| 377 | }, | ||
| 378 | 377 | ||
| 379 | methods: { | 378 | methods: { |
| 380 | // Action 通过 store.dispatch 方法触发 | 379 | // Action 通过 store.dispatch 方法触发 |
| 381 | doDispatch() { | 380 | doDispatch() { |
| 382 | this.$store.dispatch('setUserName', '真乖,赶紧关注公众号,组织都在等你~') | 381 | this.$store.dispatch('setUserName', '真乖,赶紧关注公众号,组织都在等你~') |
| 382 | } | ||
| 383 | } | 383 | } |
| 384 | } | 384 | } |
| 385 | } | ||
| 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' |
| ... | @@ -10,7 +13,7 @@ import '@/assets/css/index.scss' | ... | @@ -10,7 +13,7 @@ import '@/assets/css/index.scss' |
| 10 | // 设置 js中可以访问 $cdn | 13 | // 设置 js中可以访问 $cdn |
| 11 | import {$cdn} from '@/config' | 14 | import {$cdn} from '@/config' |
| 12 | Vue.prototype.$cdn = $cdn | 15 | Vue.prototype.$cdn = $cdn |
| 13 | 16 | ||
| 14 | // 全局引入按需引入UI库 vant | 17 | // 全局引入按需引入UI库 vant |
| 15 | import '@/plugins/vant' | 18 | import '@/plugins/vant' |
| 16 | 19 | ... | ... |
| ... | @@ -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