vue webpack搭建目錄詳情

2021-08-30 11:19:16 字數 2047 閱讀 4555

├── readme.md                       專案介紹

├── index.html 入口頁面

├── build 構建指令碼目錄

│ ├── build-server.js 執行本地構建伺服器,可以訪問構建後的頁面

│ ├── build.js 生產環境構建指令碼

│ ├── dev-client.js 開發伺服器熱過載指令碼,主要用來實現開發階段的頁面自動重新整理

│ ├── dev-server.js 執行本地開發伺服器

│ ├── utils.js 構建相關工具方法

│ ├── webpack.base.conf.js wabpack基礎配置

│ ├── webpack.dev.conf.js wabpack開發環境配置

│ └── webpack.prod.conf.js wabpack生產環境配置

├── config 專案配置

│ ├── dev.env.js 開發環境變數

│ ├── index.js 專案配置檔案

│ ├── prod.env.js 生產環境變數

│ └── test.env.js 測試環境變數

├── mock mock資料目錄

│ └── hello.js

├── package.json npm包配置檔案,裡面定義了專案的npm指令碼,依賴包等資訊

├── src 原始碼目錄

│ ├── main.js 入口js檔案

│ ├── components 公共元件目錄

│ │ └── title.vue

│ ├── assets 資源目錄,這裡的資源會被wabpack構建

│ │ └── images

│ │ └── logo.png

│ ├── routes 前端路由

│ │ └── index.js

│ ├── store 應用級資料(state)

│ │ └── index.js

│ └── views 頁面目錄

│ ├── hello.vue

│ └── notfound.vue

├── static 純靜態資源,不會被wabpack構建。

└── test 測試檔案目錄(unit&e2e)

└── unit 單元測試

├── index.js 入口指令碼

├── karma.conf.js karma配置檔案

└── specs 單測case目錄

└── hello.spec.js

---------------------

vue webpack環境搭建

vue專案搭建依賴node的npm包管理器,所以我們先得安裝node,此處就不詳細講解其安裝過程。npm install g vue cli安裝成功後可以輸入vue檢視相關命令的使用,輸入vue list可以檢視vue可以用的模板 我們這裡選擇webpack模板 vue init webpack p...

vue lic工具搭建vue webpack專案

1.安裝node環境 安裝node時候會自動安裝npm 參考官網 2.安裝vue的腳手架工具vue cli 全域性安裝 npm i vue cli g 3.使用vue cli初始化webpack專案 在這裡用的是cmd,可以選擇選項 vue init webpack test project tes...

vue cli工具搭建vue webpack專案

1.安裝node環境 node v安裝成功後在命令列檢視node版本 npm v安裝成功後在命令列檢視npm版本 2.用npm全域性安裝工具vue cli npm install vue cli g 3.使用vue cli初始化webpack專案 vue init webpack beizhidem...