This commit is contained in:
sunnie 2020-04-21 11:55:37 +08:00
parent 627b11b302
commit 23e32b8c3a
6 changed files with 467 additions and 426 deletions

View File

@ -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>

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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'

View File

@ -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: {}
} }