九儿姑娘`
九儿姑娘`

VUE框架——element-ui的学习

VUE框架——element-ui的学习

  • 在webstorm中打开项目
  • 安装element-ui
  • 配置main.js
  • 几个简单的组件
    • row组件
    • input组件
    • button组件
    • table组件
    • dialog组件
  • 引入js以及其他的vue
    • 引入js
    • 引入vue

在webstorm中打开项目

点击file，点击open
VUE框架——element-ui的学习_第1张图片
找到我们构建好的vue项目并选中
在这里插入图片描述
切换到我们的项目所在路径
在这里插入图片描述

安装element-ui

VUE框架——element-ui的学习_第2张图片
VUE框架——element-ui的学习_第3张图片
输入npm run dev
VUE框架——element-ui的学习_第4张图片
VUE框架——element-ui的学习_第5张图片

点击http://localhost:8080进入到浏览器
VUE框架——element-ui的学习_第6张图片

配置main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

几个简单的组件

首先，在每个