搭建VUE環境、安裝npm、node.js

一、Node.js 安裝配置

在 Windows 上安裝 Node.js 的方法。

Node.js 安裝包及源碼下載地址爲:https://nodejs.org/en/download/

你可以根據不同平臺系統選擇你需要的 Node.js 安裝包。node.js中包含npm

Node.js 歷史版本下載地址:https://nodejs.org/dist/

注意:Linux 上安裝 Node.js 需要安裝 Python 2.6 或 2.7 ,不建議安裝 Python 3.0 以上版本。

Windows 上安裝 Node.js

你可以採用以下兩種方式來安裝。

1、Windows 安裝包(.msi)

本文實例以 v0.10.26 版本爲例,其他版本類似, 安裝步驟:

步驟 1 : 雙擊下載後的安裝包 v0.10.26,如下所示:

install-node-msi-version-on-windows-step1

步驟 2 : 點擊以上的Run(運行),將出現如下界面:

install-node-msi-version-on-windows-step2

步驟 3 : 勾選接受協議選項,點擊 next(下一步) 按鈕 :

 

步驟 4 : Node.js默認安裝目錄爲 "C:\Program Files\nodejs\" , 你可以修改目錄,並點擊 next(下一步):

install-node-msi-version-on-windows-step4

步驟 5 : 點擊樹形圖標來選擇你需要的安裝模式 , 然後點擊下一步 next(下一步)

install-node-msi-version-on-windows-step5

步驟 6 :點擊 Install(安裝) 開始安裝Node.js。你也可以點擊 Back(返回)來修改先前的配置。 然後並點擊 next(下一步):

 

安裝過程:

install-node-msi-version-on-windows-step7

點擊 Finish(完成)按鈕退出安裝嚮導。

install-node-msi-version-on-windows-step8

檢測PATH環境變量是否配置了Node.js,點擊開始=》運行=》輸入"cmd" => 輸入命令"path",輸出如下結果:

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我們可以看到環境變量中已經包含了C:\Program Files\nodejs\

檢查Node.js版本

node-version-test

安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架

在cmd裏 輸入:npm install -g vue-cli,回車,等待安裝...

            .輸入:vue,回車,若出現vue信息說明表示成功

創建項目

在cmd裏輸入:vue init webpack vue_test(項目文件夾名),回車,等待一小會兒,依次出現‘git’下的項,可按下圖操作

其中包含項目名稱 介紹  作者 還有一些其他配置

Use ESLint to lint your code?這一項選擇N  eslint校驗,可以來規範開發人員的代碼,是挺好的。但是有些像縮進、空格、空白行之類的規範,在開發過程中一直報錯,未免太過於苛刻了。所以,我還是會選擇關閉eslint校驗。如果不小心打開https://www.jianshu.com/p/8160a97d21c1 關閉教程

安裝依賴

在cmd裏  1).輸入:cd vue_test(項目名),回車,進入到具體項目文件夾

             2).輸入:npm install,回車,等待一小會兒

回到項目文件夾,會發現項目結構裏,多了一個node_modules文件夾(該文件裏的內容就是之前安裝的依賴)

基於腳手架創建的默認項目結構如下圖所示:

測試環境是否搭建成功

方法1:在cmd裏輸入:npm run dev

方法2:在瀏覽裏輸入:localhost:8080(默認端口爲8080)

運行起來後的效果如下圖所示:

使用vscode開發

官網下載地址:https://code.visualstudio.com/

使用vscode打開項目

在文件-打開文件夾-選擇剛剛創建的項目

 安裝vue代碼高亮顯示的插件(我的vue版本是2.幾)

安裝後代碼顯示分明,如果不安裝則顯示灰色

問題:

在安裝過程中,你可能會遇到這個問題.

當我們運行某個項目是 會提示

複製代碼

複製代碼

> [email protected] dev C:\Users\ASUS\my-project
> node build/dev-server.js


To use this template, you must update following to modules:

  npm: 2.15.9 should be >= 3.0.0

複製代碼

複製代碼

這是隻有升級npm

即是 :使用 npm -g install [email protected] (版本號2.9.1 可以根據已發佈的版本隨意升級或降級),獲取最新版本的npm 文件

查看版本:

這時在項目中進行  npm run dev 時還是會 提示

因此還有一部關鍵的一步:

複製C:\Users\{你的Windows用戶名}\AppData\Roaming\npm\node_modules\npm下的文件到你的 NodeJS安裝目錄下的 \node_modules\npm 中,覆蓋掉原有的全部文件

最後運行  npm run  dev 成功運行

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章