基于vue-cli和vant来搭建开发环境 1.安装vue-cli 2.通过vue-cli构建项目 3.安装vant 4.vant按需引入 5.设置pxtorem(输入px，自动变为rem，这样写的时候可以完全按照设计图来写)
步骤省略 … 用vue-cli指令来构建项目(需要先全局安装vue-cli) vue create tea-item 1 选择需要的工具，例如vuex，vue-router等
安装vant npm i vant -S 1 -S 和 -D的区别：
-S是生产环境中用到的，程序运行的时候也会使用，如element，jQuery等 -D是开发环境用到的，程序运行时不需要，如webpack，gulp等打包和压缩工具
vant按需引入 npm i babel-plugin-import -D 1 并且将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 1 然后在根目录建立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了
