1、初始化创建一个vue项目:

打开终端输入命令

vue init webpack vueui

----------------------------------

? Project name mydemovue                        # => 项目名称
? Project description A Vue.js project # => 项目描述
? Author malun <malun666@126.com> # => 作者
? Vue build standalone # => 是否支持单文件组件
? Use ESLint to lint your code? Yes # => 是否支持ESLint代码校验
? Pick an ESLint preset Standard # => 校验的标准是什么?
? Setup unit tests with Karma + Mocha? Yes # => 是否使用单元测试
? Setup e2e tests with Nightwatch? Yes # => 是否使用e2e测试

注意:Use ESLint to lint your code 可以选择NO 不然会做校验,提示代码警告。

2、切换到项目下,安装element-ui:

# 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

3、在项目中使用element-ui:

在main.js引入,并使用:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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: '<App/>'
})

4、查看效果:

修改下components->HelloWorld.vue:

<template>
<div>
<el-button @click="show = !show">Click Me</el-button> <div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-fade-in-linear">
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
</transition>
<transition name="el-fade-in">
<div v-show="show" class="transition-box">.el-fade-in</div>
</transition>
</div>
</div>
</template> <script>
export default {
data: () => ({
show: true
})
}
</script> <style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>

启动项目

npm run dev

现在已经成功引入element-ui框架

Vue+ElementUI 安装与应用的更多相关文章

  1. Vue/Element-ui 安装搭建开发环境(一)

    Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1. ...

  2. 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用

    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...

  3. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  4. laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)

    本教程例子可到GitHub 上下载 Laravel5.5-Vue-Element-ui-Vux 1.laravel5.5安装,详情请参考: https://laravelacademy.org/pos ...

  5. VUE + ElementUI 从搭建到运行

    版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 前言:本文简洁的描述VUE + ElementUI 从搭建到运行,可以根据本文先搭建出可运行的项目,然后再详细回顾每个步骤所做的事: ...

  6. vue element-ui 日期选择器组件 日期时间格式化

    vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件: element-ui 日期返回的格式是这样的,看下图: 但我们要的是另一个格式 , 如下 ...

  7. 01: vue.js安装

    1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...

  8. vue+element-ui实现无限级动态菜单树

    使用vue+element-ui实现无限级动态菜单 该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件 搭建项目并 ...

  9. vue element-ui IE9--11报 “无法获取未定义或null引用的属性‘toLowerCase’”

    今天做zymh比赛的一个管理后台,用的技术是vue+element-ui+vue-router+axios,其他浏览器运行的很好,但是在IE(从IE11到IE9,vue支持IE9以上)都报错 点进去就 ...

随机推荐

  1. Linux系统快速操作常用快捷键

    快捷键名称 快捷键作用 Ctrl + a 将光标移至行首 Ctrl + e 将光标移至行尾 Ctrl + u 前提光标在行尾,则清除当前行所有的内容(有空格照章清除) Ctrl + k 前提光标在行首 ...

  2. Ubuntu Terminal「控制台」

    nautilus /~ 以窗口形式打开一个文件夹 sudo cp /~ /~ 拷贝文件到指定路径 rm ~ 删除文件 sudo apt-get install –f 依赖 sudo apt-get u ...

  3. 监控类shell脚本

    1)开头加解释器:#!/bin/bash 2)语法缩进,使用四个空格:多加注释说明. 3)命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用. 4)默认变量是全局的,在函数中变量l ...

  4. golang中的接口

    CSDN找的一个网页,照着抄练一次. 差不多的使用场景都在了. package main import ( "fmt" ) type People interface { Retu ...

  5. pdfium 例子

    #include <stdio.h> #include <fpdfview.h> int main(int argc, char** argv) { FPDF_InitLibr ...

  6. 关于字符串在ie浏览器拼接问题

    常用的字符串在ie浏览器拼接不识别的问题,建议不要使用字符串拼接,可直接用jquery添加方便快捷一些

  7. Win10安装 oracle11g 出现INS-13001环境不满足最低要求解决方法

    Win10安装 oracle11g 出现INS-13001环境不满足最低要求 首先,打开你的解压后的database文件夹,找到stage,然后cvu,找到cvu_prereq.xml文件,用note ...

  8. QFile 打开文件,不用先判断文件名是否为空,做这多余的工作

    void test_file() { QFile file(""); if (!file.open(QIODevice::WriteOnly)){ qDebug()<< ...

  9. System.gc()和Runtime.gc()的区别?

    java.lang.System.gc()只是java.lang.Runtime.getRuntime().gc()的简写,两者的行为没有任何不同 System.gc()和runtime.gc()用于 ...

  10. java 常见高级开发面试题 非算法等特定岗 一

    基础1.List和Set区别 List:1.可以允许重复的对象. 2.可以插入多个null元素. 3.是一个有序容器,保持了每个元素的插入顺序,输出的顺序就是插入的顺序. 4.常用的实现类有 Arra ...