vue cli搭建及專案目錄結構

2021-09-03 00:08:26 字數 1062 閱讀 3530

今天總結一下vue的腳手架的搭建。很簡單,今天我們就來說一下

一、vue 腳手架的搭建。

對於腳手架的具體搭建方法,我這裡不在很詳細的書寫,具體方法我推薦菜鳥教程的方法,和具體,你一步一步的來就可以實現。

鏈結位址

:vue2.0腳手架的搭建:

二、vue腳手架目錄:

我們來詳細的介紹一下這些目錄:

一級目錄 

build: webpack 配置相關的目錄 

config: webpack 配置相關的目錄 

node_modules: npm install 安裝的依賴**庫 

src:我們存放的原始碼,我們開發的所喲**都放在src目錄下。 

staic: 存放一些第三方靜態資源的目錄 

test:測試目錄,沒有太大用處,可以刪除

一級檔案: 

.babelrc: babel的一些配置,(將es6編譯成es5的一些配置) 

.editorconfig:編輯器的一些配置(包括編碼格式,縮排風格,換行格式) 

.eslintignore:配置我們不會對build檔案和config檔案進行語法檢查。 

.eslintrc.js: eslint的配置檔案,主要是定義一些**編寫風格的規則。 

.gitignore:配置git倉庫忽略的一些檔案(不會上傳) 

.postcssrc.js 防止樣式錯亂

index.html: 入口html 檔案。 

package.json:專案的一些配置資訊(專案的一些具體資訊)

src 資料夾下的 目錄:

conponents 資料夾: 存放元件,裡面你可以在建檔案來分元件,比如建 header 問價夾, footer 資料夾 

router 資料夾: 配置路由檔案 

main.js 檔案: 主要作用是初始化vue例項並使用需要的外掛程式

dist資料夾為我們經過編譯後產生的 檔案,專案上線一般就是將編譯好的build檔案及相關依賴發布上線

vue cli2 0搭建專案目錄結構詳解

readme.md 專案說明文件 node modules 依賴包目錄 build webpack相關配置檔案 都已配置好,一般無需再配置 build.js 生成環境構建 check versions.js 版本檢查 node,npm dev client.js 開發伺服器熱過載 實現頁面的自動重新...

vue cli專案的目錄結構介紹

vue.js是一套構建使用者介面的漸進式框架。vue採用自底向上增量開發的設計。vue的核心庫只關心檢視層,非常容易學習,非常容易與其它庫和已有專案整合。vue完全有能力驅動採用單檔案元件和vue生態系統支援的庫開發的複雜單頁應用。vue.js的目標是通過盡可能簡單的api實現響應的資料繫結和組合的...

vue cli 專案搭建

1 因為之前已經安裝過node.js和git,所以直接用npm 2 吶吶吶npm速度慢是一定的了,所以用 映象,將npm cnpm 這裡寫 片3 開啟cmd,進入想要建立專案的目錄下,輸入 vue init webpack projectname4 安裝提示選擇 project name 專案名稱 ...