一.创建vue2框架
npm create '项目名'
二.创建项目的适合选择less
三.所有的样式文件以.less命名
四.使用vant-ui(自动按需导入)
1.下载vant-ui组件库
npm i vant@latest-v2 -S
2.安装插件babel-plugin-import
注释:babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
npm i babel-plugin-import -D
3.在babel.config.js文件中添加配置
module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };
五.屏幕适配
1.使用单位(rem,vw,vh....)
因为1rem= 1HTML根字号,所以需要动态设置HTML根字号
2.使用amfe-flexible完成
npm i amfe-flexible
在main.js中导入,一定导入,不然没效果
import 'amfe-flexible'
3.下载postcss和postcss-pxtorem
npm i postcss postcss-pxtorem --save-dev
在postcss.config.js文件中添加配置(没有文件则自己添加文件名)
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], }, }, };
