vue.js项目中,关于element-ui完整引入、按需引入的介绍
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element-ui引入方式,简单说来有两种:完整引入
、按需引入
首先谈一下npm
安装element-ui
的方法:
cmd
到项目目录,然后执行cmd命令:npm i element-ui -S
稍等片刻,这样就安装OK了。
[起初node_modules在单项目文件内],其实后面完全可以剔出来,方便多个项目公共使用!
下面就这两种方式,简单说一下如何操作,详细请参考 官网相关文档;
1. 完整引入
import Element from 'element-ui';
//样式文件,需单独引入
import 'element-ui/lib/theme-chalk/index.css';
对应的代码,如下:
Vue.use(Element, { size: 'small' });
属性
size
取值 (small ,big ,
) ,决定组件尺寸的大小。
2. 按需引入
import {
Pagination,
Dialog,
···省略···
Footer,
Loading,
MessageBox,
Message,
Notification
} from 'element-ui';
//样式文件,需单独引入
import 'element-ui/lib/theme-chalk/index.css';
对应的代码,如下:
Vue.use(Pagination);
Vue.use(Dialog);
···省略···
Vue.use(Footer);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
以上就是关于“vue.js项目中,关于element-ui完整引入、按需引入的介绍”的全部内容。
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献27条内容
所有评论(0)