1.webpack-******模板
├── readme.md
├── index.html
├──
package
.json
├── src
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js
webpack-******只配置了babel和vue的編譯器,其他的一無所有。這個模板值得一提的就是src目錄,所有的vue**源程式都放置在這個目錄中,五個模板構建出來的這個src目錄都是一樣的,只是在webpack模板中多了components目錄用於存放公用元件。
2.webpack模板
readme.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ ├── prod.env.js
│ └── test.env.js
├── index.html
├──
package
.json
├── src
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── hello.vue
│ └── main.js
├──
static
└── test
├── e2e
│ ├── custom-assertions
│ │ └── elementcount.js
│ ├── nightwatch.conf.js
│ ├── runner.js
│ └── specs
│ └── test.js
└── unit
├── index.js
├── karma.conf.js
└── specs
└── hello.spec.js
這個webpack模板的結構是非常合理的,而且配置的工具也相當豐富,當投入真正的專案開發時會覺得模板的實用性很強。
在專案的根目錄下多了4個目錄,它們的作用分別如下:
● build——存放用於編譯用的webpack配置與相關的輔助工具**;
● config——存放三大環境配置檔案,用於設定環境變數和必要的路徑資訊;
● test——存放e2e測試與單元測試檔案以及相關的配置檔案;
● static——存放專案所需要的其他靜態資源檔案;
● dist——存放執行npm run build指令後的生產環境輸出檔案,可直接部署到伺服器對應的靜態資源資料夾內,該資料夾只有在執行build之後才會生成。
可見,這些目錄的存在是依賴於模板內配置的開發工具的
vue cli3 0腳手架的學習
安裝的注意點 通過鍵盤的上下按鍵可以選擇預設的配置還是手動配置,預設的包含了基本的 babel eslint 設定的 preset,也可以選 手動選擇特性 來選取需要的特性。而手動設定則提供了更多的選項,它們是面向生產的專案更加需要的。可以通過上下按鍵來選擇你需要的配置,然後在通過空格鍵確定你所選擇...
vue cli4 0腳手架安裝
10月16日,官方發布訊息稱vue cli 4.0正式版發布,並且強烈建議公升級 小編也是剛剛安裝了最新版本的腳手架看看更新了什麼 安裝和vue cli3.0的是一模一樣的,對比了一下3.0的腳手架,除了目錄發生變化一些,其他的都一樣 安裝步驟和vue cli3.0的一模一樣 1.建立專案 vue ...
vue cli3 0 腳手架搭建專案
1.安裝vue cli 3.0 npm install g vue cli安裝成功後檢視版本 vue v 切記一定要大寫 如果遇到 vue 不是內部或外部命令,也不是可執行的程式 或批處理檔案。檢視是否配置環境變數。2.建立專案 在你新建的資料夾建立專案 vue create 你的專案名稱 defa...