一败去、安裝 Node.js
首先需要在電腦上安裝最新穩(wěn)定版本的 Node.js （官網(wǎng)下載）振峻，安裝 Node.js 時(shí)會(huì)隨之安裝一個(gè)包管理工具 npm蒿囤，可以在命令行工具中用命令 npm -v 查看已安裝版本。
安裝完 Node.js 之后，可以安裝淘寶 npm 鏡像柳恐，因?yàn)槲覀兪褂脟獾?npm 可能會(huì)受到網(wǎng)速的限制憾朴。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝之后命令中的 npm 都用 cnpm 來代替狸捕。
二、安裝 vue-cli
- 全局安裝 vue--cli（-g --- global）
npm install -g vue-cli // 安裝vue-cli 2
三众雷、搭建項(xiàng)目
- 進(jìn)入想要?jiǎng)?chuàng)建項(xiàng)目的目錄（如：進(jìn)入 D 盤的 vueWebpackApp 文件夾）
cd d:/vueWebpackApp
- 初始化項(xiàng)目（項(xiàng)目名稱自定義灸拍，均小寫）
vue init webpack my-project
此時(shí)會(huì)出現(xiàn)以下選項(xiàng)：
? Project name vueapp // 輸入項(xiàng)目名稱
? Project description demo // 輸入項(xiàng)目描述
? Author GY // 輸入作者
? Vue build // 選擇構(gòu)建模式（cmd直接回車選第一條，git按對應(yīng)數(shù)字+回車）
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific
HTML) are ONLY allowed in .vue files - render functions are required elsewhere
? Install vue-router? No // 是否安裝 vue-router
? Use ESLint to lint your code? No // 是否安裝 ESLint 代碼檢查工具
? Setup unit tests? No // 是否設(shè)置單元測試
? Setup e2e tests with Nightwatch? No // 是否設(shè)置端到端測試
?Should we run `npm install` for you after the project has been created? // 直接回車
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself
- 進(jìn)入項(xiàng)目
cd my-project
- 安裝依賴
npm install
- 啟動(dòng)項(xiàng)目
npm run dev
完成后會(huì)出現(xiàn)：
Your application is running here: http://localhost:8080
打開這個(gè)地址 http://localhost:8080砾省，你會(huì)發(fā)現(xiàn)通過 vue-cli 腳手架工具結(jié)合 webpack 搭建的項(xiàng)目已經(jīng)完成了鸡岗。
vue-cli 搭建項(xiàng)目
三、目錄結(jié)構(gòu)分析
用編輯器打開項(xiàng)目编兄，可以看到目錄結(jié)構(gòu)如下所示：
- build // 項(xiàng)目構(gòu)建（webpack）相關(guān)代碼（9個(gè)）
── build.js // 生產(chǎn)環(huán)境構(gòu)建代碼
── check--versions.js // 檢查 node&npm 等版本
── dev-client.js // 熱加載相關(guān)
── dev-server.js // 構(gòu)建本地服務(wù)器
── utils.js // 構(gòu)建配置公用工具
── vue--loader.conf.js // vue 加載器
── webpack.base.conf.js // webpack 基礎(chǔ)環(huán)境配置
── webpack.dev.conf.js // webpack 開發(fā)環(huán)境配置
── webpack.prod.conf.js // webpack 生產(chǎn)環(huán)境配置 - config // 項(xiàng)目開發(fā)環(huán)境配置相關(guān)代碼（3個(gè)）
── dev.env.js // 開發(fā)環(huán)境變量
── index.js // 項(xiàng)目的一些配置變量
── prod.env.js // 生產(chǎn)環(huán)境變量 - node_modules // 項(xiàng)目依賴的模塊
- src // 源碼目錄
── assets // 資源目錄
── ── logo.png
── components // Vue 公共組件
── ── HelloWolrd.vue
── router // 前端路由
── ── index.js // 路由配置文件
── App.vue // 頁面入口文件（根組件）
── main.js // 程序入口文件（入口 js 文件） - static // 靜態(tài)文件纤房，比如一些圖片、json 數(shù)據(jù)等
── .gitkeep - 其余文件
── .babelrc // ES6 語法編譯配置
── .editorconfig // 定義代碼格式
── .gitignore // git 上傳需要忽略的文件格式
── .postcssrc.js // 處理 css 文件
── index.html // 項(xiàng)目入口頁面
── package.json // 項(xiàng)目基本信息
── README.md // 項(xiàng)目說明
