Vue CLI 3 + Vant 项目搭建

注释：以下命令均用npm，如您使用的是yarn，可以点击以下链接进入查阅。

Vue CLI 3

  安装：

npm install -g @vue/cli

  创建项目：

vue create my-project    // my-project是项目名称

  项目创建完成后，进入项目根目录：

cd my-project

  如果不需要Vant或其它UI组件库，可以直接运行项目：

npm run serve

  如果需要的话请往下看，在这里我用的是Vant（轻量、可靠的移动端 Vue 组件库）

 

Vant

  安装：

npm install --save vant

  引入组件：

方式一. 使用 babel-plugin-import (推荐) 

 babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

    # 安装 babel-plugin-import 插件

npm i babel-plugin-import -D

    # 新建.babelrc文件，在根目录新建".babelrc"文件，或者用以下命令：

type null>.babelrc

    # .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']
  ]
};

    # 然后就可以在组件中按需引入vant的组件和在vue中注册组件使用了

  默认按钮
  主要按钮
  警告按钮
  危险按钮

 

方式二. 按需引入组件

    # 在不使用插件的情况下，可以手动引入需要的组件

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

 

方式三. 导入所有组件

    # 注意：配置 babel-plugin-import 插件后将不允许导入所有组件

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

 

  然后就可以运行啦

npm run serve