vue-cli安装配置并搭建element-UI

首先安装npm，然后安装vue-cli，最后初始化项目，需要注意的是网络很重要，如果网络好按步骤来很轻松就能安装配置好，如果网络不好的情况下，会出现多次npm err!的情况，这时候要清除缓存重装，重装好几次都不一定能成功

安装npm：

下载node的安装包进行安装。在命令行工具里输入npm -v  检测你是否安装了npm和版本情况

下载地址：http://nodejs.cn/download/

安装vue-cli

命令行操作：

1、npm install -g cnpm --registry=https://registry.npm.taobao.org

2、全局安装：npm install vue-cli -g   （全局卸载：npm uninstall vue-cli -g）

如安装失败输入npm cache clean --force 命令清除缓存重装

3、添加path：搜索vue.cmd的位置，一般地址为C:\Program Files\nodejs\node_global，把文件的路径加入Path中。

4、查看是否安装成功：vue -V

初始化项目

命令行操作：vue init webpack hello
输入命令后，会有几个简单的选项，根据需要选择

Project name :项目名称 ——默认

Project description:项目描述——默认

Author：作者——默认

Install  vue-router? 是否安装vue的路由插件——y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。——n

setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具——n

Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试——n

命令行操作：

1、cd hello 进入我们的vue项目目录

2、npm install  安装我们的项目依赖包，网络不好选用cnpm install

3、npm run dev 开发模式下运行我们的程序

4、浏览器中输入locahost:8080，到此完成npm安装配置

最后介绍下初始化命令使用和搭建element-ui：

vue init <template-name> <project-name>

<template-name>表示模板名称（一般使用webpack）：

webpack-一个全面的webpack+vue-loader的模板

webpack-simple-webpack-simple-一个简单webpack+vue-loader的模板

browserify-一个全面的Browserify+vueify 的模板

browserify-simple-一个简单Browserify+vueify的模板

simple-一个最简单的单页应用模板

<project-name>：标识项目名称

搭建element-ui：

在项目目录下输入命令行npm i element-ui -S，上面依赖包选了cnpm install这里要同步cnpm，否则run会报错

完成以后生成的项目如图，新建了table.vue并添加组件代码

在main.js中配置如下代码

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

Vue.use(ElementUI);

index中添加代码import和routes中的table

import table from '@/components/table'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {                
      path: '/table',
      name: 'table',
      component: table
    },
  ]
})

到此完成了elementUI组件引用，效果图如下