这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作，待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员，接触前端时间不长，这里有说的不好的地方，还请大家评论建议下。
1. 安装必要的环境准备
首先我们要能够暗转node.js,这个环境。百度搜索node，进入官网根据自己的操作系统进行下载即可。现在的版本都是自带npm的了。所以安装后，环境变量正常情况下会自动配置，开启一个命令行终端，输入node，npm，就可以看到相应的信息。那么说明安装成功。
2. cnpm
由于我们在国内，所以npm的下载路径对我们来说是很慢的，因此我们要使用淘宝提供的cnpm镜像（与maven镜像是一个效果。）百度搜索cnpm，点击进行官网，里面的教程很详细，这里也不会啰嗦了。
3. 正式搭建vue-cli
我们首先进行vue-cli的一个下载：
cnpm install -g vue-cli
里面会跟着将webpack一起下载下来，如果没有，那么我们也可以手动自己下载一下webpack就好了，命令相同，只是把vue-cli换成webpack。
下载好之后，进入一个合适的目录，然后输入：
vue-cli webpack vuedemo1
webpack参数是指：我们使用webpack的这套模板
Vuedemo1指：我们在此目录下新建一个名字叫做vuedemo1的目录并将其作为项目的跟目录。
这样，一个空的vue-cli项目就搭建好了
测试一下，输入：
npm run dev
默认开启8080端口，并打开默认浏览器，看到一个熟悉的vue的页面。
4. 配置文件讲解
本身对配置文件理解的并不是特别深刻，这里将自己了解的一些配置含义写出来，共同学习一下。
bulid目录下面的webpack.base.config.js：这里一般是一些基础信息的配置，用过webpack的小伙伴应该都比较熟悉，这里简单讲解一下各个属性：
input：代表入口文件，这里一般指定的是index.html
output：出口文件。
module：这里一般写的的针对各个文件的配置的解析loader。
resolve：这里指其他配置，里面一般有：alias：起别名，例如：
alias: { ‘vue$': ‘vue/dist/vue.esm.js', ‘@': resolve(‘src'), ‘RegForm': ‘@/components/RegForm.vue' //新增 }
我这里新增一个别名，代表一个路径，这样，以后要引入这个vue文件的时候，直接：
import Regfrom from “RegForm”就可以了。
前面加@，因为默认的配置中将@，取名为resolve（'src'）,解析了绝对路径。
build下面dev-server.js：
// 检查NodeJS和npm的版本 require('./check-versions')() // 获取配置 var config = require('../config') // 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使用config中的配置作为当前的环境 if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) } // 一个可以调用默认软件打开网址、图片、文件等内容的插件 // 这里用它来调用默认浏览器打开dev-server监听的端口，例如：localhost:8080 var opn = require('opn') var path = require('path') var express = require('express') var webpack = require('webpack') // 一个express中间件，用于将http请求代理到其他服务器 // 例：localhost:8080/api/xxx --> localhost:3000/api/xxx // 这里使用该插件可以将前端开发中涉及到的请求代理到API服务器上，方便与服务器对接 var proxyMiddleware = require('http-proxy-middleware') // 根据 Node 环境来引入相应的 webpack 配置 var webpackConfig = process.env.NODE_ENV === 'testing' ? require('./webpack.prod.conf') : require('./webpack.dev.conf') // dev-server 监听的端口，默认为config.dev.port设置的端口，即8080 var port = process.env.PORT || config.dev.port // 用于判断是否要自动打开浏览器的布尔变量，当配置文件中没有设置自动打开浏览器的时候其值为 false var autoOpenBrowser = !!config.dev.autoOpenBrowser // 定义 HTTP 代理表，代理到 API 服务器 var proxyTable = config.dev.proxyTable // 创建1个 express 实例 var app = express() // 根据webpack配置文件创建Compiler对象 var compiler = webpack(webpackConfig) // webpack-dev-middleware使用compiler对象来对相应的文件进行编译和绑定 // 编译绑定后将得到的产物存放在内存中而没有写进磁盘 // 将这个中间件交给express使用之后即可访问这些编译后的产品文件 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true }) // webpack-hot-middleware，用于实现热重载功能的中间件 var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {} }) // 当html-webpack-plugin提交之后通过热重载中间件发布重载动作使得页面重载 compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) // 将 proxyTable 中的代理请求配置挂在到express服务器上 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] // 格式化options，例如将'www.example.com'变成{ target: 'www.example.com' } if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) }) // handle fallback for HTML5 history API // 重定向不存在的URL，常用于SPA app.use(require('connect-history-api-fallback')()) // serve webpack bundle output // 使用webpack开发中间件 // 即将webpack编译后输出到内存中的文件资源挂到express服务器上 app.use(devMiddleware) // enable hot-reload and state-preserving // compilation error display // 将热重载中间件挂在到express服务器上 app.use(hotMiddleware) // serve pure static assets // 静态资源的路径 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) // 将静态资源挂到express服务器上 app.use(staticPath, express.static('./static')) // 应用的地址信息，例如：:8080 var uri = 'http://localhost:' + port // webpack开发中间件合法（valid）之后输出提示语到控制台，表明服务器已启动 devMiddleware.waitUntilValid(function () { console.log('> Listening at ' + uri + '\n') }) // 启动express服务器并监听相应的端口（8080） module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } // when env is testing, don't need open it // 如果符合自动打开浏览器的条件，则通过opn插件调用系统默认浏览器打开对应的地址uri if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } })
3.build/webpack.dev.conf.js (npm run dev用到的配置文件 )