這里建議剛學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:8080var 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設置的端口，即8080var port = process.env.PORT || config.dev.port// 用于判斷是否要自動打開瀏覽器的布爾變量，當配置文件中沒有設置自動打開瀏覽器的時候其值為 falsevar 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，常用于SPAapp.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'))// 應用的地址信息，例如：http://localhost:8080var 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) }})