如何啟動一個Vue.js項目

Posted on by

一. Node.js與Vue

1.1 Node.js

  • Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用瞭一個事件驅動、非阻塞式 I/O 的模型。
  • [Node 是一個讓 JavaScript 運行在服務端的開發平臺，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。 發佈於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行瞭封裝。
  • Node對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。V8引擎執行Javascript的速度非常快，性能非常好。Node是一個基於Chrome JavaScript運行時建立的平臺， 用於方便地搭建響應速度快、易於擴展的網絡應用。Node 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分佈式設備上運行數據密集型的實時應用。

簡單來說，Node.js對我們項目來講相當於一個編譯環境，類似於我們java語言編譯需要Jvm虛擬機一樣。安裝Node.js後我們就可以編譯Node項目啦。

1.2 Vue.js

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

簡單來說,Vue.js是一個應用框架，它類似於Java中的Spring系列一樣，它能給我們提供簡潔高效的語法，能夠高效率且質量的去協助我們完成一個前端項目；同時因為它是一個輕量級框架，我們可以隻需要引入它的一個vue.js就可以去使用它的語法瞭。

1.3 概述此篇文章內容

此篇文章，博主將帶大傢在本地跑起來Vue.js項目，同時在服務器能夠自己獨立部署Vue項目；

二. 本地dev環境運行前端Vue項目

2.1 下載安裝Node.js

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

選擇windows版本，建議選擇長期支持版按照提示一直點確定即可，node.js安裝完成後會自動配置環境變量安裝完成後，打開cmd窗口，輸入命令： node –version，出現如圖所示內容表示安裝成功，如圖所示：

2.2 安裝前端開發工具

前端經常使用的為WebStrom和VsCode，這裡以安裝WebStrom 做介紹：

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

2.安裝WebStrom，網上有很多教程，具體可百度，不長期使用的話我們可以先免費試用30天

3.導入項目： 點擊file -> open -> 選擇具體的前端項目，點擊ok -> 等待構建索引完成

4.常用命令：

構建項目：

npm install

啟動服務

npm run dev

點擊提供的url路徑，進入瀏覽器查看服務，如圖所示：

 2.3 使用 package.json內的命令啟動：

我們可以直接點擊綠色箭頭啟動，如圖所示：

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

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

三. 服務器環境部署前端Vue項目

3.1 部署Node.js環境

  • 參考這篇教程 https://blog.csdn.net/qq_37128049/article/details/104431768
  • 安裝瞭Node即可，Node自帶Npm。
  • 此教程配置的Node環境變量為臨時環境變量，項目重新啟動時需要重新寫入。同學們若需要永久環境變量，可網上參考教程；

3.2 安裝express-generator生成器

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

npm install express-generator -g

創建express項目：

express expressDemo （expressDemo替換為自己的項目名）

expressDemo項目目錄如下圖:：

進入項目：

cd expressDemo

若改為瞭自己的項目名，這裡的expressDemo則改為自己的項目名

項目構建：

npm install

打開我們Windows下的開發工具，使用npm build命令，將項目打包，將public下的文件復制到expressDemo中的public目錄 內：

輸入如下命令，運行expressDemo:

npm start

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

我們部署的地方如果為服務器，我們要想在自己電腦上看到效果的話，需要註意： 1. localhost替換為服務器ip，3000端口根據實際端口來看； 2. 如果啟動成功訪問不瞭，請註意是否防火墻對此端口是否開放之類；

上面是啟動vue項目的辦法，還有很多辦法同學們可以網上尋找答案。一個最簡單的辦法就是直接將全部代碼拷貝上去，執行npm install+npm run dev即可啟動成功；非Vue項目，但是是Node.js項目的話，也可以用這種辦法哦！

以上就是如何啟動一個Vue.js項目的詳細內容，更多關於啟動Vue.js項目的資料請關註WalkonNet其它相關文章！

推薦閱讀：