一. Node.js與Vue

1.1 Node.js

Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。 Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型。 [Node 是一個(gè)讓 JavaScript 運(yùn)行在服務(wù)端的開發(fā)平臺(tái)，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務(wù)端語言平起平坐的腳本語言。 發(fā)布于2009年5月，由Ryan Dahl開發(fā)，實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝。 Node對(duì)一些特殊用例進(jìn)行優(yōu)化，提供替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。V8引擎執(zhí)行Javascript的速度非常快，性能非常好。Node是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)， 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。Node 使用事件驅(qū)動(dòng)， 非阻塞I/O 模型而得以輕量和高效，非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用。

簡(jiǎn)單來說，Node.js對(duì)我們項(xiàng)目來講相當(dāng)于一個(gè)編譯環(huán)境，類似于我們java語言編譯需要Jvm虛擬機(jī)一樣。安裝Node.js后我們就可以編譯Node項(xiàng)目啦。

1.2 Vue.js

Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，方便與第三方庫或既有項(xiàng)目整合。 Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件 Vue.js 自身不是一個(gè)全能框架——它只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，在與相關(guān)工具和支持庫一起使用時(shí)  ，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁應(yīng)用。 Vue.js具有的特點(diǎn)： 易用： 在有HTML CSS JavaScript的基礎(chǔ)上，快速上手。靈活：簡(jiǎn)單小巧的核心，漸進(jìn)式技術(shù)棧，足以應(yīng)付任何規(guī)模的應(yīng)用。高性能：20kb min+gzip 運(yùn)行大小、超快虛擬 DOM 、最省心的優(yōu)化

簡(jiǎn)單來說,Vue.js是一個(gè)應(yīng)用框架，它類似于Java中的Spring系列一樣，它能給我們提供簡(jiǎn)潔高效的語法，能夠高效率且質(zhì)量的去協(xié)助我們完成一個(gè)前端項(xiàng)目；同時(shí)因?yàn)樗且粋€(gè)輕量級(jí)框架，我們可以只需要引入它的一個(gè)vue.js就可以去使用它的語法了。

1.3 概述此篇文章內(nèi)容

此篇文章，博主將帶大家在本地跑起來Vue.js項(xiàng)目，同時(shí)在服務(wù)器能夠自己獨(dú)立部署Vue項(xiàng)目；

二. 本地dev環(huán)境運(yùn)行前端Vue項(xiàng)目

2.1 下載安裝Node.js

下載地址 https://nodejs.org/zh-cn/

選擇windows版本，建議選擇長(zhǎng)期支持版按照提示一直點(diǎn)確定即可，node.js安裝完成后會(huì)自動(dòng)配置環(huán)境變量安裝完成后，打開cmd窗口，輸入命令： node --version，出現(xiàn)如圖所示內(nèi)容表示安裝成功，如圖所示：

2.2 安裝前端開發(fā)工具

前端經(jīng)常使用的為WebStrom和VsCode，這里以安裝WebStrom 做介紹：

1.下載WebStrom: 下載地址 https://www.jetbrains.com/zh-cn/webstorm/download/

2.安裝WebStrom，網(wǎng)上有很多教程，具體可百度，不長(zhǎng)期使用的話我們可以先免費(fèi)試用30天

3.導(dǎo)入項(xiàng)目： 點(diǎn)擊file -> open -> 選擇具體的前端項(xiàng)目，點(diǎn)擊ok -> 等待構(gòu)建索引完成

4.常用命令：

構(gòu)建項(xiàng)目：

npm install

啟動(dòng)服務(wù)

npm run dev

點(diǎn)擊提供的url路徑，進(jìn)入瀏覽器查看服務(wù)，如圖所示：

 2.3 使用 package.json內(nèi)的命令啟動(dòng)：

我們可以直接點(diǎn)擊綠色箭頭啟動(dòng)，如圖所示：

圖中為Intellij IDEA， WebStrom 使用方式類似；

此外還有其他命令，就不多贅述。同學(xué)們需要了解的可自行百度。

三. 服務(wù)器環(huán)境部署前端Vue項(xiàng)目

3.1 部署Node.js環(huán)境

參考這篇教程 https://blog.csdn.net/qq_37128049/article/details/104431768 安裝了Node即可，Node自帶Npm。 此教程配置的Node環(huán)境變量為臨時(shí)環(huán)境變量，項(xiàng)目重新啟動(dòng)時(shí)需要重新寫入。同學(xué)們?nèi)粜枰谰铆h(huán)境變量，可網(wǎng)上參考教程；

3.2 安裝express-generator生成器

輸入如下命令安裝生成器：

npm install express-generator -g

創(chuàng)建express項(xiàng)目：

express expressDemo （expressDemo替換為自己的項(xiàng)目名）

expressDemo項(xiàng)目目錄如下圖:：

進(jìn)入項(xiàng)目：

cd expressDemo

若改為了自己的項(xiàng)目名，這里的expressDemo則改為自己的項(xiàng)目名

項(xiàng)目構(gòu)建：

npm install

打開我們Windows下的開發(fā)工具，使用npm build命令，將項(xiàng)目打包，將public下的文件復(fù)制到expressDemo中的public目錄 內(nèi)：

輸入如下命令，運(yùn)行expressDemo:

npm start

打開瀏覽器，輸入： http://localhost:3000就可以看到效果了

我們部署的地方如果為服務(wù)器，我們要想在自己電腦上看到效果的話，需要注意： 1. localhost替換為服務(wù)器ip，3000端口根據(jù)實(shí)際端口來看； 2. 如果啟動(dòng)成功訪問不了，請(qǐng)注意是否防火墻對(duì)此端口是否開放之類；

上面是啟動(dòng)vue項(xiàng)目的辦法，還有很多辦法同學(xué)們可以網(wǎng)上尋找答案。一個(gè)最簡(jiǎn)單的辦法就是直接將全部代碼拷貝上去，執(zhí)行npm install+npm run dev即可啟動(dòng)成功；非Vue項(xiàng)目，但是是Node.js項(xiàng)目的話，也可以用這種辦法哦！

以上就是如何啟動(dòng)一個(gè)Vue.js項(xiàng)目的詳細(xì)內(nèi)容，更多關(guān)于啟動(dòng)Vue.js項(xiàng)目的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！