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;