vue cli提供的幾種手架模板

2021-10-06 06:25:23 字數 2544 閱讀 3962

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...