之前的项目，我们已经初步展示如果通过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>
