Vue.js入门教程（十四）使用Element UI框架开发

2019-10-08 本文已影响0人党云龙

第十三章：使用Element UI框架开发

Element UI 框架介绍

我记得几年前，好多公司用bootstrap+jquery开发网站，那个时候还没有vue和react。做网站就靠前端手写页面，后端再做成一个php或者jsp。
你要说这种开发模式其实也没什么不好，甚至现在我看到的很多政府官网都是单纯的php或者jsp做的。但是毕竟时代在进步，我们也不能驻足不前。
element是饿了么团队出品，它相当于是vue的bootstrap UI框架。它本身已经把很多小的脚本给咱们写好了。譬如说，按钮组，选项卡，焦点图等。
我这个博客也是基于element做的，有了它确实方便了很多。它最大的优点就是，只要你在官网上看到的，拿过来就可以用。

开始安装

1.直接通过script方式引入

<script src="https://cdn.bootcss.com/element-ui/2.10.0/index.js"></script>

加载以后，你打开elementui的官网，直接复制上面的代码即可！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css"/>
    </head>
    <body>
        <div id="app">
            <el-row>
              <el-button>默认按钮</el-button>
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="info">信息按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
            </el-row>
        </div>
        
        <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/element-ui/2.10.0/index.js"></script>
        
        <script>
            //加载element
            Vue.use(ELEMENT);
            new Vue({
                el:"#app",
                data:{
                    message:3
                },
                methods: {
            
                },
                mounted: function() {
                    
                }
            })
        </script>
    </body>
</html>

2.npm安装方式：

注意：如果你对npm包管理不熟悉，建议你跳过这一章，先阅读后面关于vuecli的使用方法的章节！

cnpm install element-ui -s-d

在main.js中添加以下几行代码

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

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

注意：在element中规范了字体，在不同系统中防止字体变化。我直接放在了#app的样式上了。

font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

写在最后

ok，看到这里。vue全部入门教程，已经包含了axios，vuex，route的全部用法。这个时候，你已经可以开始构建自己的项目了。
不过，你应该会发现，每次都从页面上去加载这些东西，确实很麻烦，并且发布，打包，优化。还有一些前端厉害的sass啊，less啊。
根本就没有用上。

又没有什么好的方法，让我们一次整合这些支持包，然后还能打包优化，甚至一键发布？

当然有！请看我的后继教程——vuecli2入门教程—自己搭建前端自动化工程。