基於Idea從零搭建一個最簡單的vue專案

一、需要了解的基本知識

• node.js

Node.js是一個Javascript執行環境(runtime)，釋出於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行最佳化，提供替代的API，使得V8在非瀏覽器環境下執行得更好。V8引擎執行Javascript的速度非常快，效能非常好。 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安裝

• 下載地址：。

下載完成後安裝（直接按預設方式安裝就行）

開啟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=

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

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

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

vue init webpack demo

• demo為你前面新建的專案名。初始化會進行設定。可參考此處設定。

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

  
  

  

• 完成後，會提示在哪個埠可以訪問，此處現在是8080

  
  

  

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

  
  

  

作者：不愛程式設計的程式設計師
連結：