1.新建項目
# 全局安裝 vue-cli $ npm install --global vue-cli # 創建一個基於 mpvue-quickstart 模板的新項目 $ vue init mpvue/mpvue-quickstart my-project # 安裝依賴 $ cd my-project $ npm install $ npm run dev
2.配置依賴（這一步好像在上一步的時候就已經默認配置好了）
npm i mpvue -S npm i mpvue-template-compiler mpvue-loader mpvue-webpack-target postcss-mpvue-wxss webpack-dev-middleware-hard-disk -S-D
依賴說明：
mpvue-template-compiler：
該軟件包可用於將Vue 2.0模板預編譯為渲染函數，以避免運行時編譯開銷和CSP限制。僅在編寫具有非常特定需求的構建工具時才需要它。在大多數情況下，您應該改用[mpvue-loader](http://mpvue.com/build-tool/mpvue-loader/)。
mpvue-loader
除了vue-loader 本身所具備的能力之外，它還會產出微信小程序所需要的文件結構和模塊內容。
http://mpvue.com/build/mpvue-loader.html詳細說明了vue文件是如何轉化為小程序中的文件。
mpvue-webpack-target
主要是兼容微信小程序中的全局變量。例如把 window 修改為 global。
不支持 DOM 和 DOM 方法，不能進行熱更替。
postcss-mpvue-wxss
清理 wxss 不支持的選擇器。
清理 wxss 不支持的注釋。
轉換 rem 單位到 rpx。
轉換 Web 的標簽選擇器到小程序的 class 選擇器。
style scoped（postcss插件部分）。
http://mpvue.com/build/postcss-mpvue-wxss.html說明了css選擇器是如何轉換為wxss支持的選擇器以及在項目中如何配置它。
webpack-dev-middlewar-hard-disk
詳細用途如下：https://www.ctolib.com/topics-132236.html
3.遇到問題以及總結
遇到的問題：
在新建mpvue過程中，報錯：vue-cli · Failed to download repo mpvue/mpvue-quickstart: connect ETIMEDOUT 13.250.162.133:443
分析錯誤：
與上周遇到的npm下載webpack插件時出現network proxy問題（npm代理設置錯誤）的原因一致。在公司內網要使用代理才能安裝插件，所以需要為npm設置代理。
解決方法：
為npm設置代理
使用以下命令：npm config set proxy http://web-proxy.oa.com:8080
其中”`web-proxy.oa.com:8080 `”是自己機器所在網絡的代理地址。
疑問：為什么需要設置npm代理？
首先先明白什么是代理，什么是代理服務器：可參考：
總結：
npm run dev運行成功之后出現dist文件夾（它是怎么變成dist文件夾的？http://mpvue.com/build/mpvue-loader.html詳細說明了vue文件是如何轉化為小程序中的文件。），成功在微信開發者工具中運行項目。
為什么要出現dist文件夾才可以成功運行項目？
因為每個小程序項目的根目錄會有一個`project.config.json`的項目配置文件，可以設置`miniprogramRoot`屬性指定小程序源碼的目錄, 默認為根目錄(`/`)。我們的項目中`miniprogramRoot`屬性設置為了"dist/wx/"。
目前只是對mpvue的建立過程以及運行流程有了初步了解。還需要繼續深入了解（vue和小程序的主要語法區別）。