- 以下是針對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，變量值如下圖
- 添加變量 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%
-
Hbuilder配置uniapp項目
-
首先，配置你之前安裝好的node.js路徑和npm路徑