mpvue 快速建立小程式專案

2021-10-11 13:31:09 字數 1668 閱讀 2753

教程在這裡,其中核心的語句是:

# 安裝vue-cli

$ npm install --global [email protected]

# 建立乙個專案

$ vue init mpvue/mpvue-quickstart my-project

# 切換到專案資料夾,並安裝依賴

$ cd my-project

$ npm install

# 執行

$ npm run dev

這樣這樣就可以新建乙個mpvue的預設專案。

官方初始化有個缺點,就是乙個頁面要用乙個資料夾來表示。比如首頁,就要在index資料夾下放乙個index.vue和乙個main.js,這樣的話就很不舒服。幸好有了mpvue-entry這個庫,可以讓我們用乙個vue檔案表示乙個頁面,配合著乙個pages.js就可以建立檔案與頁面之間的對應關係。

於是基於mpvue-entry,出現了mpvue-cli這個庫,使用這個庫配置的專案會自動使用mpvue-entry,這樣開發起來就很順手了。其使用方式如下:

# 安裝這vue-cli

$ npm install -g vue-cli

# 新建乙個專案

$ vue init spencer1994/mpvue-cli mpvue******

# 切換到專案資料夾,並安裝依賴

$ cd mpvue******

$ npm install

# 執行

$ npm run dev

# 安裝vue-cli

$ npm install -g vue-cli

# 初始化乙個專案

$ vue init blackjack0v0/mpvue******-quickstart mpvue******

# 切換到這個專案

$ cd mpvue******

# 安裝依賴

$ cnpm install

$ git clone

# 執行

$ cnpm run dev

為什麼需要引入自定義元件?(因為下面這種樣式不想自己寫了,都已經有現成的了,拿來主義!)

發現三種方法都是首先安裝vue-cli

$ npm install -g vue-cli
vue init *** yyy
***是作者上傳的資料夾路徑,yyy是自己想要新建的資料夾名稱。

然後都要切換到這個資料夾、安裝依賴並執行,在此不再贅述。

框架、庫的出現都是為了滿足開發者的需求,我們自己手寫**的時候總會發現有很多不便,第一反應肯定是去搜看有沒有現成的實現,如果沒有的話有能力的人就會自己造乙個,這就是社群的重要性。

簡言之,可以用下面一幅圖來解釋三者之間的關係:

快速上手小程式的mpvue框架

一.什麼是mpvue框架?mpvue 是乙個使用 vue.js 開發小程式的前端框架。框架基於 vue.js 核心 所以建議熟練掌握vue再使用mpvue框架,否則還是建議去使用原生框架去寫小程式 mpvue 修改了 vue.js 的 runtime 和 compiler 實現,使其可以執行在小程式...

快速上手mpvue 專案

初始化乙個 mpvue 專案 node v v8.9.0 npm v 5.6.0 2.由於眾所周知的原因,可以考慮切換源為 taobao 源 npm set registry 3.全域性安裝 vue cli 一般是要 sudo 許可權的 npm install global vue cli 2.9 ...

vue製作小程式 mpvue

mpvue是乙個使用 vue.js 開發小程式的前端框架 npm i sass loader d npm i node sass d 1.先檢查下 node.js 是否安裝成功 node v v8.9.0 npm v 5.6.0 2.由於眾所周知的原因,可以考慮切換源為 taobao 源 3.全域性...