一、安裝npm

由於新版的NodeJS已經集成了npm，我們可以安裝NodeJS來實現安裝npm。

首先去nodejs官網(https://nodejs.org/en/)上下載最新版的nodejs，如下圖，點選下載

下載完成以後，一路next即可安裝，如需更改安裝目錄，請自行配置。

安裝完成以後驗證npm是否安裝成功：執行cmd命令

npm -v

得到如下圖所示，我的版本是6.0.0

表示安裝成功。

二、安裝wepy

用管理員身份開啟cmd命令視窗，然後執行cmd命令

npm install wepy-cli -g

進行全域性安裝wepy（此命令也是更新wepy的命令），如下圖所示，表示wepy安裝成功，標紅處為版本號

此處需注意的是要用管理員身份執行cmd命令，如非管理員身份執行可能會出現許可權問題導致安裝失敗，如下圖：

三、開始一個小程式

wepy提供一些小程式的模板，就是一些小例子，下面我們來看看這些模板

執行cmd命令進入自己想要下載的目錄，然後輸入

wepy list

回車檢視官方提供的模板，如下圖（標紅處為模板，標黃處為下載模板的命令）

下面我們來下載一份空模板來看看，在cmd命令視窗輸入

wepy init empty myproject

如下圖：

出現一些亂碼，編碼格式的問題，不影響下載程式碼，可以忽略，我們繼續

命令執行會讓你輸入Project name，AppId等等，我直接回車使用預設

最後一行問你是否使用ESLint，我們先選擇否（輸入n即可），先拿到一個最簡單的模板看看，具體後面再說

然後我們去我們的模板看看它的結構（我用的Sublime Text3程式設計工具開啟資料夾，這個程式設計工具根據自己的喜好選擇就好）

首先我們看一下專案結構（這是編譯之前的結構）

├── src                    程式碼編寫的目錄（該目錄為使用WePY後的開發目錄）

|   ├── pages              WePY頁面目錄（屬於完整頁面）

|   |   ├── index.wpy      index頁面（經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss檔案）

|   └── app.wpy            小程式配置項（全域性資料、樣式、宣告鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss檔案）
 

└── package.json           專案的package配置

另外還有一些配置檔案如

project.config.json：對應小程式裡的project.config.json檔案裡的某些屬性配置

wepy.config.js：wepy編譯方面的某些配置

下面執行cmd命令來下載npm依賴

npm install

如下圖所示

下面我們來對這個模板編譯一下看看，繼續執行cmd命令：

wepy build -w

此命令表示開啟實時編譯，我們對這個專案所做的更改都會實時編譯到編譯目錄裡

報了個WARNING,未安裝wepy-eslint，但不影響編譯，查看了一下是上面選擇是否使用eslint，上面我們選擇了否，而下載的模板中使用了這個，我們可以找到相關的配置檔案，關掉後就不報警了，即將wepy.config.js裡的eslint的屬性值改為false即可，如下圖所示：

在上圖，我們同時也看到了，多了一個dist目錄，這個目錄就是編譯的目錄

還有一個node_modules目錄，是npm下載依賴的目錄（這個目錄在執行npm install時就已經建立）

編譯完成後，我們就可以把專案的根目錄加到小程式開發工具上檢視，如下圖所示：

這樣，一個hello world就完成了，但是專案可能執行會報錯，解決方法如下圖，點選右上角詳情按鈕，會出現被我標藍的視窗，將es6轉es5取消選擇即可

之所以將專案的根目錄加入小程式開發工具中即可執行，是因為1.7.0 之後的版本init新生成的程式碼包會在根目錄包含project.config.json檔案，這個檔案中設定了小程式的根目錄，所以直接把專案的根目錄加入到小城西開發工具上可以執行，若是1.7.0之前版本，也可以通過手動編寫該檔案，然後這樣加入小程式開發工具執行，編寫內容如下

{

  "description": "project description",

  "setting": {

    "urlCheck": true,

    "es6": false,

    "postcss": false,

    "minified": false

  },

  "compileType": "miniprogram",

  "appid": "touristappid",//小程式的appid

  "projectname": "Project name",//小程式的專案名稱

  "miniprogramRoot": "./dist"//根目錄

}