前言

vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架，Vue-cli可以快速幫助我們創(chuàng)建一個(gè)項(xiàng)目，這是官方給我們提供的腳手架。下面我說(shuō)一下vue-cli的使用方法。

下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

一、準(zhǔn)備工作

在使用vue-cli時(shí)，首先需要安裝nodejs，npm，其次需全局安裝vue和vue-cli

　　1、nodejs和npm安裝方法詳見(jiàn)：http://www.dbjr.com.cn/article/90518.htm

　　2、npm install -g vue

　　3、npm install -g vue-cli

二、vue-cli快速搭建項(xiàng)目

安裝完成后，同時(shí)在C:\Users\Andminster\AppData\Roaming\npm目錄下為會(huì)生成幾個(gè)文件。

三、配置環(huán)境變量

Vue不是內(nèi)部或外部命令問(wèn)題解決

表示系統(tǒng)沒(méi)有找到vue.cmd的地址，需要將vue.cmd的地址添加到系統(tǒng)環(huán)境變量的path中。

可以全局搜索，vue.cmd

右鍵選擇“打開文件所在目錄”，將該目錄添加至系統(tǒng)環(huán)境變量path中：

電腦——屬性——高級(jí)系統(tǒng)設(shè)置

四、安裝完成后，創(chuàng)建自己的工作空間

在cmd切換至剛剛創(chuàng)建好的工作空間，如果已經(jīng)有工作空間，直接切換到工作空間即可。

使用命令創(chuàng)建項(xiàng)目

　　vue init webpack test

test是項(xiàng)目名稱，這個(gè)名字自己隨便取。

命令輸入后，會(huì)進(jìn)入安裝階段，需要用戶輸入一些信息

　　1、Project name (vuetest) 項(xiàng)目名稱，可以自己指定，也可直接回車，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters）。

　　2、Project description (A Vue.js project) 項(xiàng)目描述，也可直接點(diǎn)擊回車，使用默認(rèn)名字

接下來(lái)會(huì)讓用戶選擇

　　3、接下來(lái)也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個(gè)ESLint預(yù)設(shè)，編寫vue項(xiàng)目時(shí)的代碼風(fēng)格，因?yàn)槲疫x擇了使用ESLint

　　4、Standard (https://github.com/feross/standard) 標(biāo)準(zhǔn)

　　5、AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法，這個(gè)github地址說(shuō)的是JavaScript最合理的方法

　　6、none (configure it yourself) 這個(gè)不用說(shuō)，自己定義風(fēng)格

　　具體選擇哪個(gè)因人而異吧 ，我選擇標(biāo)準(zhǔn)風(fēng)格

　　7、Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測(cè)試，我選擇安裝

　　8、Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測(cè)試 ，我選擇安裝

　　9、完成

五、運(yùn)行項(xiàng)目

在項(xiàng)目文件夾下執(zhí)行npm install（安裝依賴包），npm run dev（運(yùn)行項(xiàng)目）。

在運(yùn)行項(xiàng)目中如果遇到端口被占用，找到bulid文件夾下的webpack-dev-server.js修改port即可。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論