Vue+VueRouter+Webpack+Axios+ElementUI---构建项目实战(五)引入Element-UI和编写基础文件

执行以下命令：

yarn add element-ui

安装结束后，在main.js添加代码如下:

// 引入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

把src目录调整如下:

其中NavTop.vue的代码如下:

NavFooter.vue的代码如下:

AddressBook.vue的代码如下:

Find.vue的代码如下:

ME.vue的代码如下:

WX.vue的代码如下:

src/page/index.vue的代码如下:

在src/plugins下插入了阿里图标库中的svg(iconfont.js) ，至于为什么不适用类icon是因为有较多不是纯色的东西，不好设置想要的效果颜色icon。

在main.js添加代码如下:

// 引入iconfont
import './plugins/iconfont.js'

main.js最终代码为:

import Vue from 'vue'
import App from './App'
import router from './router'

// 引入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 引入iconfont
import './plugins/iconfont.js'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
}).$mount('#app')

阿里图库压缩包链接：

链接：https://pan.baidu.com/s/1-a4JTSFo3KwJLRb1t72VRg 
提取码：jrtt 

以上涉及的知识点有：

①子组件与父组件的通讯

子组件使用props接收父组件以参数 (:参数名)详情参考文档:Vue的Props

关于传值:

一：子组件通过this.$emit('方法名','参数1','参数2',...)传参到父组件;

二：父组件通过属性传参到子组件定义的props里面的对象与参数名一一对应，还通过watch监听到参数变化。

例子：

一：子组件NavFooter.vue中的this.$emit('tabClick', index)传参，
父组件通过@tabClick方法进行接受参数

二：子组件NavTop.vue中的props下的title接受参数，
通过watch监听title变化，父组件传参title。

②组件命名

组件命名规范

除了这两种，其实小驼峰命名也是可以的。

③动态组件的使用

动态组件