Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
xqz
/
dianDemo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
678f5127
authored
2022-07-10 00:41:11 +0800
by
fonghehe
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
feat: 升级vue2.7和修改移动端适配方案
1 parent
fc6e07c2
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
66 additions
and
57 deletions
.postcssrc.js
package.json
src/main.js
src/views/home/about.vue
src/views/home/index.vue
.postcssrc.js
View file @
678f512
// 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`
}
}
}
...
...
package.json
View file @
678f512
...
...
@@ -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.1
0.2
"
,
"vue"
:
"^2.
6.1
4"
,
"vue-router"
:
"^3.5.
1
"
,
"vant"
:
"^2.1
2.48
"
,
"vue"
:
"^2.
7.
4"
,
"vue-router"
:
"^3.5.
2
"
,
"vuex"
:
"^3.6.2"
},
"devDependencies"
:
{
"@babel/core"
:
"^7.1
2.1
6"
,
"@babel/eslint-parser"
:
"^7.1
2.16
"
,
"@babel/core"
:
"^7.1
8.
6"
,
"@babel/eslint-parser"
:
"^7.1
8.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.1
8
.0"
,
"eslint-config-prettier"
:
"^8.
3
.0"
,
"eslint-plugin-prettier"
:
"^4.
0.0
"
,
"eslint-plugin-vue"
:
"^9.
1.1
"
,
"postcss-px
torem"
:
"^6.0.0
"
,
"prettier"
:
"^2.
4
.1"
,
"sass"
:
"^1.
32.7
"
,
"sass-loader"
:
"^13.0.
1
"
,
"eslint"
:
"^8.1
9
.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"
}
}
...
...
src/main.js
View file @
678f512
...
...
@@ -17,7 +17,7 @@ import '@/plugins/vant'
// 引入全局样式
import
'@/assets/css/index.scss'
// 移动端适配
import
'
lib-flexible/flexible.js
'
import
'
amfe-flexible
'
// filters
import
'./filters'
...
...
src/views/home/about.vue
View file @
678f512
...
...
@@ -58,6 +58,7 @@ export default {
}
}
</
script
>
<
style
lang=
"scss"
>
.about-container
{
/* 你的命名空间 */
...
...
src/views/home/index.vue
View file @
678f512
...
...
@@ -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
:
32
px
;
font-size
:
64
px
;
.demo-home__title
img,
.demo-home__title
span
{
display
:
inline-block
;
...
...
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment