基于vue-cli和vant来搭建开发环境

1.安装vue-cli
2.通过vue-cli构建项目
3.安装vant
4.vant按需引入
5.设置pxtorem(输入px，自动变为rem，这样写的时候可以完全按照设计图来写)

1. 步骤省略 …
2. 用vue-cli指令来构建项目(需要先全局安装vue-cli)

	vue create tea-item

选择需要的工具，例如vuex，vue-router等

3. 安装vant

npm i vant -S

-S 和 -D的区别：

-S是生产环境中用到的，程序运行的时候也会使用，如element，jQuery等
-D是开发环境用到的，程序运行时不需要，如webpack，gulp等打包和压缩工具

4. vant按需引入

npm i babel-plugin-import -D

并且将babel.config. js改为

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增的部分
  plugins: [
	['import', {
		libraryName: 'vant',
		libraryDirectory: 'es',
		style: true
	}, 'vant']
  ]
}

接着在main.js中引用需要导入的组件就可以了

import {Button,Icon} from 'vant'
Vue.use(Button).use(Icon)

这时候要重新启动一下项目，才会生效
在Home.vue中加入<van-button type="danger">测试</van-button>
如果出现了红色的按钮，说明已经 成功引入了vant

顺便一提，vue中引用公用css或字体有3种方法

• 在public/index.html中引用，和普通的html引用css一样
• 在main.js中import ‘@/assets/css/main.css’（建议在这里引用）
• 在app.vue中引用

5.移动端的适配，使用pxtorem

npm i postcss-pxtorem -D

然后在根目录建立vue.config.js文件,加入下面的代码

module.exports = {
	lintOnSave: true,
	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require('postcss-pxtorem')({
						rootValue: 20, // 换算的基数
						// 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
						//如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
						selectorBlackList: ['vant'],
						propList: ['*'],
					}),
				]
			}
		}
	},
}

在public/index.html中加入代码

<script type="text/javascript">
// 设置 rem 函数
function setRem () {

    // 设计稿为375 默认字体大小为20px;所以1rem=20; 375px = 18.75rem
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
		//得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize= htmlWidth/18.75 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}
</script>

这时候写px就会自动转化成rem了