一、需要了解的基本知識

---

• node.js

Node.js是一個Javascript運行環境(runtime)，發布于2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。V8引擎執行Javascript的速度非?？?#xff0c;性能非常好。 Node.js是一個基于Chrome JavaScript運行時建立的平臺， 用于方便地搭建響應速度快、易于擴展的網絡應用。Node.js 使用事件驅動， 非阻塞I/O模型而得以輕量和高效，非常適合在分布式設備上運行數據密集型的實時應用。總結一下，node,js提供了javascript在瀏覽器以外的一個執行環境，滿足一些特定的場景需求。

• npm

npm 是 nodejs 的包管理和分發工具。它可以讓 javascript 開發者能夠更加輕松的共享代碼和共用代碼片段，并且通過 npm 管理你分享的代碼也很方便快捷和簡單。通過npm可以更方便的引用和分析基于nodejs開發的類庫和插件。

• webpack

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。通過webpack可以把基于模塊開發的前端工程代碼打包成可以在瀏覽器使用的格式。

• vue2

是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件系統和vue生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。在開發中vue會把使用vue語法修飾的html標簽與js對象進行綁定，從而使html值變化時可以同步修改js對象，js對象值變化時可以在頁面暫時，使開發從復雜的document操作中解脫出來。

• iview

一套基于 Vue.js 的高質量 UI 組件庫，通過iveiw可以快速的開發出風格一致的前端界面。

---

二、node.js安裝

• 下載地址：https://nodejs.org/en/download/。

下載完成后安裝（直接按默認方式安裝就行）

打開cmd 輸入下面的命令查看是否成功安裝
node -v
npm -v

三、搭建項目

1 .打開idea,新建項目
Create New Project > Static Web>填寫project name和選擇保存的工作空間>Finish

?

3.png

2.安裝vue腳手架工具

• 首先安裝npm的淘寶鏡像(下載速度比較快)，打開idea的Terminal

  ?
  ?

  輸入以下的命令

npm i -g cnpm --registry=https://registry.npm.taobao.org

• 等待下載完成以后，繼續安裝vue的腳手架工具，在Terminal內繼續輸入以下命令

npm i -g vue-cli
測試是否安裝成功：
vue -V

• 腳手架安裝完成后，初始化包結構,繼續輸入

vue init webpack demo

• demo為你前面新建的項目名。初始化會進行設置?？蓞⒖即颂幵O置。

• 初始化完成后。依次在Terminal輸入圖片內的黃色文字

  ?

• 完成后，會提示在哪個端口可以訪問，此處現在是8080

  ?

• 打開瀏覽器輸入：localhost:8080,出現以下畫面，簡單的demo就搭建完成了 。

  ?

總結

以上是生活随笔為你收集整理的【转】世上最简单的vue教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。