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

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

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

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

（1）檢查node版本

在安裝vue的環(huán)境之前，安裝NodeJS環(huán)境是必須的?？梢允褂胣ode -v指令檢查，需要保證安裝了4.0版本以上的nodeJS環(huán)境。

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

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

（2）安裝vue-cli

接下來進(jìn)入正題，先全局安裝vue-cli。

使用指令

npm install -g vue-cli

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

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

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

（3）初始化項(xiàng)目

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

vue init 模板類型 項(xiàng)目名稱

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

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

vue init webpack sell

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

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

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

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

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

會(huì)看到如下頁面

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論