vue cli目錄結構介紹

2022-08-09 11:24:12 字數 2159 閱讀 2492

乙個vue-cli的專案結構如下:

1.build——[webpack配置]

build檔案主要是webpack的配置,主要啟動檔案是dev-server.js,當我們輸入npm run dev首先啟動的就是dev-server.js,它會去檢查node及npm版本,載入配置檔案,啟動服務。

2.config——[vue專案配置]

config檔案主要是專案相關配置,我們常用的就是當埠衝突時配置監聽埠,打包輸出路徑及命名等

3.node_modules——[依賴包]

node_modules裡面是專案依賴包,其中包括很多基礎依賴,自己也可以根據需要安裝其他依賴。安裝方法為開啟cmd,進入專案目錄,輸入npm install [依賴包名稱],回車。

在兩種情況下我們會自己去安裝依賴:

(1)專案執行缺少該依賴包:例如專案載入外部css會用到的css-loader,路由跳轉vue-loader等(安裝方法示例:npm install css-loader)

(2)安裝外掛程式:如vux(基於weui的移動端元件庫),vue-swiper(輪播外掛程式

注:有時會安裝指定依賴版本,需在依賴包名稱後加上版本號資訊,如安裝11.1.4版本的vue-loader,輸入npm install [email protected]

4.src——[專案核心檔案]

4.1 index.html——[主頁]

index.html如其他html一樣,但一般只定義乙個空的根節點,在main.js裡面定義的例項將掛載在根節點下,內容都通過vue元件來填充

乙個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)

是子路由檢視,後面的路由頁面都顯示在此處

打乙個比喻吧,類似於乙個插槽,跳轉某個路由時,該路由下的頁面就插在這個插槽中渲染顯示

【script】

vue通常用es6來寫,用export default匯出,其下面可以包含資料data,生命週期(mounted等),方法(methods)等,具體語法請看vue.js文件,在後面我也會通過例子來說明。

【style】

樣式通過style標籤包裹,預設是影響全域性的,如需定義作用域只在該元件下起作用,需在標籤上加scoped,

4.3 main.js——[入口檔案]

main.js主要是引入vue框架,根元件及路由設定,並且定義vue例項,下圖中的

後期還可以引入外掛程式,當然首先得安裝外掛程式。

4.4 router——[路由配置]

router資料夾下,有乙個index.js,即為路由配置檔案

這裡定義了路徑為'/'的路由,該路由對應的頁面是hello元件,所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的hello元件

類似的,我們可以設定多個路由,『/index』,'/list'之類的,當然首先得引入該元件,再為該元件設定路由。

注意:

1.assets用來放置樣式、靜態,只要src下面的元件中用到的資源就放在assets中。

2.static用來放沒有npm包的第三方外掛程式,字型檔案。

3.assets與components同級  components下的.vue引用靜態檔案時,相對路徑為 ../assets/wapfront

寫法:

vue cli目錄結構介紹002

總體框架 1.build webpack配置 build檔案主要是webpack的配置,主要啟動檔案是dev server.js,當我們輸入npm run dev首先啟動的就是dev server.js,它會去檢查node及npm版本,載入配置檔案,啟動服務。2.config vue專案配置 con...

vue cli 工程目錄結構介紹 詳細介紹

vue cli目錄結構 vue cli目錄解析 build 資料夾 用於存放 webpack 相關配置和指令碼。開發中僅 偶爾使用 到此資料夾下 webpack.base.conf.js 用於配置 less sass等css預編譯庫,或者配置一下 ui 庫。config 資料夾 主要存放配置檔案,用...

vue cli專案的目錄結構介紹

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