目錄

一、vue.js開發(fā)前為什么要安裝node.js? ？

vue推薦開發(fā)環(huán)境

二、node.js安裝與配置

1.下載安裝node.js

2.配置默認(rèn)安裝目錄和緩存日志目錄

3.node.js環(huán)境配置

4.配置淘寶鏡像源

三、安裝vue 和 vue的腳手架

1、安裝vue

2、安裝腳手架

---

一、vue.js開發(fā)前為什么要安裝node.js? ？

使用Vue.js之前安裝nodejs，準(zhǔn)確來說使用vue-cli搭建項(xiàng)目的時(shí)候需要node。

也可以創(chuàng)建一個(gè).html文件，通過一下方式引入vue，一樣可以使用vue

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

但是使用node是筆記方便的，打包部署，解析vue單文件組件，解析vue每個(gè)模板，拼在一起等，啟動(dòng)測試服務(wù)器localhost，幫你管理vue-router。vue-resource這些插件，通常使用vue+node方式，方便省事。

---

vue推薦開發(fā)環(huán)境

Node.js: javascript運(yùn)行環(huán)境(runtime),不同系統(tǒng)直接運(yùn)行各種編程語言

npm: Nodejs下的包管理器。由于國內(nèi)使用npm會(huì)很慢,這里推薦使用淘寶NPM鏡像（http://npm.taobao.org/）

webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。

vue-cli: 用戶生成Vue工程模板

---

二、node.js安裝與配置

---

1.下載安裝node.js

官網(wǎng)下載最新版：https://nodejs.org/zh-cn/download/

下載windows(.msi)64位操作系統(tǒng)

下載完成后? --? 無腦安裝 -- 一直next安裝。(安裝到無中文 -------文件目錄)

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???

2.配置默認(rèn)安裝目錄和緩存日志目錄

在安裝node目錄下 創(chuàng)建兩個(gè)文件夾，存放安裝目錄，和緩存目錄，不配置的話會(huì)默認(rèn)安裝在c盤，會(huì)占用c盤空間

node_cache是緩存日志。node_global是安裝目錄

執(zhí)行命令，將npm的全局模塊目錄和緩存目錄配置到我們剛才創(chuàng)建的那兩個(gè)文件目錄

npm config set prefix "D:\Program Files\Nodejs\node_global" npm config set cache "D:\Program Files\Nodejs\node_cache"

輸入npm config get prefix?查看npm全局安裝包保存路徑

輸入npm config get cache?查看npm裝包緩存路徑

輸入npm config list 查看所有npm配置

---

3.node.js環(huán)境配置

1、系統(tǒng)變量-新建NODE_PATH 輸入D:\Program Files\Nodejs\node_modules

2、path下添加目錄

4.配置淘寶鏡像源

npm的下載倉庫默認(rèn)是國外，我們需要配置到國內(nèi)，這樣下載速度才能快，使用國內(nèi)淘寶鏡像源

修改npm的默認(rèn)配置（直接修改npm命令的倉庫地址為淘寶鏡像源）

npm config set registry https://registry.npm.taobao.org

查看npm下載源npm config get registry? 會(huì)顯示淘寶鏡像源表示成功

---

三、安裝vue 和 vue的腳手架

1、安裝vue

npm install vue -g

根據(jù)自己的淘寶鏡像源設(shè)置選擇命令，其中-g是全局安裝，指安裝到global全局目錄去

查看安裝的vue信息：npm info vue?

2、安裝腳手架

npm install @vue/cli -g

用這個(gè)命令來檢查其版本是否正確：vue --version或vue -V

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的vue安装与配置、脚手架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。