mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-27 03:58:57 +08:00
ie
This commit is contained in:
parent
627b11b302
commit
23e32b8c3a
64
README.md
64
README.md
@ -4,10 +4,10 @@
|
|||||||
|
|
||||||
掘金: [vue-cli4 vant rem 移动端框架方案](https://juejin.im/post/5cfefc73f265da1bba58f9f7)
|
掘金: [vue-cli4 vant rem 移动端框架方案](https://juejin.im/post/5cfefc73f265da1bba58f9f7)
|
||||||
|
|
||||||
[demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
|
[查看 demo](https://solui.cn/vue-h5-template/#/) 建议手机端查看
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<img src="./static/demo.png" width="256" style="display:inline;">
|
<img src="./static/demo.png" width="300" style="display:inline;">
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
### Node 版本要求
|
### Node 版本要求
|
||||||
@ -29,9 +29,10 @@ npm install
|
|||||||
|
|
||||||
npm run serve
|
npm run serve
|
||||||
```
|
```
|
||||||
|
|
||||||
<span id="top">目录</span>
|
<span id="top">目录</span>
|
||||||
|
|
||||||
- [√ Vue-cli4](https://cli.vuejs.org/zh/guide/){:target="_blank"}
|
- √ Vue-cli4
|
||||||
- [√ 配置多环境变量](#env)
|
- [√ 配置多环境变量](#env)
|
||||||
- [√ rem 适配方案](#rem)
|
- [√ rem 适配方案](#rem)
|
||||||
- [√ VantUI 组件按需加载](#vant)
|
- [√ VantUI 组件按需加载](#vant)
|
||||||
@ -368,12 +369,10 @@ new Vue({
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import {mapGetters} from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters([
|
...mapGetters(['userName'])
|
||||||
'userName'
|
|
||||||
])
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
@ -382,9 +381,10 @@ export default {
|
|||||||
this.$store.dispatch('setUserName', '真乖,赶紧关注公众号,组织都在等你~')
|
this.$store.dispatch('setUserName', '真乖,赶紧关注公众号,组织都在等你~')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
[▲ 回顶部](#top)
|
[▲ 回顶部](#top)
|
||||||
|
|
||||||
### <span id="router">✅ Vue-router </span>
|
### <span id="router">✅ Vue-router </span>
|
||||||
@ -834,14 +834,23 @@ module.exports = {
|
|||||||
|
|
||||||
### <span id="ie">✅ 添加 IE 兼容 </span>
|
### <span id="ie">✅ 添加 IE 兼容 </span>
|
||||||
|
|
||||||
|
之前的方式 会报 `@babel/polyfill` is deprecated. Please, use required parts of `core-js` and
|
||||||
|
`regenerator-runtime/runtime` separately
|
||||||
|
|
||||||
|
`@babel/polyfill` 废弃,使用 `core-js` 和 `regenerator-runtime`
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm i -S @babel/polyfill
|
npm i --save core-js regenerator-runtime
|
||||||
```
|
```
|
||||||
|
|
||||||
在 `main.js` 中添加
|
在 `main.js` 中添加
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import '@babel/polyfill'
|
// 兼容 IE
|
||||||
|
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
|
||||||
|
import 'core-js/stable'
|
||||||
|
import 'regenerator-runtime/runtime'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
配置 `babel.config.js`
|
配置 `babel.config.js`
|
||||||
@ -850,16 +859,42 @@ import '@babel/polyfill'
|
|||||||
const plugins = []
|
const plugins = []
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
|
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
|
||||||
plugins
|
plugins
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[▲ 回顶部](#top)
|
[▲ 回顶部](#top)
|
||||||
|
|
||||||
#### 总结
|
### <span id="pettier">✅ Eslint+Pettier 统一开发规范 </span>
|
||||||
|
|
||||||
|
在文件 `.prettierrc` 里写 属于你的 pettier 规则
|
||||||
|
|
||||||
|
```bash
|
||||||
|
{
|
||||||
|
"printWidth": 120,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"semi": false,
|
||||||
|
"wrap_line_length": 120,
|
||||||
|
"wrap_attributes": "auto",
|
||||||
|
"proseWrap": "always",
|
||||||
|
"arrowParens": "avoid",
|
||||||
|
"bracketSpacing": false,
|
||||||
|
"jsxBracketSameLine": true,
|
||||||
|
"useTabs": false,
|
||||||
|
"overrides": [{
|
||||||
|
"files": ".prettierrc",
|
||||||
|
"options": {
|
||||||
|
"parser": "json"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
[▲ 回顶部](#top)
|
||||||
|
|
||||||
因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长
|
|
||||||
|
|
||||||
# 关于我
|
# 关于我
|
||||||
|
|
||||||
@ -870,6 +905,7 @@ module.exports = {
|
|||||||
<p>
|
<p>
|
||||||
<img src="./static/gognzhonghao.jpg" width="256" style="display:inline;">
|
<img src="./static/gognzhonghao.jpg" width="256" style="display:inline;">
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
扫描添加下方的微信并备注 Sol 加交流群,交流学习,及时获取代码最新动态。
|
扫描添加下方的微信并备注 Sol 加交流群,交流学习,及时获取代码最新动态。
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
@ -17,6 +17,6 @@ if (IS_PROD) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
|
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
|
||||||
plugins
|
plugins
|
||||||
}
|
}
|
||||||
|
794
package-lock.json
generated
794
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -15,13 +15,13 @@
|
|||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
"lib-flexible": "^0.3.2",
|
"lib-flexible": "^0.3.2",
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
|
"regenerator-runtime": "^0.13.5",
|
||||||
"vant": "^2.4.7",
|
"vant": "^2.4.7",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
"vue-router": "^3.1.5",
|
"vue-router": "^3.1.5",
|
||||||
"vuex": "^3.1.2"
|
"vuex": "^3.1.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/polyfill": "^7.8.3",
|
|
||||||
"@vue/cli-plugin-babel": "~4.2.0",
|
"@vue/cli-plugin-babel": "~4.2.0",
|
||||||
"@vue/cli-plugin-eslint": "~4.2.0",
|
"@vue/cli-plugin-eslint": "~4.2.0",
|
||||||
"@vue/cli-service": "~4.2.0",
|
"@vue/cli-service": "~4.2.0",
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
// IE 兼容
|
// 兼容 IE
|
||||||
import '@babel/polyfill'
|
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
|
||||||
|
import 'core-js/stable'
|
||||||
|
import 'regenerator-runtime/runtime'
|
||||||
|
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
@ -31,16 +31,18 @@ export default {
|
|||||||
'配置 externals 引入 cdn 资源',
|
'配置 externals 引入 cdn 资源',
|
||||||
'去掉 console.log',
|
'去掉 console.log',
|
||||||
'splitChunks 单独打包第三方模块',
|
'splitChunks 单独打包第三方模块',
|
||||||
' 添加 IE 兼容'
|
'添加 IE 兼容',
|
||||||
|
'Eslint+Pettier 统一开发规范'
|
||||||
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {},
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
methods: {}
|
methods: {}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user