前言
承接上篇：基于webpack+Vue2.0搭建webapp（體驗(yàn)篇）
學(xué)Vue也有一段時(shí)間，利用vue-cli腳手架也動(dòng)手做了個(gè)簡(jiǎn)單的示例嫉称。在不斷的學(xué)習(xí)過程中發(fā)現(xiàn)其實(shí)學(xué)習(xí)vue并不難晴圾，難在如何構(gòu)建一個(gè)工程化前端枪萄，從項(xiàng)目初始化辛慰、結(jié)構(gòu)組織泊交、開發(fā)、調(diào)試宏浩、編譯知残、打包、測(cè)試比庄、發(fā)布和版本管理等方面提高效率求妹，今天我們就從項(xiàng)目初始化開始說起。
介紹
vue-cli提供了簡(jiǎn)單項(xiàng)目腳手架建立佳窑，如下命令安裝：
$ npm install -g vue-cli
安裝完成后，即可運(yùn)行命令：
$ vue init <template-name> <project-name>
<template-name>：模板名稱神凑，運(yùn)行npm list會(huì)顯示有什么模板可以選擇净神；
<project-name>：需要命名的項(xiàng)目名稱；
例如運(yùn)行：
$ vue init webpack my-project
構(gòu)建步驟
vue-cli中命令init最復(fù)雜溉委，其它命令很簡(jiǎn)單鹃唯，下面用圖表示下vue init構(gòu)建步驟：
技術(shù)框架
vue-cli涉及到的主要技術(shù)框架如下：
1、node.js：整個(gè)腳手架工具的根本組成部分瓣喊；
2坡慌、commander：能夠更好地組織和處理命令行的輸入；
3藻三、download-git-repo：從git遠(yuǎn)程倉(cāng)庫(kù)下載文件洪橘；
4、handlebars：語(yǔ)義模板庫(kù)棵帽；
5熄求、metalsmith：靜態(tài)頁(yè)面構(gòu)建，配合handlebars使用逗概；
構(gòu)建自己的CLI
根據(jù)vue-cli工作原理弟晚，并結(jié)合自己搭建的webpack目錄結(jié)構(gòu)規(guī)范，構(gòu)建了公司的前端腳手架和前端模板webpack-spa仗谆，有興趣的可以下載安裝下指巡。
$ npm install -g web-app-cli
$ webapp init webpack-spa my-project
$ cd my-project
$ npm install
$ npm run dev
