搭建一个基于 Vue + Vant 的移动端项目模板

项目模板说明

  • 通过 px2rem-loader 和 amfe-flexible 实现 px 自动 转rem, 不想转rem的可以使用 大写 的 PX
  • 使用 less 或 scss ,项目中已经安装好依赖,根据自己的需求选择

搭建步骤

  1. 创建一个Vue项目

    vue init webpack my-vant-app    //(详细步骤就不多说了。。。)
    
  2. 安装 px2rem-loader 和 amfe-flexible 两个依赖

    npm install px2rem-loader -save
    npm install amfe-flexible -save
    
  3. 在 main.js 中引入

    import 'amfe-flexible'
    
  4. 在build文件夹下的utils.js 文件中 新增这三个
    搭建一个基于 Vue + Vant 的移动端项目模板_第1张图片
    代码如下:

    const px2remLoader = {
       loader: 'px2rem-loader',
        options: {
          remUnit: 37.5
        }
      }
    
    const loaders = options.usePostCSS ? [cssLoader,postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
    
  5. 安装 less 和 scss
    a. 安装less

    npm install less --save-dev
    npm install less-loader@4.1.0 --save-dev
    

    b. 安装 scss

    npm install node-sass@4.14.1 --save-dev
    npm install sass-loader@7.3.1 --save-dev
    
  6. 安装 vant - ui 库

    npm i vant -S
    
  7. 按需引入
    搭建一个基于 Vue + Vant 的移动端项目模板_第2张图片
    代码如下:
    a. 然后在 babel.config.js 中配置

    module.exports = {
    	presets: [
    	  '@vue/app'
    	],
    	"plugins": [ "transform-vue-jsx","transform-runtime",
    		[
    		"import",
    		 {
    	        "libraryName": "vant",
    	        "libraryDirectory": "es",
    	        "style": true
    	     }, "vant"
    		]
       ]
    }
    

    b. 在 src目录下 新建 utils 文件夹,在utils文件夹下新建 vant.js 文件,按需引入组件
    搭建一个基于 Vue + Vant 的移动端项目模板_第3张图片

    c. 同时在 main.js 文件中引入 vant.js
    搭建一个基于 Vue + Vant 的移动端项目模板_第4张图片
    ----------------------------------------------------------------------------------------------------------------------------------
    扩展 - vant组件的使用

    1. 首页 - 轮播图(Swipe)
      搭建一个基于 Vue + Vant 的移动端项目模板_第5张图片

    2. 分类页 - 骨架屏(Skeleton)
      搭建一个基于 Vue + Vant 的移动端项目模板_第6张图片

    3. 购物车页 - 商品规格(Sku)和 分享面板 ShareSheet )和 商品导航(GoodsAction)
      搭建一个基于 Vue + Vant 的移动端项目模板_第7张图片
      搭建一个基于 Vue + Vant 的移动端项目模板_第8张图片
      搭建一个基于 Vue + Vant 的移动端项目模板_第9张图片

    4. 个人中心页 - 地址编辑(AddressEdit)和 搜索(Search)
      搭建一个基于 Vue + Vant 的移动端项目模板_第10张图片

你可能感兴趣的:(Vant-UI,web,app,vue.js,npm,babel,less)