vue.js之vue-cli腳手架的搭建詳解

相比于主流的angular和react前端框架，vue在近年來也變得非?；馃?。他吸取了前兩者的優(yōu)點，同時學(xué)習(xí)曲線也更加平緩。所以本魔王準備入坑了~~

成都創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、成都做網(wǎng)站、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計制作的專業(yè)網(wǎng)站設(shè)計公司，擁有經(jīng)驗豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實力，在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨特的設(shè)計風(fēng)格。自公司成立以來曾獨立設(shè)計制作的站點1000+。

首先從vue的腳手架搭建開始吧。

這里不得不吐槽，window相對mac和linux確實在軟件開發(fā)方面，非常不方便，代碼打包，環(huán)境搭建等，簡直爆炸~~..然而，嗯，本魔王就是在用win10，哎~

嘛，廢話不多說，今天的任務(wù)就是把腳手架搭好，雖然流程不麻煩，但是npm這個東東，真的可以一不小心就磨掉一下午的時間。這里無論用命令行工具，還是Git Bash，或者WebStrom里的Terminal工具，都是可以的。

（1）檢查node版本

在安裝vue的環(huán)境之前，安裝NodeJS環(huán)境是必須的。可以使用node -v指令檢查，需要保證安裝了4.0版本以上的nodeJS環(huán)境。

當(dāng)然，沒有安裝的話，去Node.js的官網(wǎng)下載一下，各種下一步，傻瓜式安裝就好，非常方便。

tips:這里說一下我自己踩過的一個坑，我最開始，安裝的是國外官網(wǎng)上最新的7.3.0的版本，然后再最后npm run dev的時候各種報錯。最后的解決方式是把node的版本回退到了6.2.0。所以這里推介大家安裝NodeJs 4~6之間的版本。

（2）安裝vue-cli

接下來進入正題，先全局安裝vue-cli。

使用指令

npm install -g vue-cli

接下來就是等等等~~畢竟npm真的很慢。如果發(fā)現(xiàn)在一個地方長期卡著不動，可以ctrl+c取消，然后再重新執(zhí)行。

還有一種解決方式是使用淘寶的cnpm鏡像。

最后做完以后，使用vue 指令檢查一下是否安裝成功，如果成功則結(jié)果如下：

（3）初始化項目

先cd到自己想要創(chuàng)建新項目的文件夾下，然后使用vue init指令

vue init 模板類型 項目名稱

 vue的模板類型，有很多種，可以使用vue list 指令查看

我這里使用的是webpack模板，項目名叫sell，指令如下：

vue init webpack sell

然后可以一路回車下去，里邊的選項可以多數(shù)是用來確認項目名稱，作者，描述信息以及測試等內(nèi)容，可以根據(jù)需求自己選擇。（這里sell是我的項目名）

接下來進入sell文件夾，運行npm install。會發(fā)現(xiàn)項目中多了一個叫node_modules的文件夾，目錄結(jié)構(gòu)如下：

（4）運行vue環(huán)境

接下來使用 npm run dev命令運行項目環(huán)境，效果如下：

這里顯示了已經(jīng)監(jiān)聽了8080端口，接下來在瀏覽器訪問http://localhost:8080/

會看到如下頁面

證明項目已啟動，環(huán)境也是搭建成功啦~~

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標題：vue.js之vue-cli腳手架的搭建詳解
轉(zhuǎn)載源于：http://muchs.cn/article28/jpecjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站營銷、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、手機網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)