cli3（腳手架）的介紹與安裝

作用（- 快速構建vue專案，底層配置使用的就是webpack）

vue cli 是乙個基於 vue.js 進行快速開發的完整系統，提供：

vue cli 致力於將 vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基於智慧型的預設配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject

vue-cli3官網幫我們概述了vue-cli3的一些特點。個人在使用vue-cli3的感受中零配置、可公升級 2個特點確實很不錯。

如何安裝vue-cli3呢？

版本

cli2cli3

安裝

npm優先順序小於cnpm小於yarn

npm install @vue/cli -g (cli3的版本)

npm install vue-cli -g  （cli2的版本）

yarn add @vue/cli global

npm install @vue/cli-init -g

yarn add @vue/cli-init global

cli3安裝

$ vue

$ vue -v(查詢版本)

$ vue create (.目錄名) 建立乙個檔案

$ yarn serve

√ ( babel)優雅降級

√（css pre-processors）css預處理語言

目錄基本介紹

components 專案的元件

***.vue 乙個.vue的檔案，它就是乙個元件，也是乙個模組

main.js webpack中配置的主入口檔案

.browserslistrc 專案不支援 ie8及以下的

.gitignore git上傳時，不上傳的檔案

babel.config.js es6->es5 優雅降級

package.json 當前專案的依賴包配置檔案

postcss.config.js 給css新增引擎頭字首

readme.md 當前專案的說明檔案

yarn.lock 當前專案的依賴包的第三方庫的詳細資訊記錄

安裝cli2

2.進行問題的選擇

** 安裝 cli2簡易版本 **

vue init webpack-****** cli2_******

總結

市面上可以見到4個版本

介面化安裝cli3(不推薦)

命令列輸入

$ vue ui

介紹cli3具體內容

.vue的檔案 -----》單檔案元件

假設你已有了nodejs環境，你可以通過下面指令安裝vue-cli3的包

npm install -g @vue/cli oryarn global add @vue/cli

安裝之後，你就可以在命令列中訪問 vue 命令。你可以通過簡單執行 vue，看看是否展示出了乙份所有可用命令的幫助資訊，來驗證它是否安裝成功。（例如 vue --version）接下來就是建立乙個vue的專案了，使用下面命令：

vue create hello-world

你會被提示選取乙個 preset。你可以選預設的包含了基本的 babel + eslint 設定的 preset，也可以選「手動選擇特性」來選取需要的特性。

在多選時，空格代表選中，enter代表進入下乙個配置項且你手動選擇的配置項還會存入到你電腦的 ~/.vuerc 檔案中，這樣子你下次建立vue專案的時候，可以選擇你之前手動配置的配置

上面的配置選擇完之後，乙個簡單的vue專案就建立成功了。

這個時候你在命令列

cd 檔名

進入到hello-world專案根路徑下，命令列敲下

npm run serve

專案就開始跑起來啦。再講一下建立專案後的目錄層次吧，接圖：

乙個乙個來：

// vue.config.js
module.exports = 
}

cli3（腳手架）的介紹與安裝

vue cli4 0腳手架安裝

全域性安裝vue2 0腳手架與vue3 0腳手架

如何安裝VueCli 4 0腳手架

cli3（腳手架）的介紹與安裝

vue cli4 0腳手架安裝

全域性安裝vue2 0腳手架與vue3 0腳手架

如何安裝VueCli 4 0腳手架

相關推薦