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

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

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

[code]node -v  ||  npm -v

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

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

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

[code]cnpm install webpack -g

3.安装vue

[code]cnpm install -g vue

4.安装vue-cli

[code]cnpm install -g vue-cli

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

[code]//在命令行输入: 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就已经安装完成了，项目也创建了，基本操作如下

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

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

[code]//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)