mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-05 19:42:08 +08:00
feat: 升级vue2.7和修改移动端适配方案
This commit is contained in:
fonghehe
parent
fc6e07c224
commit
678f51276f
@ -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`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
33
package.json
33
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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,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 统一开发规范'
|
||||
]
|
||||
}
|
||||
},
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
computed: {},
|
||||
|
||||
mounted() {},
|
||||
|
||||
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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user