使用mpvue建立專案以及總結

# 全域性安裝 vue-cli

$ npm install --global vue-cli
# 建立乙個基於 mpvue-quickstart 模板的新專案
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴
$ cd my-project
$ npm install
$ npm run dev

npm i mpvue -s

npm i mpvue-template-compiler mpvue-loader mpvue-webpack-target postcss-mpvue-wxss webpack-dev-middleware-hard-disk -s-d

該軟體包可用於將vue 2.0模板預編譯為渲染函式，以避免執行時編譯開銷和csp限制。僅在編寫具有非常特定需求的構建工具時才需要它。在大多數情況下，您應該改用[mpvue-loader](

mpvue-loader

詳細說明了vue檔案是如何轉化為小程式中的檔案。

mpvue-webpack-target

不支援 dom 和 dom 方法，不能進行熱更替。

postcss-mpvue-wxss

清理 wxss 不支援的選擇器。

清理 wxss 不支援的注釋。

轉換 rem 單位到 rpx。

轉換 web 的標籤選擇器到小程式的 class 選擇器。

style scoped（postcss外掛程式部分）。

說明了css選擇器是如何轉換為wxss支援的選擇器以及在專案中如何配置它。

webpack-dev-middlewar-hard-disk

簡略用途如下：（這也是一直困擾我為什麼npm run dev能生成dist?明明我記得的是npm run build才是生成dist的（我這裡說的是預設的打包出口））

詳細用途如下：

遇到的問題：

在新建mpvue過程中，報錯：vue-cli · failed to download repo mpvue/mpvue-quickstart: connect etimedout 13.250.162.133:443 

分析錯誤：

解決方法：

為npm設定**

使用以下命令：npm config set proxy

其中」`web-proxy.oa.com:8080 `」是自己機器所在網路的**位址。

疑問：為什麼需要設定npm**？

首先先明白什麼是**，什麼是**伺服器：可參考：

總結：

為什麼要出現dist資料夾才可以成功執行專案？

因為每個小程式專案的根目錄會有乙個`project.config.json`的專案配置檔案，可以設定`miniprogramroot`屬性指定小程式原始碼的目錄, 預設為根目錄(`/`)。我們的專案中`miniprogramroot`屬性設定為了"dist/wx/"。

目前只是對mpvue的建立過程以及執行流程有了初步了解。還需要繼續深入了解（vue和小程式的主要語法區別）。

mpvue 快速建立小程式專案

教程在這裡，其中核心的語句是 安裝vue cli npm install global vue cli 2.9 建立乙個專案 vue init mpvue mpvue quickstart my project 切換到專案資料夾，並安裝依賴 cd my project npm install 執行 ...

mpvue 建立頁面 以及頁面三檔案解析

1 在pages目錄下建立資料夾之下建立檔案 2 index.vue 視口頁面 3 main.js 進行錯誤處理和將index.vue例項化,並掛載到 dom 上 模板 import vue from vue add this to handle exception vue.config.error...

spider專案建立以及執行

1.建立專案 scrapy startproject projectname2.建立爬蟲程式 模板 cd movie scrapy genspider spidername start urls3.進入專案的根目錄，執行命令啟動spider scrapy crawl spidername可以將終端的...