0x00.項目初始化
由於整個過程像素級 copy element，所以將不使用vue-cli初始化項目。
創建項目
新建一個空的文件夾，使用npm init 來初始化項目，並安裝vue模塊。
修改目錄結構
根目錄中添加文件夾
根目錄下創建項目配置文件: .gitignore README.md
public目錄下，創建模板頁文件: favicon.ico index.html
examples目錄下，創建示例入口文件: App.vue main.js logo.png
0x01.wepack安裝與配置
項目使用webpack實現模塊化管理和打包。
局部安裝webpack
webpack-cli最新為4.X版本，webpack-dev-server無法正常運行，安裝時需要指定版本（確保兩模塊版本皆為3.X）。
webpack-cli 提供了許多命令來使 webpack 的工作變得簡單。官方文檔
webpack-dev-server為你提供了一個簡單的 web server，並且具有 live reloading(實時重新加載) 功能。官方文檔
安裝 webpack loaders
webpack 使用 loader 對文件進行預處理。可以構建包括 JavaScript 在內的任何靜態資源。
官方插件列表
webpack 插件中文文檔
參考
vue-loader詳解： https://segmentfault.com/a/1190000020629508
html-webpack-plugin詳解：https://www.cnblogs.com/wonyun/p/6030090.html
webpack配置
在build目錄下創建webpack配置文件webpack.config.js,提供入口(entry)、模式（Mode）、輸出(output)、模塊（Module）、插件(Plugins)、開發服務器(DevServer)等配置選項。官方文檔
0x02.項目運行
npm scripts 配置
在npm腳本中新增webpack命令，執行的命令會自動去node_modules尋找，不用加上目錄。
修改package.json配置
.
...
"scripts": {
"build:dist": "webpack --config build/webpack.config.js",
"dev": "webpack-dev-server --config build/webpack.config.js"
},
...
.
cross-env配置
cross-env是一款運行跨平台設置和使用環境變量的腳本，不同平台使用唯一指令，無需擔心跨平台問題。
修改package.json配置
.
...
"scripts": {
"build:dist": "cross-env NODE_ENV=development webpack --config build/webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
},
...
.
運行測試
命令行窗口中，在該項目根目錄下輸入npm run dev 即可進行本地開發調試。
成功運行后，項目第一個頁面結果如下：
最終目錄結構
