移动端 项目初始化
使用 Vue CLI 创建项目
如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：
npm install --global @vue/cli
在命令行中输入以下命令创建 Vue 项目：
vue create xxxxx
然后配置各种你需要的插件
加入 Git 版本管理
（1）创建远程仓库
-
-
-
-
...
（2）将本地仓库推到线上
如果没有本地仓库。
# 创建本地仓库
git init
# 将文件添加到暂存区
git add 文件
# 提交历史记录
git commit "提交日志"
# 添加远端仓库地址
git remote add origin 你的远程仓库地址
# 推送提交
git push -u origin master
如果已有本地仓库（Vue CLI 已经帮我们初始化好了）。
# 添加远端仓库地址
git remote add origin 你的远程仓库地址
# 推送提交
git push -u origin master
如果之后项目代码有了变动需要提交：
git add
git commit
git push
将 router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
3、删除
-
src/views/About.vue
-
src/views/Home.vue
-
src/components/HelloWorld.vue
-
src/assets/logo.png
4、创建以下几个目录
-
src/api 目录
-
存储接口封装
-
-
src/utils 目录
-
存储一些工具模块
-
-
src/styles 目录
-
index.less 文件，存储全局样式
-
在
main.js中加载全局样式import './styles/index.less'
-
调整之后的目录结构如下。
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── api
├── App.vue
├── assets
├── components
├── main.js
├── router
├── utils
├── styles
├── store
└── views
配置到项目中使用
一种方式是
一种方式是将 SVG 制作为字体图标来使用：
npm i vant
2、在 main.js 中加载注册 Vant 组件
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：
下面我们分别将这两个工具配置到项目中完成 REM 适配。
一、使用
1、安装
# yarn add amfe-flexible
npm i amfe-flexible
2、然后在 main.js 中加载执行该模块
import 'amfe-flexible'
最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。
例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px
二、使用
1、安装
# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D
2、然后在项目根目录中创建 .postcssrc.js 文件
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
3、配置完毕，重新启动服务
最后测试：刷新浏览器页面，审查元素的样式查看是否已将 px 转换为 rem
需要注意的是：
-
该插件不能转换行内样式中的
px，例如<div style="width: 200px;"></div>
关于 .postcssrc.js 配置文件
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
.postcssrc.js 是 PostCSS 的配置文件。
（1）PostCSS 介绍
-
-
-
-
...
目前 PostCSS 已经有
PostCSS 一般不单独使用，而是与已有的构建工具进行集成。
Vue CLI 内部使用了 PostCSS。
你可以通过
.postcssrc或任何我们默认开启了
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist警告意思就是说你应该将
browsers选项写到package.json或.browserlistrc文件中。[Android]
>= 4.0[iOS]
>= 8（3）postcss-pxtorem 插件的配置
rootValue应该如何设置呢？如果你使用的是基于 lib-flexable 的 REM 适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是 750 宽，则应该设置为 75。
大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。
但是 Vant 建议设置为 37.5，为什么呢？
因为 Vant 是基于 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。所以如果设置为
37.5的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。
这样做其实也没有问题，但是有没有更好的办法呢？我就想实现测量多少写多少（不用换算）。于是聪明的你就想，可以不可以这样来做？
如果是 Vant 的样式，就把
rootValue设置为 37.5 来转换如果是我们的样式，就按照 75 的
rootValue来转换
通过
数字：固定值
函数：动态计算返回
postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
所以我们修改配置如下：
/** * PostCSS 配置文件 */ module.exports = { // 配置要使用的 PostCSS 插件 plugins: { // 配置使用 autoprefixer 插件 // 作用：生成浏览器 CSS 样式规则前缀 // VueCLI 内部已经配置了 autoprefixer 插件 // 所以又配置了一次，所以产生冲突了 // 'autoprefixer': { // autoprefixer 插件的配置 // // 配置要兼容到的环境信息 // browsers: ['Android >= 4.0', 'iOS >= 8'] // }, // 配置使用 postcss-pxtorem 插件 // 作用：把 px 转为 rem 'postcss-pxtorem': { rootValue ({ file }) { return file.indexOf('vant') !== -1 ? 37.5 : 75 }, propList: ['*'] } } }
浙公网安备 33010602011771号