1-準備

電腦安裝好node.js環境，安裝好npm，安裝好微信web開發者工具，選擇一款你喜歡的編輯器，我用的是WebStorm

2-打開webStorm，新建一個項目空間然后在終端執行以下命令，我這里是Windows下的WebStorm自帶的Terminal

我是在紅色區域輸入的命令 ，執行以下命令

# 全局安裝 vue-cli $ npm install --global vue-cli # 創建一個基于 mpvue-quickstart 模板的新項目 $ vue init mpvue/mpvue-quickstart my-weixin # Project name 項目名稱 my-weixin # wxmp appid 小程序ID 去微信申請以后會得到 # Project description 小程序描述 # Author 作者 # Vue build runtime # Use Vuex? 使用Vuex # Use ESLint to lint your code? 使用eslint依賴規范你的代碼 此時構建好工程項目后會提示下面的命令，照做就行了 # 安裝依賴 $ cd my-weixin $ npm install # 啟動構建 $ npm run dev

3-構建好的標準項目，它比vue init webpack project-name 多了一些文件，如下圖

?4-打開——微信web開發者工具，然后選擇導入項目，路徑直接定位到上圖紅色框的 .../dist/wx? 文件夾下，點擊導入，出現如下圖，開發過小程序的朋友應該都熟悉這些操作和目錄，看到的就是利用VUE開發的小程序了。

5-在webStrom編輯器里，根據構建的項目所附帶的頁面實例，去創建自己的更多小程序頁面

我們就以src/pages/index為例,你也可以參考事例在scr/pages下新建一個文件夾，里面添加兩個文件分別為:

# html js css 都可以寫到這個頁面 1——index.vue # 可以在這里編寫配置文件 2——main.js

?

?

?

總結

以上是生活随笔為你收集整理的vue开发小程序Demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。