vue2.0项目引入element-ui模块

从新建vue项目到引入组件Element的步骤如下所示：

1.新建vue-cli项目

1.查看 node和npm是不是已经安装好命令：node -v  npm -v (没有安装的先安装环境);
2.npm install -g cnpm --registry=https://registry.npm.taobao.org 
 (安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)
3.安装 vue-cli   
    1、cnpm install -g vue
    2、cnpm install -g vue-cli 
4. 安装 webpack   cnpm install -g webpack 
5.cd  你的运行目录
6.新建vue项目      vue init webpack vuedemo
7.进入项目目录     cd vuedemo
8.安装依赖         cnpm install
9.运行项目         cnpm run dev
10.发布项目        cnpm run build

2.安装element-ui模块

1. 安装 Element-UI 模块

   cnpm install element-ui --save 

3.引入element-ui模块，全局安装了element-ui，只需要在Vue项目中引入即可

(1)完整引入lement

 1、引入Element，打开项目，找到src/main.js文件,添加下面代码
  import Element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'如果引入这个方法报错，则引入下面方法
  (import '../node_modules/element-ui/lib/theme-default/index.css')
  Vue.use(Element)

(2)按需引入Element

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

具体详情可以看element-ui官网：element.eleme.cn/#/zh-CN/com…

4.运行项目

cnpm run dev

5.测试安装element-ui模块是否成功

 在.vue文件里就直接可以用了
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="text">文字按钮</el-button>

6.运行结果：(成功)