目錄

Vue概述：

Vue特點：

Vue官網:

一、node.js安裝和配置?

1. 下載安裝node.js

Step1：下載安裝包

Step2：安裝程序

Step3：查看

問題解決：

解決npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

1.問題原因

2.解決嘗試一

3.解決嘗試二

Step4：環境配置

Step5：Node.js測試

vue前端框架的環境搭建

Vue 是一套用來動態構建用戶界面的漸進式?JavaScript 框架

• 構建用戶界面：把數據通過某種辦法變成用戶界面
• 漸進式：Vue 可以自底向上逐層的應用，簡單應用只需要一個輕量小巧的核心庫，復雜應用可以引入各式各樣的 Vue 插件

Vue概述：

Vue是什么:Vue.js是一套由美籍華人（尤雨溪）開發的相應式系統，前端開發庫。
2014年2月尤雨溪開源了前端開發庫Vue.js。
2016年9月3日，尤雨溪以技術顧問的身份加盟阿里巴巴Weex團隊。
他全職投入Vue.js的開發，立志將Vue打造成Angular/React平級的世界頂級框架Vue的核心庫只關注視圖層，非常容易和其他庫整合

Vue非常適合開發復雜單頁應用

Vue可實現數據和視圖的雙向綁定

Vue特點：

①輕量級框架，vue提供MVVM雙向數據綁定，依賴模板表達式和計算屬性，使用簡單快捷vue可以將一個web開發Vue通過指令將數據和頁面進行交互
③中設計的各種模塊進行拆分，變成單獨的組件，然后通過數據綁定，調用對應模版組件，同時傳入參數，即可完成對整個項目的開發
④與傳統Web頁面通過鏈接切換頁面（重新刷新頁面）不同，Vue通過客戶端路由實現頁面的平滑切換 Vue的界面屬于響應式，在各種設備上都具有好的顯示效果

Vue官網:

Vue.js - 漸進式 JavaScript 框架 | Vue.jsVue.js - 漸進式的 JavaScript 框架https://cn.vuejs.org/

一、node.js安裝和配置?

1. 下載安裝node.js

檢查電腦上是否配備 node。
【命令行輸入?node -v】【出現版本信息則說明已經安裝好了】

我這里尚未安裝node.js? 接下來可以一同一步步操作。?

官網下載最新版本：Download | Node.js
可以下載安裝包（安裝教程見：Node.js 安裝配置 | 菜鳥教程）
或者下載zip文件找個目錄保存，解壓下載的文件，然后配置環境變量，將解壓文件所在的路徑配置到環境變量中。

Step1：下載安裝包

這里我選擇windows64位操作系統，如上圖。

Step2：安裝程序

①下載完成后，雙擊安裝包，開始安裝，使用默認配置安裝一直點next即可，安裝路徑默認在C:Program Files下，也可以自定義修改

下載完成后進行安裝（傻瓜式操作，下一步--下一步即可）

②安裝路徑默認在C:Program Files下面，也能夠自定義修改，而后點擊next（我這里設置我的安裝目錄為D:\software\nodejs\根據自己的需要進行更改。）

?

?③下圖根據本身的需要進行，我選擇了默認Node.js runtime，而后Next

Node.js runtime ：表示運行環境
npm package manager：表示npm包管理器
online documentation shortcuts ：在線文檔快捷方式
Add to PATH：添加到環境變量

?
④以下圖框中所示，我沒有選中，而是直接next

⑤點擊Install，進行安裝

⑥點擊finish，完成安裝

⑦安裝完成后，.msi格式的安裝包已經將node啟動程序添加到系統環境變量path中,咱們能夠查看系統變量進行驗證：在【個人電腦】右鍵→【屬性】→【高級系統設置】

⑧點擊【高級】→【環境變量】

⑨在系統變量中查看【path】，點擊【編輯】

⑩會發現.msi格式的安裝包已經將node啟動程序添加到系統環境變量path中

由于Node.js 中默認安裝了 npm，所以不用額外配置就能在全局命令中使用 npm命令，在cmd中測試一下是否安裝成功了：輸入 node -v 與 npm –v分別查看版本信息

Step3：查看

① 既然已經將node程序添加到全局系統變量中，把咱們能夠直接在CMD窗口中任意位置執行node，打開CMD窗口，執行命令node -v查看node版本

【注意：此時是打開CMD窗口，并非在C:Program Files odejs目錄下執行node.exe】

② 最新版的node在安裝時同時也安裝了npm,執行npm -v查看npm版本

?下載cnpm：
使用cnpm(淘寶鏡像):使用npm下載依賴時，由于是從國外的網站上下載內容，所以可能經常會出現不穩定的情況，所以需要下載cnpm代替npm
cnpm是國內淘寶的做的，在國內使用穩定,安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
或 ?npm install ?-g cnpm --registry=https://registry.npmmirror.com

問題解決：

解決npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

在安裝完?node?環境后，npm -v 顯示如下問題
npm WARN config global?--global,?--local?are deprecated. Use?--location=global?instead.

8.11.0

1.問題原因

問題出現在，以前版本npm的命令一般時XXX -g 但是隨著版本更替，這個老方法被棄用了

2.解決嘗試一

在node的安裝路徑下
我們需要修改兩個文件npm和npm.cmd

將npm文件的第23行，修改成下圖樣式，命令如下，可以直接粘貼

prefix --location=global

將npm.cmd文件的第12行，修改成下圖樣式，命令如下，可以直接粘貼，修改完保存。

prefix --location=global

在這里我遇到了權限不夠的問題，如下解決：

3.解決嘗試二

電腦文件權限不夠，
我們需要修改兩個文件npm和npm.cmd
鼠標右擊屬性，安全將權限打開。

此時修改完成。

如若大家還有問題可以做接下來的嘗試（我第二個解決就搞定了，因此第三個解決嘗試沒有試過）

解決嘗試三：
使用npm時，報錯：npm WARN config global --global, --local are deprecated. Use --location=global instead.

將npm升級到最新版本即可
升級方法
1.在windows中以管理員身份打開cmd，然后執行命令
npm install -g npm-windows-upgrade
2.更改腳本策略
下載Windows Power Shell
然后以管理員身份運行，執行命令
set-ExecutionPolicy RemoteSigned

輸入Y
成功更改腳本策略
3.在Windows Power Shell上運行命令
npm-windows-upgrade

問題解決！

最終結果如下：

Step4：環境配置

① 打開安裝的目錄（默認安裝情況下在C:Program Files nodejs）在這里我的為：D:\software\nodejs

② 在安裝目錄下新建兩個文件夾【node_global】和【node_cache】

③ 再次打開cmd命令窗口，輸入npm config set prefix “你的路徑node_cache”（“你的路徑”默認安裝的狀況下為D:\software\nodejs ）
④ npm config set cache “你的路徑 node_cache” 可直接復制剛剛新建的空文件夾目錄?
執行的時候建議使用管理員權限打開CMD，否則有可能會提示權限不夠報錯

⑤設置環境變量，打開【系統屬性】-【高級】-【環境變量】，在系統變量中新建

變量名：NODE_PATH

變量值：D:\software\nodejs\node_global\node_modules

（ 用來告訴系統， 下載的模塊或者包都在這里了）

Step5：Node.js測試

配置完成后，安裝個module測試下，咱們就安裝最經常使用的express模塊，打開cmd窗口，輸入以下命令進行模塊的全局安裝：

?npm install express -g

總結

以上是生活随笔為你收集整理的Vue开发环境安装的全部內容，希望文章能夠幫你解決所遇到的問題。

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