• 以下是針對webstorm使用者上手uniapp框架的學習

vue環境搭建以及配置（腳手架搭建）

• 首先要明確三樣東西

  • npm：node.js的包管理器
  • webpack：主要用途是通過CommonJS 的語法把所有瀏覽器端需要釋出的靜態資源作相應的準備，比如資源的合併和打包。
  • vue-cli：學習vue的過程會知道這是vue的腳手架，用於生成vue的功能模板。幫你快速開始一個vue的專案，也就是給你一套vue的結構，包含基礎的依賴庫，只需要npm install 就可以安裝。

• nodejs下載網址：https://nodejs.org/en/

• 下載好之後安裝，一直下一步就可以，安裝位置可以換到自己熟悉的位置
  

• 安裝好後可以在資料夾中找到nmp.cmd。
  

• 然後在命令列介面檢視是否安裝成功

• 建立如圖兩個資料夾：模組資料夾待會會改變位置，不管

• 然後執行以下兩條命令，目的是修改系統預設的快取位置（系統預設在c盤的programfile裡）

• /***************一定要以管理員模式啟動cmd介面！！！切記！！

• npm config set prefix "D:\nodejs\node_global"

  npm config set cache "D:\nodejs\node_cache"

• 到這一步可以選擇配置國內映象以提高速度（有時候國內映象會出問題，yysy，還是得梯*子）

• 找到C:\Users\Administrator.npmrc，檢視內容，可以看到剛才修改的預設資訊。

• 接下來還需要調整環境變數，進入修改介面，先修改系統變數：

  • 新增變數 NODE_PATH，變數值如下圖
    

• 修改使用者變數“Path”

  • path內會找到一個生成的node相關路徑，修改成自定義的node_global如下圖：

• 到這一步，配置就完成了，我們來測試一下。

• 測試可以用express模組，這是最常用的。

• 進行全域性安裝

• npm install express -g # -g是全域性安裝的意思

• /如果報錯，說明你又沒開管理員模式/

• 安裝完express模組可以在之前設定的全域性路徑裡找到，即node_global

• 如果你已經安裝過express，它也會報錯，就像這樣
  

• 這時候，我們來安裝vue.js

• npm install vue -g //npm和-g的意思上面已經說過

• 可以在全域性目錄下找到安裝好的vue，

• 我們在nodeglobal目錄下找到了安裝的vue（最開始提到的node_modules資料夾此時也出現在這裡）

• dist是distribution的縮寫，為最終釋出產品

• 檢視vue版本時的命令列為：

• vue -V //特別的，檢視vue版本時的-V為大寫

• 然後安裝vue腳手架的init模組：

• 切換為d盤，且為根目錄

• npm i -g @vue/cli-init

• 進行vue專案初始化

• vue init webpack vue1 //vue1為建立的資料夾名稱

• 前三個部分可以自己命名填寫，不建議大寫，之後就會開始自動建立專案
  

• 初始化：

成功！開啟提示地址就可以看到vue介面

• 然後就可以用webstorm開啟vue1檢視自己的程式碼（圖轉）

初始化uniapp專案：

• npm install -g @vue/cli

• 要create一個uniapp專案，cli版本必須至少為3.0，不然執行下一步會報錯（當然報錯的時候它會告訴你版本太舊了，讓你uninstall再install，就像這樣）
  

• vue create -p dcloudio/uni-preset-vue my-project //my-project為專案名
  

• 此時會提示選擇專案模板：
  

建立完就可以用webstorm打開了

• CLI 工程預設帶了 uni-app 語法提示和 5+App 語法提示

• 執行專案

• npm run dev:%PLATFORM%