从0-1 搭建一个vue移动端项目

 

 

 

$router.back()      返回上一页面

@click.prevent         阻止冒泡

 

 

从0-1 搭建一个vue移动端项目

 

vue_cli初始化后，删除不需要的路由和页面，

01  创建api文件夹，用来存放所有的请求

02  创建utils文件夹，存放工具模块，如request.js 等

03  创建 styles文件夹，新建index.less， 用来存放全局样式,  将index.less引入mian.js中

04  安装vant，将vant ui库 安装到cli中

06   rem适配（注意：使用postcss-pxtorem和lib-flexble 时，行内样式是无法转换rem的---例如style='padding:20px',  除了行内样式，其他都可以转换）

 

 

 

 

 

　　第一步：   安装：npm i -S amfe-flexible （用来设置rem基准值）

　　第二步：    在mian.js中引入 ： import 'amfe-flexible '

 

 

 

　　第三步：配置 postcss-pxtorem（是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位）

　　　　　　第一步：安装依赖     npm install postcss postcss-pxtorem --save-dev

　　　　　　　　　　　                       在项目的根目录创建     postcss.config.js　 文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 转换的基准值，以设计稿为准
      // 375: 37.5
      // 750: 75
      // Vant 组件的样式是以 375 设计稿开发的
      // 我们的设计稿
      //    375，量多少，写多少
      //    750，量出来的尺寸 ÷ 2
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

 

 

 07.browserslistrc  配置

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

金融类组件库  mand mobile