diff --git a/.postcssrc.js b/.postcssrc.js index e1c91ea..772ba1a 100644 --- a/.postcssrc.js +++ b/.postcssrc.js @@ -1,13 +1,31 @@ // https://github.com/michael-ciniawsky/postcss-load-config +const path = require('path') + module.exports = { plugins: { - autoprefixer: { - overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] - }, - 'postcss-pxtorem': { - rootValue: 37.5, - propList: ['*'] - //selectorBlackList: ['van-'] + autoprefixer: {}, + 'postcss-px-to-viewport': { + unitToConvert: 'px', // 要转化的单位 + viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 + viewportHeight: 812, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 + unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数 + viewportUnit: 'vw', //指定需要转换成的视窗单位,建议使用vw + selectorBlackList: [ + '.van-cell', + '.van-button', + '.van-skeleton', + '.van-toast', + '.van-popup__close-icon', + '.van-field', + '.van-dropdown-menu', + '.van-radio', + '.van-swipe', + '.van-list', + '.van-dialog', + '.van-tabbar' + ], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 + minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 + mediaQuery: false // 允许在媒体查询中转换`px` } } } diff --git a/package.json b/package.json index 318eff5..e0b1848 100644 --- a/package.json +++ b/package.json @@ -12,36 +12,35 @@ "deps": "yarn upgrade-interactive --latest" }, "dependencies": { + "amfe-flexible": "^2.2.1", "axios": "^0.27.2", - "core-js": "^3.8.3", - "lib-flexible": "^0.3.2", + "core-js": "^3.23.3", "regenerator-runtime": "^0.13.5", - "vant": "^2.10.2", - "vue": "^2.6.14", - "vue-router": "^3.5.1", + "vant": "^2.12.48", + "vue": "^2.7.4", + "vue-router": "^3.5.2", "vuex": "^3.6.2" }, "devDependencies": { - "@babel/core": "^7.12.16", - "@babel/eslint-parser": "^7.12.16", + "@babel/core": "^7.18.6", + "@babel/eslint-parser": "^7.18.2", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "babel-eslint": "^10.1.0", - "babel-plugin-import": "^1.13.0", + "babel-plugin-import": "^1.13.5", "babel-plugin-transform-remove-console": "^6.9.4", - "eslint": "^8.18.0", - "eslint-config-prettier": "^8.3.0", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-vue": "^9.1.1", - "postcss-pxtorem": "^6.0.0", - "prettier": "^2.4.1", - "sass": "^1.32.7", - "sass-loader": "^13.0.1", + "eslint": "^8.19.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-vue": "^9.2.0", + "postcss-px-to-viewport": "^1.1.1", + "prettier": "^2.7.1", + "sass": "^1.53.0", + "sass-loader": "^13.0.2", "script-ext-html-webpack-plugin": "^2.1.4", - "vue-template-compiler": "^2.6.14", "webpack-bundle-analyzer": "^4.5.0" } } diff --git a/src/main.js b/src/main.js index c014651..9fa2306 100644 --- a/src/main.js +++ b/src/main.js @@ -17,7 +17,7 @@ import '@/plugins/vant' // 引入全局样式 import '@/assets/css/index.scss' // 移动端适配 -import 'lib-flexible/flexible.js' +import 'amfe-flexible' // filters import './filters' diff --git a/src/views/home/about.vue b/src/views/home/about.vue index d940ab1..a34bc9b 100644 --- a/src/views/home/about.vue +++ b/src/views/home/about.vue @@ -58,6 +58,7 @@ export default { } } </script> + <style lang="scss"> .about-container { /* 你的命名空间 */ diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 31c917a..fec23e8 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -10,39 +10,30 @@ </div> </template> -<script> -export default { - data() { - return { - list: [ - 'Vue-cli4', - '配置多环境变量', - 'VantUI 组件按需加载', - 'Sass 全局样式', - 'Webpack 4', - 'Vuex 状态管理', - 'Axios 封装及接口管理', - 'Vue-router', - 'Webpack 4 vue.config.js 基础配置', - '配置 proxy 跨域', - '配置 alias 别名', - '配置 打包分析', - '配置 externals 引入 cdn 资源', - '去掉 console.log', - 'splitChunks 单独打包第三方模块', - '添加 IE 兼容', - 'Eslint+Pettier 统一开发规范' - ] - } - }, - - computed: {}, - - mounted() {}, +<script setup> +import { ref } from 'vue' - methods: {} -} +let list = ref([ + 'Vue-cli4', + '配置多环境变量', + 'VantUI 组件按需加载', + 'Sass 全局样式', + 'Webpack 4', + 'Vuex 状态管理', + 'Axios 封装及接口管理', + 'Vue-router', + 'Webpack 4 vue.config.js 基础配置', + '配置 proxy 跨域', + '配置 alias 别名', + '配置 打包分析', + '配置 externals 引入 cdn 资源', + '去掉 console.log', + 'splitChunks 单独打包第三方模块', + '添加 IE 兼容', + 'Eslint+Pettier 统一开发规范' +]) </script> + <style lang="scss" scoped> .index-container { .warpper { @@ -50,7 +41,7 @@ export default { background: #fff; .demo-home__title { margin: 0 0 6px; - font-size: 32px; + font-size: 64px; .demo-home__title img, .demo-home__title span { display: inline-block;