Vue-cli引入element-ui简单示例

我会带着你远行 2021-10-06 03:12 260阅读 0赞

### Vue-cli引入element-ui简单示例 ###

*  参考官方
 *  项目创建
 *  添加element-ui
 *   *  安装
     *  引入
 *  示例

# 参考官方 #

vue：[https://cn.vuejs.org/][https_cn.vuejs.org]  
nodejs：[http://nodejs.cn/][http_nodejs.cn]  
element-ui：[http://element-cn.eleme.io/\#/zh-CN/component/installation][http_element-cn.eleme.io_zh-CN_component_installation]

# 项目创建 #

请参考：[https://blog.csdn.net/qq\_15764943/article/details/86300310][https_blog.csdn.net_qq_15764943_article_details_86300310]

# 添加element-ui #

## 安装 ##

（1）方式一：npm安装

cnpm i element-ui -S

（2）方式二：依赖安装

package.json添加依赖 "element-ui": "^2.2.1"
    cnpm install

## 引入 ##

在main.js中，引入

import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70]

# 示例 #

添加element按钮  
（1）创建组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 1]  
（2）注册路由  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 2]  
（3）首页使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 3]  
（4）页面效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 4]

[https_cn.vuejs.org]: https://cn.vuejs.org/
[http_nodejs.cn]: http://nodejs.cn/
[http_element-cn.eleme.io_zh-CN_component_installation]: http://element-cn.eleme.io/#/zh-CN/component/installation
[https_blog.csdn.net_qq_15764943_article_details_86300310]: https://blog.csdn.net/qq_15764943/article/details/86300310
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70]: /images/20211006/e124e53bdf9d4fcb87bd5e170dc7b9a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 1]: /images/20211006/68a600671cfa442ebfebc4ccc06d5d2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 2]: /images/20211006/43f1cf7432dc4b67b216ab132fa015b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 3]: /images/20211006/f1a25ba1fb78494b9247a8be25a15590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 4]: /images/20211006/f1d6b8b505c443159216992ff41bfe27.png