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

1.用法：vue init webpack app

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

3.目錄說明

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

使用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：項目的配置文件，用于描述一個項目，包括我們init時的設(shè)置、開發(fā)環(huán)境、生成環(huán)境的依賴插件及版本等。
• package-lock.json：普通package.json文件“^2.0”這樣寫的，意味著版本可以大于等于2.0，如此就會出現(xiàn)各種錯誤。

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

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

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

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

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

最新評論