678f5127 by fonghehe

feat: 升级vue2.7和修改移动端适配方案

1 parent fc6e07c2
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'
......
...@@ -58,6 +58,7 @@ export default { ...@@ -58,6 +58,7 @@ export default {
58 } 58 }
59 } 59 }
60 </script> 60 </script>
61
61 <style lang="scss"> 62 <style lang="scss">
62 .about-container { 63 .about-container {
63 /* 你的命名空间 */ 64 /* 你的命名空间 */
......
...@@ -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;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!