vue项目常用依赖安装②—

一、介绍

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，中文官方地址如下：Element-Ul官网

二、安装

npm install element-ui -S

三、配置

1. 在main.js文件中引入 element 组件：

// 程序入口：环境依赖，插件
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置
import router from './router'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false
//引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 定义实例
new Vue({el: '#app',router,// 注入框架中components: { App },template: '<App/>'
})

2. 在静态文件下static文件夹创建css文件夹下的一个全局公用common.css ：

3. 全局公用common.css 代码如下（按自己需求来写css）：

@charset"utf-8";body {margin: 0 auto;background: #fbfbfb;font-family:"Microsoft YaHei", "Arial";font-size: 13px;color: #383838;position: relative;
}
html {padding: 0;height: 0;overflow-y: scroll;
}
ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, input, button {margin: 0;padding: 0;
}
ul, ol {list-style: none;
}
img {border: none;
}
.lf {float: left;
}
.rt {float: right;
}
input, button, textarea {outline: none;font-family:"Microsoft YaHei";
}
a {color: #383838;text-decoration: none;
}
a:hover {text-decoration: none;
}
em {font-style: normal;
}
.link {display: block;width: 100%;
}
input, button, textarea, select, optgroup, option {font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;
}
ul, li, dl, dt, dd, ol {display: block;list-style: none;
}
img {border: 0;
}
.clear {clear: both;height: 0;
}
.clear-fix:after, .clearfix:after {content:".";display: block;height: 0;font-size: 0;clear: both;visibility: hidden;
}
a {text-decoration: none;outline: 0;
}

vue项目常用依赖安装②——element-ui相关推荐

在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速的搭建网站,提高开发的效率 ElementUI PC端 MintUI 移动端一.全部引入安装element-ui cnp ...
vue项目，引入插件element ui 样式不生效
用vue ui 命令引入插件 element ui 样式不生效步骤一:执行如下命令,安装babel-plugin-component npm install babel-plugin-compon ...
Vue项目常用依赖包
1.1 项目依赖包 npm install --save vue 1.2 开发依赖包 npm install --save-dev webpack 2. less依赖包 npm install --s ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
vue表格显示图片，采用element ui实现
项目场景: vue表格显示图片,采用element ui实现 <template><el-table :data="tableData" style=" ...
Bootstrap前端框架学习（一）：Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局 node.js的安装 bootstrap的安装 bootstrap快速布局 node.js的安装我们需要安装 ...
cmd命令 - vue项目：单独安装vue-router
cmd命令 - vue项目:单独安装vue-router 今天做测试的时候,发现之前的vue项目忘记安装vue-router 为了让项目能重新跑起来,只能另外安装一下vue-router 这里,总结一 ...
Vue 安装 Element UI时报错 code ERESOLVE unable to resolve dependency tree
检查当前版本是否为 npm 7.x,7.x对树依赖检查更严格,需要在命令后增加--legacy-peer-deps以规避此报错,在安装其他依赖时如果报错类似也可如此解决,当然也可以将npm降级到6.x ...
win10快速搭建vue开发环境并使用element ui
1,环境 1.1 node.js安装下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 选安装目录进行安装(安装过程就是全程next,注意不要取消自动 ...

vue项目常用依赖安装②——element-ui

一、介绍

二、安装

三、配置

vue项目常用依赖安装②——element-ui相关推荐

最新文章

热门文章