Vant UI + Vue + Cli3.0 + Rem移动端项目搭建

客官°小女子只卖身不卖艺 2021-08-30 11:44 255阅读 0赞

### Vant UI + Vue + Cli3.0 + Rem移动端项目搭建 ###

#### 1. 创建`vue`项目 ####

*  创建项目

vue create vant-demo

*  引入`less` (通过`vue ui` 可视化页面安装依赖插件）

vue ui

--------------------

#### 2. 引入`vant ui` ####

npm i vant -S

--------------------

#### 3. 按需引入 ####

##### 3-1. 安装`babel` 插件 #####

npm i babel-plugin-import -D

温馨提示：在使用自动按需引入的时候，在使用相关组件的时候，需要在`maim.js`中一一引入，如下：

import {  Button,Cell, CellGroup } from 'vant';
    
    Vue.use(Cell);
    Vue.use(CellGroup)
    Vue.use(Button);

##### 3-2. 配置`babel.config.js` #####

module.exports = { 
      plugins: [
        ['import', { 
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    };

--------------------

#### 4. `Rem`适配 ####

##### 4-1. 安装`postcss-pxtorem`与`amfe-flexible` #####

npm install postcss-pxtorem --save-dev
    npm i -S amfe-flexible

##### 4-2. 配置`vue.config.js` #####

module.exports = { 
      lintOnSave: true,
      css: { 
          loaderOptions: { 
              postcss: { 
                  plugins: [
                      require('postcss-pxtorem')({ 
                          rootValue : 37.5, // 换算的基数
                          propList   : ['*'],
                      }),
                      require('autoprefixer')({ 
                        browsers: ['Android >= 4.0', 'iOS >= 8']
                      })
                  ]
              }
          }
      	},
    }

##### 4-3. 配置`main.js` #####

import 'amfe-flexible/index.js'

--------------------

### 5. 配置完成 ###

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 181 阅读

相关 vite 移动端项目搭建vue3+ts+vant3

初始化项目（使用vite官方模板）,这里使用的是vue-ts版本 [vite官网][vite] npm create vite@latest my-v

缺乏、安全感/ 2023年09月25日 18:03/ 0 赞/ 146 阅读

相关 vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目

h5移动端项目模板基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架

傷城~/ 2022年12月30日 13:34/ 0 赞/ 198 阅读

相关 Vue-Cli 构建 Vue 移动端项目

终端输入`vue create demo` ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

谁践踏了优雅/ 2022年12月01日 05:20/ 0 赞/ 259 阅读

相关移动端vue-cli4开发环境搭建

项目说明 > 基于vue-cli4.0+ webpack 4 + vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架项目地址：[vu

痛定思痛。/ 2022年11月30日 04:11/ 0 赞/ 262 阅读

相关 vue+vant适配移动端REM

第一步：下载 npm i -S amfe-flexible 第二步：在main.js里面引入 import ‘amfe-flexible’ 第三步：下载 npm insta

谁借莪１个温暖的怀抱￠/ 2022年10月20日 01:14/ 0 赞/ 213 阅读

相关 vue-cli 项目搭建

vue-cli 项目搭建 1、首先需要安装nodejs（略了）。 2、用node安装vue-cli。 npm install -g vue-cli 3、新

我会带着你远行/ 2022年06月11日 04:12/ 0 赞/ 259 阅读

相关使用 vue-cli + element-ui 快速搭建项目

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下载官方提供的模板（本地电脑没

分手后的思念是犯贱/ 2022年05月11日 11:33/ 0 赞/ 239 阅读

相关 vue-cli3+vant ui组件快速开发自适应移动端应用

当我建好VUE-CLI3的脚手架之后，我们来接着选择一个合适的UI框架来进行实战开发，还不会搭建？---> [点击][Link 1] [https://youzan.gith

桃扇骨/ 2022年04月16日 02:26/ 0 赞/ 451 阅读

相关 Vant UI + Vue + Cli3.0 + Rem移动端项目搭建

Vant UI + Vue + Cli3.0 + Rem移动端项目搭建 1. 创建`vue`项目创建项目 vue create van

客官°小女子只卖身不卖艺/ 2021年08月30日 11:44/ 0 赞/ 256 阅读