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. .net core从版本 3.0 迁移到 3.1引发的BUG

    前几天微软的.net core3.1发布后,随把visual studio 2019升级到16.4.1版本并把项目进行框架升级.升级后的项目在IdentityServer4授权后在360安全浏览器竟然 ...

  2. emacs 缩进

    emacs提供一些编码风格,可以使用M-x c-set-style来选择你喜欢的编码风格. Possible completions are: awk bsd cc-mode ellemtel gnu ...

  3. [PHP] 内部接口简单加密验证方式

    1. 当有内部系统之间进行调用的时候,也需要简单的进行一下调用方的验证,一种简单的内部接口加密验证方式.此加密方式需要三个参数,分别是api地址,pin码,entry标识,其中pin和entry是接口 ...

  4. GitHub密钥生成

    前提电脑上需装有Git软件 这里提供百度云下载地址:https://pan.baidu.com/s/1r0y4XRyQCz7ZJBnZJhAtqw 提取码:88qf  1.登录GitHub账号 2.点 ...

  5. Oracle SQL日期及日期格式获取命令

    日期及日期格式: 获取系统日期: sysdate() 格式化日期 to_char(sysdate(),'yyyy-mm-dd,hh24:mi:ss') to_date(sysdate(),'yyyy- ...

  6. 4.web基础$_POST

  7. LeetCode 62. Unique Paths不同路径 (C++/Java)

    题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...

  8. Paper | Non-Local ConvLSTM for Video Compression Artifact Reduction

    目录 1. 方法 1.1 框图 1.2 NL流程 1.3 加速版NL 2. 实验 3. 总结 [这是MFQE 2.0的第一篇引用,也是博主学术生涯的第一篇引用.最重要的是,这篇文章确实抓住了MFQE方 ...

  9. ImportError: cannot import name 'render_to_response' 解决方法

    前几天 Django 官方推出了 3.0 框架,项目在 K8S 内部署启动的时候,报了这个错:ImportError: cannot import name 'render_to_response' ...

  10. vue数据更改视图不更新问题----深入响应式原理

    Vue响应式原理之官方解释 当你把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为get ...