之前的项目，我们已经初步展示如果通过VUE CLE3.0来构建相关项目及依赖，以下则开始引入的我们的相关的UI框架来正式制作页面了。

1：首先重新的启动相关的项目：

vue ui

启动UI构建图：

image.png

启动之前构建好的项目：

vue run serve

image.png

浏览器相关的项目：

http://localhost:8080/login#/

image.png

2：安装相关的框架：

F:\zyx-code\vue_pro\hello-world>npm i vant -S

安装完成后查看相关的package.json配置文件信息：

 "dependencies": {
    "vant": "^1.6.6",
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

3：使用按需引入的方式引入相关的UI组件

查阅官方文档的发方案，我们选择第一种方案。

F:\zyx-code\vue_pro\hello-world>npm i babel-plugin-import -D

4：使用webstome打开项目，并运行项目;

image.png

5:引入组件，进行使用：

image.png

会报错：

image.png

6：尝试全局方式引入使用再main.js处进行导入：

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

Vue.use(Vant);

image.png

但是还是报错：

Vant is not defined

image.png

7：因为我们之前确定采取的是第一种按需引入的方案 babel-plugin-import，

后来尝试在main.js直接的使用

image.png

最终完美的引入了组件：

image.png

8：引入其他组件：

image.png

效果图为：

image.png

总结相关的流程为：

1：安装相关的 babel-plugin-import按需引入的插件
2：配置相关的babel.config.js
3：再main.js，引入相关的组件
4： 在需要使用到相关组件的页面直接使用

引入Demo示例上的user.vue

地址为：
https://youzan.github.io/vant/#/zh-CN/demo

1：把about.vue的内容换为user.vue的内容：

<template>
  <div>
    <img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png">
    <van-row class="user-links">
      <van-col span="6">
        <van-icon name="pending-payment" />
        待付款
      </van-col>
      <van-col span="6">
        <van-icon name="records" />
        待接单
      </van-col>
      <van-col span="6">
        <van-icon name="tosend" />
        待发货
      </van-col>
      <van-col span="6">
        <van-icon name="logistics" />
        已发货
      </van-col>
    </van-row>

    <van-cell-group class="user-group">
      <van-cell icon="records" title="全部订单" is-link />
    </van-cell-group>

    <van-cell-group>
      <van-cell icon="points" title="我的积分" is-link />
      <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
      <van-cell icon="gift-o" title="我收到的礼物" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import { Row, Col, Icon, Cell, CellGroup } from 'vant';
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  }
};
</script>

<style lang="less">
.user {
  &-poster {
    width: 100%;
    display: block;
  }
  &-group {
    margin-bottom: 15px;
  }
  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>

然后提示构建失败，

image.png

原因是因为我们样式使用的方式less， 但是我们的没有安装：

image.png

ps:什么是less?
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

2：安装less和less-loader

 命令：npm install less less-loader --save

或者使用图形进行依赖安装：

image.png

这里我使用图形依赖安装。

安装完成后的结果：

image.png

相关的package.json配置更新为：

image.png

安装完成后查看对应的结果为：

image.png image.png

发现也没不对劲，相关的图标没居中：

image.png

修改对应的App.vue样式为demo中的：

image.png

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
body {
  font-size: 16px;
  background-color: #f8f8f8;
  -webkit-font-smoothing: antialiased;
}
</style>

最终效果：

image.png

引入Demo中三个示例到工程项目中：

1：修改router.js的路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/buycar',
      name: 'buycar',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/BuyCar.vue')
    }
  ]
})

替换相关的组件里的内容：

image.png

最终动图效果：

GIF.gif

引入组件知识点总结：

1：再main.js里配置

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

2：再需要使用的组件里面引入

<script>
    import {Row, Col, Icon, Cell, CellGroup} from 'vant';

    export default {
        components: {
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup
        }
    };
</script>