快捷導(dǎo)航

vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別

更新時(shí)間：2023年11月06日 16:16:46 作者：張張張_

這篇文章主要介紹了vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用webpack init創(chuàng)建項(xiàng)目

1.用法：vue init webpack app

2.產(chǎn)生目錄如圖

3.目錄說(shuō)明

build及config：webpack配置相關(guān)
node_modules：通過(guò)npm install安裝的依賴代碼庫(kù)
src：項(xiàng)目源碼
static：存放靜態(tài)資源
.babelrc：babel相關(guān)配置（因?yàn)槲覀兊拇a大多都是 ES6，而大多瀏覽器是不支持ES6的，所以我們需要babel幫我們轉(zhuǎn)換成ES5語(yǔ)法）
.editorconfig：編輯器的配置，可以在這里修改編碼、縮進(jìn)等
.eslintignore：設(shè)置忽略語(yǔ)法檢查的目錄文件
.eslintrc.js：eslint的配置文件
.gitignore：git忽略里面設(shè)定的這些文件的提交
index.html：入口html文件
package.json：項(xiàng)目的配置文件，用于描述一個(gè)項(xiàng)目，包括我們init時(shí)的設(shè)置、開發(fā)環(huán)境、生成環(huán)境的依賴插件及版本等。
package-lock.json：普通package.json文件“^2.0”這樣寫的，意味著版本可以大于等于2.0，如此就會(huì)出現(xiàn)各種錯(cuò)誤。

使用vue create app

1.使用vue create圖形化界面創(chuàng)建

2.產(chǎn)生目錄如圖

3.目錄說(shuō)明

node_modules：通過(guò)npm install安裝的依賴代碼庫(kù)
public：部署到生產(chǎn)環(huán)境的目錄
src：源碼
.gitignore：git忽略里面設(shè)定的這些文件的提交
babel.config.js：babel轉(zhuǎn)碼配置
package.json：項(xiàng)目的配置文件，用于描述一個(gè)項(xiàng)目，包括我們init時(shí)的設(shè)置、開發(fā)環(huán)境、生成環(huán)境的依賴插件及版本等。
package-lock.json：普通package.json文件“^2.0”這樣寫的，意味著版本可以大于等于2.0，如此就會(huì)出現(xiàn)各種錯(cuò)誤。

總結(jié)vue create和vue init 的區(qū)別

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板選項(xiàng)可自由配置百，創(chuàng)建出來(lái)的是vue-cli3的項(xiàng)度目，與cue-cli2項(xiàng)目結(jié)構(gòu)不同，配置方法不同，具體配置方法參考官方文檔網(wǎng)頁(yè)鏈接。

vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板來(lái)初始化項(xiàng)目，webpack是官方推薦的標(biāo)準(zhǔn)模板名。

vue-cli2.x項(xiàng)目向?qū)?.x遷移只需要把static目錄復(fù)制到public目錄下，老項(xiàng)目的src目錄覆蓋3.x的src目錄(如果修改了配置，可以查看文檔，用cli3的方法進(jìn)行屬配置)。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: