基於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就搭建完成了 。
作者:不愛程式設計的程式設計師
連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4606/viewspace-2815576/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 從零搭建一個vue專案Vue
- 從零開始搭建一個vue專案Vue
- 從零搭建一個IdentityServer——專案搭建IDEServer
- 「基礎搭建」從零開始,基於 Webpack5 搭建一個 Vue-CliWebVue
- IDEA配置Maven執行一個簡單的專案IdeaMaven
- 基於vue搭建一個簡易版豆瓣Vue
- 從零搭建一個SpringCloud專案之Config(五)SpringGCCloud
- 教你搭建基於typescript的vue專案TypeScriptVue
- 從零開始學Python(九):搭建一個基於SMTP的簡單郵件預警系統Python
- Idea快速搭建一個springbootWeb專案IdeaSpring BootWeb
- 從零搭建一個基於Istio的服務網格
- Vue3專案的簡單搭建與專案結構的簡單介紹Vue
- 基於元件化開發,一個簡單的Android專案框架元件化Android框架
- idea搭建簡易ssm專案IdeaSSM
- IDEA基於支付寶小程式搭建springboot專案IdeaSpring Boot
- 從零開始構建自己的第一個vue專案Vue
- 從零體檢一個魔塔社群模型(modelscope)最簡單demo模型
- 如何搭建一個vue專案Vue
- 用idea搭建SSM專案,原來這麼簡單IdeaSSM
- 一個基於SpringBoot+阿里雲OSS的簡單圖床專案Spring Boot阿里圖床
- 從零到一教你基於vue開發一個元件庫Vue元件
- 基於Vue.js封裝一個簡單的select元件Vue.js封裝元件
- 從零搭建基於golang的個人部落格網站Golang網站
- webpack4.X 實戰(二):從0開始搭建一個 簡單的前端專案Web前端
- 基於vue實現一個簡單的MVVM框架(原始碼分析)VueMVVM框架原始碼
- 從零開始構建一個vue專案 --- webpack歷險記VueWeb
- 嘗試從零開始構建我的商城 (一) :使用Abp vNext快速一個簡單的商城專案
- 一個小白的vue之路(一)——關於vue的簡單瞭解Vue
- Vue從零開發SPA專案Vue
- 簡單幾步搭建一個基於Docker的Tomcat執行環境!DockerTomcat
- 從零搭建自己的Vue管理端框架(一)Vue框架
- 從零開始寫一個簡單的註冊登入系統(Servlet+Tomcat+MySQL+IDEA)ServletTomcatMySqlIdea
- iOS 從零到一搭建元件化專案框架iOS元件化框架
- 基於IDEA的SpringBoot專案建立(三)——thymeleafIdeaSpring Boot
- vue+vux-ui+axios+mock搭建一個簡單vue框架VueUXUIiOSMock框架
- 用腳手架搭建一個 vue 專案Vue
- 自己搭建一個vue專案(腳手架)Vue
- 一個簡單實用的基於echarts-折線圖的vue元件EchartsVue元件