vant + Vue创建项目全过程

vant + Vue创建项目全过程

1、安装vue-cli3脚手架

npm install -g @vue/cli

2、通过vue-cli3创建项目

2.1、(my-project是你创建项目的项目名称，自己取的)

vue create my-project

2.2、当你执行这行代码的时候，你会发现项目会出现如下选择
按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了，这里我选择手动

根据需求选择配置，按上下键选择，space键选择

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript                                 // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
 ( ) Progressive Web App (PWA) Support          // 渐进式Web应用程序
 ( ) Router                                     // vue-router（vue路由）
 ( ) Vuex                                       // vuex（vue的状态管理模式）
 ( ) CSS Pre-processors                         // CSS 预处理器（如：less、sass）
 ( ) Linter / Formatter                         // 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing                               // 单元测试（unit tests）
 ( ) E2E Testing                                // e2e（end to end） 测试

这里是我选择的配置，仅供参考

2.3、选择您想要开始项目的Vue.js版本,这里我选择2.X

如果这里vue.js选择了3.X，vant现在最新的版本和vue3.X还没有做适配，如果你后面发现你引入的vant的组件，没有样式，一定要去检查一下你Vue和vant的版本

2.4、因为安装了router所以会弹出来，选择Y

2.5、选择css预处理，这里我选择第一种

2.6、ESLint：提供一个插件化的javascript代码检测工具，这里我选择最后一个

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only  //只有错误预防
  ESLint + Airbnb config   //Airbnb 配置
  ESLint + Standard config  //标准配置
  ESLint + Prettier         //使用较多  (漂亮的配置)

2.7、何时检测，我选择保存就检测：

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save                    // 保存就检测
 ( ) Lint and fix on commit          // fix和commit时候检查

2.8、如何存放设置，这里我选择放package.json里

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
  In package.json // 放package.json里

2.9是否保存本次配置（之后可以直接使用）：

? Save this as a preset for future projects? (Y/n) // y:记录本次配置，然后需要你起个名; n：不记录本次配置

然后等这个进度条跑完，你就的项目框架就配置好了

打开你创建的项目目录就能看到自己刚刚创建的项目了，这个时候你可以通过npm run serve启动这个项目了，是不是很简单呢？别急，我们现在只是成功了一半，跟着我接着往下面操作吧

3、安装vant

这里有两种方式安装：
1、通过npm安装

npm i vant -S

2、通过yarn安装

yarn add vant

4、引入组件

4.1、安装插件

npm i babel-plugin-import -D

我们在babel.config.js进行配置

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

5、Rem 适配

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

lib-flexible 用于设置 rem 基准值

下载

npm install  px2rem-loader --save

npm install amfe-flexible --save

在根目录创建一个postcss.config.js文件

文件 postcss.config.js 参考内容

module.exports = {
	    plugins: {
	      'autoprefixer': {
	        browsers: ['Android >= 4.0', 'iOS >= 7']
	      },
	      'postcss-pxtorem': {
	        rootValue: 37.5,
	        //这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小
	        propList: ['*']
	      }
	    }
    }

6、底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了safe-area-inset-bottom属性。
在index.html的heade中添加

<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

<!-- 开启 safe-area-inset-bottom 属性 -->
<van-number-keyboard safe-area-inset-bottom />