webpack安装、cnpm安装、vue安装、vue-cli安装、element安装全过程 ，给大家分享一下

从webpack 到 vue ui框架安装全过程 , 方法如下

1.检查是否安装node、npm , 我们可以先版本信息,查看是否安装

node -v  ||  npm -v
  
//显示版本好的号的话版本号说明白已经安装了, 如果想要安装cnpm,可以去淘宝镜像http://npm.taobao.org/

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

2.安装 webpack,(-g 全局安装)

cnpm install webpack -g

3.安装vue

cnpm install -g vue

4.安装vue-cli

cnpm install -g vue-cli

5.安装完以后，可以输入vue-list ， 查看可用的官方模板

//在命令行输入: vue-list
  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

//我们这里用到的是webpack框架,所以直接在命令行
: vue init webpack (name)

6.到这里vue就已经安装完成了，项目也创建了，基本操作如下

cnpm install  //安装依赖
npm run dev  //运行项目
npm run build //打包项目

7.我们在这里安装一个UI框架，element-ui

//1.输入安装命令
    cnpm install element-ui --save

//2.在webpack.base.conf.js中添加配置
 {
    test: /\\\\\\\\.css$/,
    loader: "style!css"
 },
 {
    test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
    loader: "file"
 }

    
//3.找到src/main.js,引入就好了,如下:
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    Vue.use(ElementUI)