vue学习笔记_引入第三方饿了吗组件(ElementUI)

ElementUI组件官网：http://element-cn.eleme.io/#/zh-CN/component/installation

 

原创地址：https://blog.csdn.net/zhouzhiwengang/article/details/74625407

第一步：新建Vue 项目（详细创建步骤请参考：https://blog.csdn.net/tangcv/article/details/81941495）

 

#创建一个基于webpack模板的新项目

vue init webpack d:\nodeworkspace\nodeone

# 切换至项目路径

cd d:\nodeworkspace\nodeone

# 安装项目依赖文件

cnpm install

# 项目启动

cnpm run dev

第二步：引入饿了吗组件（ElementUI）

1、打开cmd 窗口，切换到vue 所在目录，执行如下指令： cnpm  i  element-ui  s

 

第三步：vue 项目引用ElementUI.,（注意红色字体部分）

src/router/index.js

注意【import 'element-ui/lib/theme-chalk/index.css'】和官网的同步，原来看别人博客上就是这里问题，找了好久

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Router)
Vue.use(ElementUI)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

组件引用相关样式：src/components/HelloWorld.vue

效果展示：