VUE安装使用element-ui插件

了解element-ui请到官网：https://element.eleme.cn/#/zh-CN/component/installation

 在WebStorm编辑器的项目终端中使用安装命令：cnpm i element-ui --save 或者cnpm  install  element-ui  -S

等待如下安装信息：

D:\webstormworkspace\sobblogadmin>
D:\webstormworkspace\sobblogadmin>cnpm i element-ui --save
√ Installed 1 packages
√ Linked 10 latest versions
[1/1] scripts.postinstall [email protected] › [email protected] › [email protected] › core-js@^2.4.0 run "node -e \"try{require('./postinstall')}ca
tch(e){}\"", root: "D:\\webstormworkspace\\sobblogadmin\\node_modules\\[email protected]@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

[1/1] scripts.postinstall [email protected] › [email protected] › [email protected] › core-js@^2.4.0 finished in 252ms
√ Run 1 scripts
deprecate [email protected] › [email protected] › [email protected] › core-js@^2.4.0 core-js@<3 is no longer maintained and not recommended for usa
ge due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
√ All packages installed (11 packages installed from npm registry, used 9s(network 9s), speed 344.53kB/s, json 11(97.14kB), tarball 2.77MB)

D:\webstormworkspace\sobblogadmin>

安装完成后，可以在项目的package.json文件中的依赖配置部分查看版本：

  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.14.1",
    "vue": "^2.6.11",
    "vue-router": "^3.4.9"
  },

这里是2.14.1版本。安装完后下面就是引入使用了，继续.....

后面总结使用示例。跨年快乐！新的2021年新的开始！新的自己！努力提升自己！善待岁月！善待自己！

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入，在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。部分引入请参考官网（快速上手）：https://element.eleme.cn/#/zh-CN/component/quickstart

引入后，下面说一下最基础的Button按钮的使用：

点击页面中的“显示代码”后，会展现如下的代码段，这些代码都是与上面图示效果一一对应 的，我们用一个默认的按钮样式：

复制如下：

  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

这这段代码复制到需要使用的vue组件界面中，比如：

显示效果如下：

效果是不是还不错！只是最基础的代码段引用！相信小伙伴都会举一反三！

Container布局容器的使用：

同样是点击“显示代码”复制相应的代码：

  Header
  
    Aside
    
      Main
      Footer
    
  

布局代码就要用在布局视图中，所以我们的布局文件如下：

base-view.vue组件页面：

上面的代码展示效果图如下：

下面将使用上面Element-ui的Container布局容器的代码段对其改造，将对应的头部、侧栏、主内容部分、尾部分挪入容器中，改造后的base-view.vue组件页面代码，如下：

其中标签中的样式也是复制element-ui中“显示代码”’中的样式代码。

app.vue中代码：添加了内外边距设置为0

改造后的布局效果如下：

好了，这里只是简单的使用总结！