快捷導(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ū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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

1.用法：vue init webpack app

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

3.目錄說明

build及config：webpack配置相關(guān)
node_modules：通過npm install安裝的依賴代碼庫
src：項(xiàng)目源碼
static：存放靜態(tài)資源
.babelrc：babel相關(guān)配置（因?yàn)槲覀兊拇a大多都是 ES6，而大多瀏覽器是不支持ES6的，所以我們需要babel幫我們轉(zhuǎn)換成ES5語法）
.editorconfig：編輯器的配置，可以在這里修改編碼、縮進(jìn)等
.eslintignore：設(shè)置忽略語法檢查的目錄文件
.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.目錄說明

node_modules：通過npm install安裝的依賴代碼庫
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)建出來的是vue-cli3的項(xiàng)度目，與cue-cli2項(xiàng)目結(jié)構(gòu)不同，配置方法不同，具體配置方法參考官方文檔網(wǎng)頁鏈接。

vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板來初始化項(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue制作加載更多功能的正確打開方式
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見的業(yè)務(wù)場景——分頁/無限加載，以及編寫過程中自己的錯(cuò)誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計(jì)思想。
2016-10-10
Vue中失去焦點(diǎn)時(shí)所觸發(fā)的事件問題
這篇文章主要介紹了Vue中失去焦點(diǎn)時(shí)所觸發(fā)的事件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式
這篇文章主要介紹了vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解
我們在做列表查詢的時(shí)候，會(huì)有很多查詢項(xiàng)，如何實(shí)現(xiàn)超過n行查詢項(xiàng)的時(shí)候自動(dòng)折疊起來呢？本文給大家分享vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解，感興趣的朋友一起看看吧
2022-06-06
基于Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁功能
Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫，它面向企業(yè)級(jí)的后臺(tái)應(yīng)用，能夠幫助你快速地搭建網(wǎng)站，極大地減少研發(fā)的人力與時(shí)間成本。這篇文章主要介紹了Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁功能,需要的朋友可以參考下
2017-10-10
vue中的計(jì)算屬性傳參
這篇文章主要介紹了vue中的計(jì)算屬性傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue.js實(shí)現(xiàn)的全選與全不選功能示例【基于elementui】
這篇文章主要介紹了vue.js實(shí)現(xiàn)的全選與全不選功能,結(jié)合實(shí)例形式分析了vue.js基于elementui實(shí)現(xiàn)全選與全不選功能的相關(guān)頁面渲染、初始化數(shù)據(jù)及功能函數(shù)等相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
詳解Vue3中響應(yīng)式的特殊處理
這篇文章主要為大家詳細(xì)介紹了Vue3中響應(yīng)式的一些特殊處理，文中的示例代碼講解詳細(xì)，對(duì)我們深入了解Vue3有一定的幫助，需要的可以參考一下
2023-04-04
vue3調(diào)度器scheduler功能和用法詳解
調(diào)度器是vue3響應(yīng)式系統(tǒng)中一個(gè)非常重要的特性，可調(diào)度性指的是當(dāng)trigger 動(dòng)作觸發(fā)副作用函數(shù)重新執(zhí)行時(shí)，有能力決定副作用函數(shù)執(zhí)行的時(shí)機(jī)、次數(shù)以及方式，本文通過代碼示例給大家介紹調(diào)度器是什么，有什么功能，怎么使用,感興趣的同學(xué)可以借鑒閱讀
2023-06-06
vue移動(dòng)端項(xiàng)目緩存問題實(shí)踐記錄
最近在做一個(gè)vue移動(dòng)端項(xiàng)目，被緩存問題搞得頭都大了，積累了一些經(jīng)驗(yàn)，特此記錄總結(jié)下，分享到腳本之家平臺(tái)，對(duì)vue移動(dòng)端項(xiàng)目緩存問題實(shí)踐記錄感興趣的朋友跟隨小編一起看看吧
2018-10-10