Vue+ElementUI 安装与应用
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 安装与应用的更多相关文章
- Vue/Element-ui 安装搭建开发环境(一)
Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1. ...
- 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用
Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)
本教程例子可到GitHub 上下载 Laravel5.5-Vue-Element-ui-Vux 1.laravel5.5安装,详情请参考: https://laravelacademy.org/pos ...
- VUE + ElementUI 从搭建到运行
版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 前言:本文简洁的描述VUE + ElementUI 从搭建到运行,可以根据本文先搭建出可运行的项目,然后再详细回顾每个步骤所做的事: ...
- vue element-ui 日期选择器组件 日期时间格式化
vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件: element-ui 日期返回的格式是这样的,看下图: 但我们要的是另一个格式 , 如下 ...
- 01: vue.js安装
1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...
- vue+element-ui实现无限级动态菜单树
使用vue+element-ui实现无限级动态菜单 该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件 搭建项目并 ...
- vue element-ui IE9--11报 “无法获取未定义或null引用的属性‘toLowerCase’”
今天做zymh比赛的一个管理后台,用的技术是vue+element-ui+vue-router+axios,其他浏览器运行的很好,但是在IE(从IE11到IE9,vue支持IE9以上)都报错 点进去就 ...
随机推荐
- Linux系统快速操作常用快捷键
快捷键名称 快捷键作用 Ctrl + a 将光标移至行首 Ctrl + e 将光标移至行尾 Ctrl + u 前提光标在行尾,则清除当前行所有的内容(有空格照章清除) Ctrl + k 前提光标在行首 ...
- Ubuntu Terminal「控制台」
nautilus /~ 以窗口形式打开一个文件夹 sudo cp /~ /~ 拷贝文件到指定路径 rm ~ 删除文件 sudo apt-get install –f 依赖 sudo apt-get u ...
- 监控类shell脚本
1)开头加解释器:#!/bin/bash 2)语法缩进,使用四个空格:多加注释说明. 3)命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用. 4)默认变量是全局的,在函数中变量l ...
- golang中的接口
CSDN找的一个网页,照着抄练一次. 差不多的使用场景都在了. package main import ( "fmt" ) type People interface { Retu ...
- pdfium 例子
#include <stdio.h> #include <fpdfview.h> int main(int argc, char** argv) { FPDF_InitLibr ...
- 关于字符串在ie浏览器拼接问题
常用的字符串在ie浏览器拼接不识别的问题,建议不要使用字符串拼接,可直接用jquery添加方便快捷一些
- Win10安装 oracle11g 出现INS-13001环境不满足最低要求解决方法
Win10安装 oracle11g 出现INS-13001环境不满足最低要求 首先,打开你的解压后的database文件夹,找到stage,然后cvu,找到cvu_prereq.xml文件,用note ...
- QFile 打开文件,不用先判断文件名是否为空,做这多余的工作
void test_file() { QFile file(""); if (!file.open(QIODevice::WriteOnly)){ qDebug()<< ...
- System.gc()和Runtime.gc()的区别?
java.lang.System.gc()只是java.lang.Runtime.getRuntime().gc()的简写,两者的行为没有任何不同 System.gc()和runtime.gc()用于 ...
- java 常见高级开发面试题 非算法等特定岗 一
基础1.List和Set区别 List:1.可以允许重复的对象. 2.可以插入多个null元素. 3.是一个有序容器,保持了每个元素的插入顺序,输出的顺序就是插入的顺序. 4.常用的实现类有 Arra ...