Element的使用

Element的使用

1. node.js的安装

官方网址：https://nodejs.org/en/

安装完成后：

打开命令行（cmd）检测版本信息：分别输入node -v npm -v

2. vue vue-cli脚手架工具安装

2.1 输入命令：npm install -g cnpm --registry=http://registry.npm.taobao.org

下载淘宝镜像，用cnpm来替代npm，加速我们接下来依赖环境的下载速度，使用npm 跳过此命令

2.2 全局安装 vue-cli ： npm install --global vue-cli

2.3 在电脑创建一个目录来保存vue项目，并进入到该目录下，新建项目

我的项目在E盘 输入 e:

跳转到新建目录下 cd element

创建一个项目：输入命令：vue init webpack elementui

elementui 为项目名，你可以自己随便起名，但要注意命名规则

运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息等等，

对于有些不明白或者不想填的信息可以一直按回车去填写。

接着去看项目是否创建成功：

2.4 缺少依赖文件

进入到项目中，安装项目的依赖

输入命令：cd elementui

输入命令：cnpm install 没有下载淘宝镜像请执行 npm install

如果安装过程无反应或者意外中断，可以关闭cmd重新打开，重复执行 cnpm install 命令。

安装完成：进入项目目录下可以看到elementui文件夹中多出一个node_modules文件夹

vue-cli脚手架安装成功！！！

3.安装element ui

输入命令：npm install element-ui -S

4.引入 Element

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

4.1 完整引入

elementui/src/main.js
在 main.js 中写入以下内容：

import Vue from 'vue'
import App from './App'
import router from './router'

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

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

4.2 按需引入

请参考 https://element.faas.ele.me/#/zh-CN/component/quickstart

4.3 全局安装「主题生成工具」：npm i element-theme -g

自定义主题 请参考https://element.faas.ele.me/#/zh-CN/component/custom-theme

5. 运行

5.1 在components下新建一个vue文件 demo.vue 页面

在 https://element.faas.ele.me/#/zh-CN/component/button element官网中复制一段代码
将以下模板复制到新建的vue页面：

<template>
  <div>
    <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>
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: 'demo',
    data() {
      return {
      }
    }
  }
</script>
<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
</style>

5.2 将新建的vue页面注册到路由管理当中：

打开router下面的Index.js文件，修改处为添加内容

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 修改处
import demo from '@/components/demo'
// 修改处
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 修改处
    {
      path: '/demo',
      name: 'demo',
      component: demo
    },
    // 修改处
  ]
})

5.3 删除App.vue当中多余的数据：

因为index.html入口是先进入App.vue当中然后通过router来找到各个vue页面的

App.vue相当于总的vue页面的入口

将 <img src="./assets/logo.png"> 这一行代码删除

5.4 执行 npm run dev

用浏览器访问：http://localhost:8080/#/demo 看效果

想查看其他效果请参考 https://element.faas.ele.me/#/zh-CN/component/layout