Vue-cli引入element-ui简单示例

Vue-cli引入element-ui简单示例

  • 参考官方
  • 项目创建
  • 添加element-ui
    • 安装
    • 引入
  • 示例

参考官方

vue:https://cn.vuejs.org/
nodejs:http://nodejs.cn/
element-ui:http://element-cn.eleme.io/#/zh-CN/component/installation

项目创建

请参考:https://blog.csdn.net/qq_15764943/article/details/86300310

添加element-ui

安装

(1)方式一:npm安装

cnpm i element-ui -S

(2)方式二:依赖安装

package.json添加依赖 "element-ui": "^2.2.1"
cnpm install

引入

在main.js中,引入

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

Vue-cli引入element-ui简单示例_第1张图片

示例

添加element按钮
(1)创建组件
Vue-cli引入element-ui简单示例_第2张图片
(2)注册路由
Vue-cli引入element-ui简单示例_第3张图片
(3)首页使用
Vue-cli引入element-ui简单示例_第4张图片
(4)页面效果
Vue-cli引入element-ui简单示例_第5张图片

你可能感兴趣的:(JS,element-ui,vue-cli)