VUE CLI3是一個基于Vue.js進行快速開發的方案。VUE.CLI3構建的項目有良好的規范和結構,使得項目更具可維護性,易于團隊協作。以下是VUE CLI3的基本目錄結構,我們將一一進行講解。
./ ├── node_modules/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── router/ │ ├── store/ │ ├── views/ │ ├── App.vue │ └── main.js ├── babel.config.js ├── package.json └── vue.config.js
1、node_modules文件夾是npm所依賴的庫都存放在這個文件夾內。
2、src文件夾是我們的源代碼的主要文件夾,它包含了我們代碼主要使用的資源:
assets目錄主要存放我們的靜態資源,如圖片、樣式表、字體文件等;components目錄主要存放我們的組件代碼;router目錄存放著我們配置的路由信息,通過路由可以控制頁面的跳轉;store目錄存放應用的狀態管理模塊;views目錄存放我們實際的頁面代碼,作為組件的視圖。
3、App.vue是我們整個應用的主組件,所有的組件都可以掛載在這個組件之下。它由template、script、style三部分組成。template 是應用的界面模板,script 是項目的邏輯主體,而style是模板的樣式。
4、main.js是我們應用的入口文件,在這個文件中我們要引入我們需要的插件、組件、路由、狀態管理等實現我們的應用功能。在這個文件中我們需要實現一個Vue實例,該實例可以被用來掛載我們的整個應用。
5、babel.config.js是項目的babel配置文件,babel可以將ES6代碼轉換成ES5代碼,使得我們的代碼能夠向下兼容。該文件配置了babel的插件和規則。
6、package.json是我們的應用所需要的各種依賴包的文件。在這個文件我們配置了我們的開發依賴、生產依賴、腳本等。這個文件也詳細說明了每個組件的版本、作者和依賴。
7、vue.config.js是我們應用的配置文件,我們可以在這個文件中進行我們應用的各種配置,比如代理服務器的設置、打包路徑的配置等。