第一章、node詳細(xì)安裝教程

node官方文檔：API 文檔 | Node.js 中文網(wǎng)

node下載官網(wǎng)：下載 | Node.js 中文網(wǎng)

1、進(jìn)入node官網(wǎng)下載安裝包

下載好后，進(jìn)入自己的下載文件夾管理：

2、安裝

•  打開(kāi).msi文件，一直下一步即可：

•  選擇安裝位置，我這里裝在D盤下新建的nodejs文件夾下：

•  這里直接下一步：

       -- node.js runtime：node運(yùn)行環(huán)境
        -- orepack manager：npm 包管理
        -- Online documentation shortcuts：在線文件快捷方式
        -- Add to Path：添加路徑
        -- corepack manager：核心包管理

•  這里不用勾，之后需要什么包直接npm下就好

•  最后等待下載完成，點(diǎn)擊finish即可
• 下載完成后查看一下，然后留意一下nodejs所在的目錄

•  上面安裝過(guò)程中已自動(dòng)配置了環(huán)境變量和安裝好了npm包

• 此時(shí)可以執(zhí)行 node -v 和 npm -v 分別查看node和npm的版本號(hào)：

3、配置npm在安裝全局模塊時(shí)的路徑和緩存cache的路徑

• 配置環(huán)境時(shí)一定要留意自己的nodejs的根目錄路徑。
•  在執(zhí)行，例如npm install webpack -g等命令全局安裝的時(shí)候，默認(rèn)會(huì)將模塊安裝在C:\Users\用戶名\AppData\Roaming路徑下的npm和npm_cache中，不方便管理且占用C盤空間，如下圖所示：

• 這里配置自定義的全局模塊安裝目錄，在node.js安裝目錄下新建兩個(gè)文件夾 node_global和node_cache，然后在cmd命令下執(zhí)行如下兩個(gè)命令：（路徑看nodejs安裝路徑，我安裝的根路徑是：D:\nodejs）

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

• 執(zhí)行成功后，然后再此電腦 -> 右鍵屬性 -> 高級(jí)系統(tǒng)設(shè)置 -> 環(huán)境變量 -> 系統(tǒng)變量中新建一個(gè)變量名為 “NODE_PATH”， 值為“D:\nodejs\node_modules”，如下圖：

•  最后編輯用戶變量里的Path，將其中默認(rèn)的C:\Users\用戶名\AppData\Roaming\npm更改為D:\nodejs\node_global下圖：

第二章、首次Vue腳手架搭建

1、配置npm國(guó)內(nèi)淘寶鏡像

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

2、具體步驟

• 全局安裝@vue/cli (首次使用)

npm install -g @vue/cli

        -- 過(guò)程中如果有卡頓，按回車?yán)^續(xù)即可。 

        -- 安裝完成之后重啟，輸入vue,如下圖說(shuō)明安裝成功。

• 切換到想要?jiǎng)?chuàng)建的目錄，讓后使用命令創(chuàng)建（使用自定義創(chuàng)建）

        -- 切換到想要?jiǎng)?chuàng)建的目錄，使用命令 vue create 項(xiàng)目名

         -- 選擇最后一項(xiàng)自定義配置項(xiàng)

        -- 進(jìn)入，空格選擇or不選擇

         -- 使用vue2.x

         -- 不使用history模式，使用hash（哈希）模式

         -- 選擇自己用的習(xí)慣的Css預(yù)處理器

         -- 代碼格式校驗(yàn)使用ESLint + Standard config

         -- 校驗(yàn)代碼格式都選：第一種修改保存文件時(shí)，第二種執(zhí)行提交代碼時(shí) 

         -- 生成配置信息：保存到獨(dú)立文件中（選它）；保存到package.json文件中

        -- 是否保存之前的選項(xiàng)，方便下一下直接選（可Y可N）

         -- 綜上

        -- 配置成功

• 啟動(dòng)項(xiàng)目

進(jìn)入項(xiàng)目 --> ctrl+~ 打開(kāi)控制臺(tái) -->npm run serve,執(zhí)行瀏覽器顯示該頁(yè)面，項(xiàng)目完全創(chuàng)建好了??！

總結(jié) 

到此這篇關(guān)于node詳細(xì)安裝教程以及Vue腳手架搭建過(guò)程的文章就介紹到這了,更多相關(guān)node安裝及Vue腳手架搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論