如何進(jìn)行vue入門環(huán)境搭建及運(yùn)行

本篇文章為大家展示了如何進(jìn)行vue入門環(huán)境搭建及運(yùn)行，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

vue簡(jiǎn)介：

    Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。他自身不是一個(gè)全能框架——只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。在與相關(guān)工具和支持庫一起使用時(shí)，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁應(yīng)用。

    第一步：安裝node.js 下載鏈接https://nodejs.org/en/

        node簡(jiǎn)介

    Node.js是一個(gè)Javascript運(yùn)行環(huán)境。實(shí)際上它是對(duì)Chrome V8引擎進(jìn)行了封裝。Node 是一個(gè)服務(wù)器端 JavaScript 解釋器，他會(huì)改變服務(wù)器應(yīng)該如何工作的概念。它的目標(biāo)是幫助程序員構(gòu)建高度可伸縮的應(yīng)用程序，編寫能夠處理數(shù)萬條同時(shí)連接到一個(gè)物理機(jī)的連接代碼。那直白的說，Node.js就是服務(wù)器程序，是用來做后端的技術(shù)，不能直接用于前端開發(fā)。但是干前端的學(xué)會(huì)了會(huì)更加的牛逼，對(duì)編程的思想和代碼效率有很大的提升。Node大量使用時(shí)間驅(qū)動(dòng)實(shí)現(xiàn)異步開發(fā)，能夠高效的打通前后端，所以vue也是采用他作為配置環(huán)境，便于大型項(xiàng)目的開發(fā)。

    如何查看是否安裝成功：黑窗口（命令行）中輸入：

node -v

第二步：安裝vue.js

打開cmd命令框，輸入 

npm install vue

第三步：安裝vue-cli工具

Vue-cli是vue官方提供的一個(gè)命令行工具（vue-cli），可用于快速搭建大型單頁應(yīng)用

打開cmd命令框，輸入 

npm install --global vue-cli

第四步 ：安裝webpack

打開cmd命令框,輸入 

npm install webpack -g

第五步：創(chuàng)建vue的demo項(xiàng)目

進(jìn)入到你想要存放項(xiàng)目的目錄下，執(zhí)行該命令（ vue init webpack 項(xiàng)目名稱）：

vue init webpack demo_vue

然后根據(jù)需要選擇要安裝的模塊

demo目錄結(jié)構(gòu)

頁面截圖可能跟正常的有細(xì)微的出入

第六步：運(yùn)行vue的demo項(xiàng)目

 cd demo_vue   //進(jìn)入到剛創(chuàng)建的項(xiàng)目中

$ npm install     $ npm run dev     //運(yùn)行項(xiàng)目

在瀏覽器直接訪問：http://localhost:8080/即可

如下圖

到這里，vue項(xiàng)目初步搭建成功。

上述內(nèi)容就是如何進(jìn)行vue入門環(huán)境搭建及運(yùn)行，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。