feat: 升级vue2.7和修改移动端适配方案
Showing
5 changed files
with
66 additions
and
57 deletions
1 | // https://github.com/michael-ciniawsky/postcss-load-config | 1 | // https://github.com/michael-ciniawsky/postcss-load-config |
2 | const path = require('path') | ||
3 | |||
2 | module.exports = { | 4 | module.exports = { |
3 | plugins: { | 5 | plugins: { |
4 | autoprefixer: { | 6 | autoprefixer: {}, |
5 | overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] | 7 | 'postcss-px-to-viewport': { |
6 | }, | 8 | unitToConvert: 'px', // 要转化的单位 |
7 | 'postcss-pxtorem': { | 9 | viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 |
8 | rootValue: 37.5, | 10 | viewportHeight: 812, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 |
9 | propList: ['*'] | 11 | unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数 |
10 | //selectorBlackList: ['van-'] | 12 | viewportUnit: 'vw', //指定需要转换成的视窗单位,建议使用vw |
13 | selectorBlackList: [ | ||
14 | '.van-cell', | ||
15 | '.van-button', | ||
16 | '.van-skeleton', | ||
17 | '.van-toast', | ||
18 | '.van-popup__close-icon', | ||
19 | '.van-field', | ||
20 | '.van-dropdown-menu', | ||
21 | '.van-radio', | ||
22 | '.van-swipe', | ||
23 | '.van-list', | ||
24 | '.van-dialog', | ||
25 | '.van-tabbar' | ||
26 | ], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 | ||
27 | minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 | ||
28 | mediaQuery: false // 允许在媒体查询中转换`px` | ||
11 | } | 29 | } |
12 | } | 30 | } |
13 | } | 31 | } | ... | ... |
... | @@ -12,36 +12,35 @@ | ... | @@ -12,36 +12,35 @@ |
12 | "deps": "yarn upgrade-interactive --latest" | 12 | "deps": "yarn upgrade-interactive --latest" |
13 | }, | 13 | }, |
14 | "dependencies": { | 14 | "dependencies": { |
15 | "amfe-flexible": "^2.2.1", | ||
15 | "axios": "^0.27.2", | 16 | "axios": "^0.27.2", |
16 | "core-js": "^3.8.3", | 17 | "core-js": "^3.23.3", |
17 | "lib-flexible": "^0.3.2", | ||
18 | "regenerator-runtime": "^0.13.5", | 18 | "regenerator-runtime": "^0.13.5", |
19 | "vant": "^2.10.2", | 19 | "vant": "^2.12.48", |
20 | "vue": "^2.6.14", | 20 | "vue": "^2.7.4", |
21 | "vue-router": "^3.5.1", | 21 | "vue-router": "^3.5.2", |
22 | "vuex": "^3.6.2" | 22 | "vuex": "^3.6.2" |
23 | }, | 23 | }, |
24 | "devDependencies": { | 24 | "devDependencies": { |
25 | "@babel/core": "^7.12.16", | 25 | "@babel/core": "^7.18.6", |
26 | "@babel/eslint-parser": "^7.12.16", | 26 | "@babel/eslint-parser": "^7.18.2", |
27 | "@vue/cli-plugin-babel": "~5.0.0", | 27 | "@vue/cli-plugin-babel": "~5.0.0", |
28 | "@vue/cli-plugin-eslint": "~5.0.0", | 28 | "@vue/cli-plugin-eslint": "~5.0.0", |
29 | "@vue/cli-plugin-router": "~5.0.0", | 29 | "@vue/cli-plugin-router": "~5.0.0", |
30 | "@vue/cli-plugin-vuex": "~5.0.0", | 30 | "@vue/cli-plugin-vuex": "~5.0.0", |
31 | "@vue/cli-service": "~5.0.0", | 31 | "@vue/cli-service": "~5.0.0", |
32 | "babel-eslint": "^10.1.0", | 32 | "babel-eslint": "^10.1.0", |
33 | "babel-plugin-import": "^1.13.0", | 33 | "babel-plugin-import": "^1.13.5", |
34 | "babel-plugin-transform-remove-console": "^6.9.4", | 34 | "babel-plugin-transform-remove-console": "^6.9.4", |
35 | "eslint": "^8.18.0", | 35 | "eslint": "^8.19.0", |
36 | "eslint-config-prettier": "^8.3.0", | 36 | "eslint-config-prettier": "^8.5.0", |
37 | "eslint-plugin-prettier": "^4.0.0", | 37 | "eslint-plugin-prettier": "^4.2.1", |
38 | "eslint-plugin-vue": "^9.1.1", | 38 | "eslint-plugin-vue": "^9.2.0", |
39 | "postcss-pxtorem": "^6.0.0", | 39 | "postcss-px-to-viewport": "^1.1.1", |
40 | "prettier": "^2.4.1", | 40 | "prettier": "^2.7.1", |
41 | "sass": "^1.32.7", | 41 | "sass": "^1.53.0", |
42 | "sass-loader": "^13.0.1", | 42 | "sass-loader": "^13.0.2", |
43 | "script-ext-html-webpack-plugin": "^2.1.4", | 43 | "script-ext-html-webpack-plugin": "^2.1.4", |
44 | "vue-template-compiler": "^2.6.14", | ||
45 | "webpack-bundle-analyzer": "^4.5.0" | 44 | "webpack-bundle-analyzer": "^4.5.0" |
46 | } | 45 | } |
47 | } | 46 | } | ... | ... |
... | @@ -17,7 +17,7 @@ import '@/plugins/vant' | ... | @@ -17,7 +17,7 @@ import '@/plugins/vant' |
17 | // 引入全局样式 | 17 | // 引入全局样式 |
18 | import '@/assets/css/index.scss' | 18 | import '@/assets/css/index.scss' |
19 | // 移动端适配 | 19 | // 移动端适配 |
20 | import 'lib-flexible/flexible.js' | 20 | import 'amfe-flexible' |
21 | 21 | ||
22 | // filters | 22 | // filters |
23 | import './filters' | 23 | import './filters' | ... | ... |
... | @@ -10,39 +10,30 @@ | ... | @@ -10,39 +10,30 @@ |
10 | </div> | 10 | </div> |
11 | </template> | 11 | </template> |
12 | 12 | ||
13 | <script> | 13 | <script setup> |
14 | export default { | 14 | import { ref } from 'vue' |
15 | data() { | ||
16 | return { | ||
17 | list: [ | ||
18 | 'Vue-cli4', | ||
19 | '配置多环境变量', | ||
20 | 'VantUI 组件按需加载', | ||
21 | 'Sass 全局样式', | ||
22 | 'Webpack 4', | ||
23 | 'Vuex 状态管理', | ||
24 | 'Axios 封装及接口管理', | ||
25 | 'Vue-router', | ||
26 | 'Webpack 4 vue.config.js 基础配置', | ||
27 | '配置 proxy 跨域', | ||
28 | '配置 alias 别名', | ||
29 | '配置 打包分析', | ||
30 | '配置 externals 引入 cdn 资源', | ||
31 | '去掉 console.log', | ||
32 | 'splitChunks 单独打包第三方模块', | ||
33 | '添加 IE 兼容', | ||
34 | 'Eslint+Pettier 统一开发规范' | ||
35 | ] | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | computed: {}, | ||
40 | |||
41 | mounted() {}, | ||
42 | 15 | ||
43 | methods: {} | 16 | let list = ref([ |
44 | } | 17 | 'Vue-cli4', |
18 | '配置多环境变量', | ||
19 | 'VantUI 组件按需加载', | ||
20 | 'Sass 全局样式', | ||
21 | 'Webpack 4', | ||
22 | 'Vuex 状态管理', | ||
23 | 'Axios 封装及接口管理', | ||
24 | 'Vue-router', | ||
25 | 'Webpack 4 vue.config.js 基础配置', | ||
26 | '配置 proxy 跨域', | ||
27 | '配置 alias 别名', | ||
28 | '配置 打包分析', | ||
29 | '配置 externals 引入 cdn 资源', | ||
30 | '去掉 console.log', | ||
31 | 'splitChunks 单独打包第三方模块', | ||
32 | '添加 IE 兼容', | ||
33 | 'Eslint+Pettier 统一开发规范' | ||
34 | ]) | ||
45 | </script> | 35 | </script> |
36 | |||
46 | <style lang="scss" scoped> | 37 | <style lang="scss" scoped> |
47 | .index-container { | 38 | .index-container { |
48 | .warpper { | 39 | .warpper { |
... | @@ -50,7 +41,7 @@ export default { | ... | @@ -50,7 +41,7 @@ export default { |
50 | background: #fff; | 41 | background: #fff; |
51 | .demo-home__title { | 42 | .demo-home__title { |
52 | margin: 0 0 6px; | 43 | margin: 0 0 6px; |
53 | font-size: 32px; | 44 | font-size: 64px; |
54 | .demo-home__title img, | 45 | .demo-home__title img, |
55 | .demo-home__title span { | 46 | .demo-home__title span { |
56 | display: inline-block; | 47 | display: inline-block; | ... | ... |
-
Please register or sign in to post a comment