vue全家桶+element-UI搭建后台管理系统(1)“:构建项目并引入element-ui”
2018-03-05 14:45
1241 查看
1、:初始化,构建一个vue项目:
vue init webpack Administrators;
2、:安装element-ui:
cnpm i element-ui -S;具体安装请看这里点击打开链接
3、在项目中使用element-ui:
在main.js引入,并使用:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);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>
现在已经成功引入element-ui框架
vue init webpack Administrators;
? 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测试
2、:安装element-ui:
cnpm i element-ui -S;具体安装请看这里点击打开链接
3、在项目中使用element-ui:
在main.js引入,并使用:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);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>
现在已经成功引入element-ui框架
相关文章推荐
- vue全家桶+element-UI搭建后台管理系统(2)“:引入基本样式和图标库”
- vue全家桶+element-UI搭建后台管理系统(3)“:使用element-ui搭建基本后台页面”
- vue全家桶+element-UI搭建后台管理系统(4)“:登录拦截,登陆后才可以操作”
- 使用 vue-cli + element-ui 快速搭建项目
- 构建vue全家桶项目-引入vue-resource
- vue-cli快速构建工程 ElementUI axios router 引入使用
- vue 2.0项目中如何引入element-ui详解
- 【vue】vue项目引入 Element-UI
- 使用ES6+vue+elementui+webpack搭建简单项目
- 使用ES6+vue+elementui+webpack搭建简单项目
- webpack+vue+elementui构建后台管理系统
- vue.js + element-ui + webpack项目搭建
- 极速快三平台出租laravel+vue+element-ui 搭建和静态文件优化篇
- 用vue构建项目笔记3(引入jquery和bootstrap)
- VUE + ElementUI 从搭建到运行
- EasyDSS高性能流媒体服务器前端重构(三): webpack + vue + AdminLTE 多页面引入 element-ui
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- 在vue项目中使用element-ui的Upload上传组件的示例
- VUE2.0的简单入门(一)-安装node.js环境搭建与项目构建
- 20171102vue.js2.0:搭建开发环境及构建项目