Vue结合element-ui

Vue结合element-ui

1.首先需要构建好vue

#查看 node和npm是不是已经安装好命令：(没有安装的先安装环境);
node -v  npm -v 
#(安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)
npm install -g cnpm --registry=https://registry.npm.taobao.org  
#安装 vue-cli   
cnpm install -g vue
cnpm install -g vue-cli 
#安装 webpack   
cnpm install -g webpack 
#cd  你的运行目录
#新建vue项目      
vue init webpack vuedemo
#进入项目目录     
cd vuedemo
#安装依赖        
cnpm install
#运行项目        
cnpm run dev
#发布项目       
cnpm run build
#注：mac电脑需要在安装淘宝镜像前执行： sudo chown -R $USER /usr/local

2.使用element-ui前需要安装的模块:

cnpm install element-ui --save

3.引入Element前面已经全局安装了element-ui，现在只需要在项目中引入即可。

• 打开项目在src/main.js中添加下面三条

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

4. 在项目的src下的App.vue中修改为以下代码

<template>
  <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>
    <router-view/>
  </div>
</template>

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

• 出现以下效果就说明配置成功了。
  

来自为知笔记(Wiz)