基於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=https://registry.npm.taobao.org

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

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

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

vue init webpack demo

  • demo爲你前面新建的項目名。初始化會進行設置。可參考此處設置。

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

     

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

     

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

     



作者:不愛編程的程序員
鏈接:https://www.jianshu.com/p/9c1d4f8ed068
來源:簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。

發佈了19 篇原創文章 · 獲贊 15 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章