23e32b8c by sunnie

ie

1 parent 627b11b3
...@@ -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 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!