webstorm+vue初始化項目的方法
vue新項目準(zhǔn)備:
1、安裝nodejs,官網(wǎng)下載傻瓜安裝
node -v 驗證
2、npm包管理器,是集成在node中的,所以安裝了node也就有了npm
npm -v 驗證
3、安裝cnpm
npm install -g cnpm --registry=http://registry.npm.taobao.org
(完成之后,我們就可以用cnpm代替npm來安裝依賴包了。如果想進(jìn)一步了解cnpm的,查看淘寶npm鏡像官網(wǎng)。)
4、安裝vue-cli腳手架構(gòu)建工具
npm install -g vue-cli
vue新項目構(gòu)建:
1、初始化項目模板:
vue init webpack-simple yunshi-approve
或者
vue init webpack yunshi-approve
2、安裝npm
cd yunshi-approve
3、安裝項目所需要的依賴:
npm install 或 cnpm install
4、運(yùn)行看效果:
npm run dev
介紹一下目錄及其作用:
build:最終發(fā)布的代碼的存放位置。
config:配置路徑、端口號等一些信息,我們剛開始學(xué)習(xí)的時候選擇默認(rèn)配置。
node_modules:npm 加載的項目依賴模塊。
src:這里是我們開發(fā)的主要目錄,基本上要做的事情都在這個目錄里面,里面包含了幾個目錄及文件:
assets:放置一些圖片,如logo等
components:目錄里放的是一個組件文件,可以不用。
App.vue:項目入口文件,我們也可以將組件寫這里,而不使用components目錄。
main.js :項目的核心文件
static:靜態(tài)資源目錄,如圖片、字體等。
test:初始測試目錄,可刪除
.XXXX文件:配置文件。
index.html:首頁入口文件,可以添加一些meta信息或者同統(tǒng)計代碼啥的。
package.json:項目配置文件。
README.md:項目的說明文件。
以上這篇webstorm+vue初始化項目的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式
這篇文章主要介紹了vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個方法,它主要用于DOM操作,當(dāng)我們修改Vue組件中的數(shù)據(jù)時,Vue.js會在下次事件循環(huán)前自動更新視圖,并異步執(zhí)行$nextTick()中的回調(diào)函數(shù),本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下2023-05-05Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗,Three.js是一款強(qiáng)大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復(fù)雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個簡單的交互式3D場景,需要的朋友可以參考下2023-11-11