webstorm+vue初始化項(xiàng)目的方法
vue新項(xiàng)目準(zhǔn)備:
1、安裝nodejs,官網(wǎng)下載傻瓜安裝
node -v 驗(yàn)證
2、npm包管理器,是集成在node中的,所以安裝了node也就有了npm
npm -v 驗(yàn)證
3、安裝cnpm
npm install -g cnpm --registry=http://registry.npm.taobao.org
(完成之后,我們就可以用cnpm代替npm來(lái)安裝依賴包了。如果想進(jìn)一步了解cnpm的,查看淘寶npm鏡像官網(wǎng)。)
4、安裝vue-cli腳手架構(gòu)建工具
npm install -g vue-cli
vue新項(xiàng)目構(gòu)建:
1、初始化項(xiàng)目模板:
vue init webpack-simple yunshi-approve
或者
vue init webpack yunshi-approve
2、安裝npm
cd yunshi-approve
3、安裝項(xiàng)目所需要的依賴:
npm install 或 cnpm install
4、運(yùn)行看效果:
npm run dev
介紹一下目錄及其作用:
build:最終發(fā)布的代碼的存放位置。
config:配置路徑、端口號(hào)等一些信息,我們剛開始學(xué)習(xí)的時(shí)候選擇默認(rèn)配置。
node_modules:npm 加載的項(xiàng)目依賴模塊。
src:這里是我們開發(fā)的主要目錄,基本上要做的事情都在這個(gè)目錄里面,里面包含了幾個(gè)目錄及文件:
assets:放置一些圖片,如logo等
components:目錄里放的是一個(gè)組件文件,可以不用。
App.vue:項(xiàng)目入口文件,我們也可以將組件寫這里,而不使用components目錄。
main.js :項(xiàng)目的核心文件
static:靜態(tài)資源目錄,如圖片、字體等。
test:初始測(cè)試目錄,可刪除
.XXXX文件:配置文件。
index.html:首頁(yè)入口文件,可以添加一些meta信息或者同統(tǒng)計(jì)代碼啥的。
package.json:項(xiàng)目配置文件。
README.md:項(xiàng)目的說(shuō)明文件。
以上這篇webstorm+vue初始化項(xiàng)目的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能的相關(guān)資料,Vue?3和Element?Plus提供了一種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)側(cè)邊菜單欄與標(biāo)簽頁(yè)之間的聯(lián)動(dòng),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue+j簡(jiǎn)單的實(shí)現(xiàn)輪播效果,滾動(dòng)公告,銜接
這篇文章主要介紹了vue+j簡(jiǎn)單的實(shí)現(xiàn)輪播效果,滾動(dòng)公告,銜接,文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-06-06
關(guān)于Vue 自定義指令實(shí)現(xiàn)元素拖動(dòng)的詳細(xì)代碼
這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)元素拖動(dòng),在使用自定義指令之前,先對(duì)自定義指令有一定的了解,主要從自定義指令定義范圍,鉤子函數(shù)方面入手,需要的朋友可以參考下2022-01-01
vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法
今天小編就為大家分享一篇vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue中子組件不能修改父組件傳來(lái)的Prop值的原因分析
在Vue中,父子組件之間通過(guò)Prop和Event實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定,但是,Vue設(shè)計(jì)者為什么不允許子組件修改父組件傳遞的Prop呢,本文就來(lái)帶大家探究為什么子組件不能修改Prop,需要的朋友可以參考下2023-06-06
element el-input directive數(shù)字進(jìn)行控制
本文介紹了vue使用directive 進(jìn)行控制的方法,使用element開發(fā)的過(guò)程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字,并且有不要小數(shù)點(diǎn),有需要小數(shù)點(diǎn)的,就有一定的參考價(jià)值,有興趣的可以了解一下2018-10-10
淺析Vue中Virtual?DOM和Diff原理及實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue中Virtual?DOM和Diff原理及實(shí)現(xiàn)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-03-03

