vue（4）elementUI的安装与使用

ElementUI的安装

1.进入要创建的工程的目录
cmd 管理员身份。
2.创建webpack工程
vue init webpack Element-Demo
3.进入项目目录
cd Element-Demo
4.安装路由
npm install vue-router --save-dev
5.安装element-ui
npm i element-ui -S
6.安装依赖
npm install
7.安装SASS加载器
cnpm install sass-loader node-sass --save-dev
8.启动测试
npm run dev

npm命令解释

1.npm install +项目名：安装模块到项目下
2.npm install -g +项目名：安装项目到全局，具体位置，查看npm config prefix
3.npm install -save +项目名：–save的意思是将模块安装到项目目录下，并在package文件的dependecies节点写入依赖，-S
为缩写
4.npm install -save-dev +项目名：–save-dev与上相似，写入依赖的节点是devDependecies，-D为缩写。

elementUI的使用

1.创建组件，去官方文档拿,buttons.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 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: "button"
    }
</script>

<style scoped>

</style>

2.设置路由,index.js

import  Vue from 'vue'
import VewRouter from 'vue-router'

import Button from '../views/Button'

Vue.use(VewRouter);

export default new VewRouter({
    routes:[
      
      {
        path:'/button',
        component:Button
      }
    ]
});

3.导入路由和elementUI,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(router);
Vue.use(ElementUI);

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

4.展示App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>