Vue Cli3創建Vue項目之目錄結構分析

通過命令”vue create 項目名稱“創建項目後,可得到如下目錄結構,如直接運行。

Vue Cli3創建Vue項目之目錄結構分析

目錄結構

一、node_modules,此目錄是Vue項目安裝依賴或插件存放的包,一般情況下,我們不用關心此目錄下到底是放了些什麼。

二、public,存放Vue項目網頁入口,index.html及favicon.ico,在這裡可修改項目的標題,其他地方基本也不用修改。

三、src,此目錄才是我們開發項目時用到的,assets目錄是用於存放靜態資源,如圖片、CSS文件、JS文件等,components目錄是用於存放組件的,即vue文件。當然,你還可以在src目錄下新建任意文件夾,用於自己實際項目需求,如:api(可存放用於調用後臺服務的URL請求)、plugins(存放自定義的插件)。

App.vue文件,項目初始化組件,在此文件中,引入 HelloWorld.vue。

main.js文件,項目入口,將新建的Vue掛載到index.html文件下,同時加載App.vue文件。

<code>import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')/<code>

四、.gitignore、babel.config.js、package.json、package-lock.json、README.md這些文件都是項目自動生成的,package.json、package-lock.json這兩個文件用於控制依賴或插件的版本,README.md這個文件可寫一些關於項目的描述。

注意:vue cli3生成的項目,沒有vue.config.js文件,如果需要做前後端分離項目,可新建一個vue.config.js文件,配置可通過“瞭解更多”學習。


分享到:


相關文章: