678f5127 by fonghehe

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

1 parent fc6e07c2
// 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`
}
}
}
......
......@@ -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"
}
}
......
......@@ -17,7 +17,7 @@ import '@/plugins/vant'
// 引入全局样式
import '@/assets/css/index.scss'
// 移动端适配
import 'lib-flexible/flexible.js'
import 'amfe-flexible'
// filters
import './filters'
......
......@@ -58,6 +58,7 @@ export default {
}
}
</script>
<style lang="scss">
.about-container {
/* 你的命名空间 */
......
......@@ -10,11 +10,10 @@
</div>
</template>
<script>
export default {
data() {
return {
list: [
<script setup>
import { ref } from 'vue'
let list = ref([
'Vue-cli4',
'配置多环境变量',
'VantUI 组件按需加载',
......@@ -32,17 +31,9 @@ export default {
'splitChunks 单独打包第三方模块',
'添加 IE 兼容',
'Eslint+Pettier 统一开发规范'
]
}
},
computed: {},
mounted() {},
methods: {}
}
])
</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;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!