前言:關(guān)于Vue CLI版本介紹
關(guān)于舊版本
Vue CLI 的包名稱由
vue-cli改成了@vue/cli。 如果你已經(jīng)全局安裝了舊版本的vue-cli(1.x 或 2.x)桑阶，你需要先通過npm uninstall vue-cli -g或yarn global remove vue-cli卸載它畅涂。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)港华。你可以使用 nvm 或 nvm-windows 在同一臺(tái)電腦中管理多個(gè) Node 版本。
1. Vue CLI的了解
Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng).
1.1 Vue CLI 說明
CLI 全稱就是 Command-Line Interface, 翻譯為命令行界面,俗稱腳手架
Vue CLI就是一個(gè)官網(wǎng)發(fā)布的vue.js項(xiàng)目的腳手
使用vue-cli可以幫我們快速的搭建Vue開發(fā)環(huán)境以及對(duì)應(yīng)的webpack配置
用現(xiàn)實(shí)生活中的例子:
比如你要蓋一棟大樓,大樓外側(cè)的腳手架是必須要搭建的, 每一棟大樓都需要這些腳手架,這些腳手架如果每一次都需要一點(diǎn)一點(diǎn)搭建的話就會(huì)非常繁瑣和耗時(shí),如果,有人提前幫你把這些必要的腳手架搭建好了,你只需要注重點(diǎn)關(guān)注在大樓建設(shè)上就可以了
同樣的,我們開發(fā)vue項(xiàng)目,需要一些諸如webpack這樣的配置,如果每次都要自己從頭處理就很繁瑣,那么官方就幫我們把這些必要的配置好,生成了腳手架模板, 我們直接拿過來使用,這就是腳手架,在腳手架上直接搭建自己的項(xiàng)目,如果發(fā)現(xiàn)腳手架有些不能滿足我們的需要,也可以自己手動(dòng)修改腳手架配置
一言以蔽之: 腳手架就是搭建項(xiàng)目的基礎(chǔ)模板
1.2 什么時(shí)候需要用到腳手架
如果你的項(xiàng)目比較簡單,就是一些基本的將數(shù)據(jù)渲染到頁面上,那么你不要Vue CLI腳手架
只有當(dāng)你開發(fā)大型項(xiàng)目時(shí),就必須要用到Vue CLI腳手架了
因?yàn)榇笮晚?xiàng)目需要考慮代碼目錄結(jié)構(gòu),項(xiàng)目結(jié)構(gòu),部署以及熱更新等很多瑣碎的事情,那么這些事情都交給腳手架來配置好, 我們直接使用腳手架就可以了
2. 安裝vue CLI
注意在安裝Vue CLI是一定要提前安裝node.
2.1 安裝 Vue CLi
可以使用下列任一命令全局安裝最新的CLI：
npm install -g @vue/cli
# or
yarn global add @vue/cli
安裝之后午衰，你就可以在命令行中訪問 vue 命令立宜。你可以通過簡單運(yùn)行 vue，看看是否展示出了一份所有可用命令的幫助信息臊岸，來驗(yàn)證它是否安裝成功橙数。
當(dāng)然也可以通過版本好來驗(yàn)證是否安裝成功
2.2 查看版本號(hào)命令
使用下面命令打印版本號(hào).
> vue --version
> # or 簡寫
> vue -V
如果可以正常打印版本號(hào)說明vue CLI 腳手架安裝成功,
同時(shí)我們也可以通過版本號(hào)來確定是不是你需要安裝的版本
最新的vue CLI版本已經(jīng)是4.3.1了
2.3 使用CLI項(xiàng)目模板
注意Vue CLI 3.X 和4.X的腳手架的模板和Vue CLI2.X 完全不同,
如果你還想使用Vue CLI2.X的腳手架模板,就需要參考官網(wǎng)給出的處理方案
官網(wǎng)關(guān)于使用 2.X 模板的方法
至此Vue CLI的安裝就已經(jīng)完成了, 那么接下來就讓我們好好看看CLI2.X的項(xiàng)目模板和CLI3.X項(xiàng)目模板
3. 創(chuàng)建Vue CLI 2的項(xiàng)目
3.1 初始化化Vue CLI2項(xiàng)目
使用下面的命令初始化vue CLI2的項(xiàng)目
$ vue init webpack myvue
初始化項(xiàng)目cli2項(xiàng)目圖
3.2 運(yùn)行項(xiàng)目
通過上面命令創(chuàng)建項(xiàng)目成功以后,
進(jìn)入到項(xiàng)目里,然后通過npm run dev運(yùn)行項(xiàng)目
其實(shí)在初始化Vue CLI2項(xiàng)目成功以后也會(huì)給我們對(duì)應(yīng)的提示
安裝成功后提示:
因此我們可以通過命令運(yùn)行我們項(xiàng)目
編譯成功以后,會(huì)提示:你的項(xiàng)目運(yùn)行在http://localhost:8080地址
這樣我們就可以在瀏覽器地址欄輸入地址運(yùn)行項(xiàng)目
3.3 項(xiàng)目目錄
項(xiàng)目已經(jīng)成功啟動(dòng),那么接下來我們就來好好看看項(xiàng)目模板的目錄結(jié)構(gòu)
4. Vue CLI3
4.1 CLI3 和 CLI2 版本的區(qū)別
- cli3 是基于webpack4開發(fā)的,cli2是還是基于webpack3開發(fā)的
- cli3 的設(shè)計(jì)原則是'0配置',移除了根目錄下build和config的webpack 配置文件目錄
- cli3 提供了
vue ui命令,提供可視化配置,更加人性化 - 移出了static 文件夾,增加了 public文件夾,并且將index.html移動(dòng)到public目錄中
4.2 CLI3的安裝命令
通過下面的命令初始化Vue CLI3的工程項(xiàng)目
$ vue create myproject
4.3 CLI3初始化項(xiàng)目中的配置介紹
4.3.1 選擇配置方式
可以使用默認(rèn)的配置,也可以自己配置需要安裝的內(nèi)容
自己配置后還可以保存,下次在初始化項(xiàng)目時(shí)就可以使用上一次配置
4.3.2 自定義配置
自定義配置項(xiàng)目,選擇自己要安裝的配置來初始化項(xiàng)目
4.3.3 配置保存選擇
配置選擇完畢后,會(huì)詢問你是將配置單獨(dú)生成文件,還是追加到package.json 文件中
建議使用單獨(dú)配置文件,這樣會(huì)比較方便修改配置
4.3.4 是否保存配置
是否將本次初始化項(xiàng)目的配置保存起來,以便下次初始化項(xiàng)目時(shí)直接使用
4.3.5 給保存的配置命名
如果選擇保存本次配置,就給配置命名
4.3.6 初始化完成
當(dāng)項(xiàng)目配置初始化完畢后,提示你進(jìn)入項(xiàng)目,并且告知啟動(dòng)項(xiàng)目的終端命令
4.3.7 有保存配置的初始化項(xiàng)目
如果之前有保存過配置,那么在你初始化項(xiàng)目的時(shí)候,就會(huì)讓你自己選擇,
可以使用默認(rèn)配置,或者自定義配置,也可以使用上一次保存的自定義配置
4.3.8 項(xiàng)目重名
項(xiàng)目重名就會(huì)提示,
有三種選擇: 覆蓋原來的項(xiàng)目, 與原理的項(xiàng)目合并,或者取消本次初始化項(xiàng)目
4.3.9 啟動(dòng)項(xiàng)目
通過yarn serve命令啟動(dòng)項(xiàng)目
4.4 CLI3工程項(xiàng)目目錄
我們會(huì)發(fā)現(xiàn)CLI3的項(xiàng)目目錄中看不到webpack的配置
5. CLI3 的配置
默認(rèn)在CLI3的項(xiàng)目目錄中是看不到配置文件的,那么有的時(shí)候我們需要修改配置文件怎么辦呢,
接下來就看看如何修改配置
5.1 通過可視化界面修改配置
CLI3中提供了一個(gè)可視化操作,終端命令為vue ui
啟動(dòng)可視化操作界面
$ vue ui
在可視化界面中找到配置,
然后就可以在這里就改項(xiàng)目配置為了
5.2 在項(xiàng)目中修改配置
在根文件下創(chuàng)建vue.config.js文件, 就可以在這個(gè)文件中定義需要修改的配置
cli3會(huì)自動(dòng)將vue.config.js文件中的配置和默認(rèn)的配置進(jìn)行合并
例如:配置示例:
module.exports = {
baseUrl: "/" , //根路徑
outputDir : "dist"， //構(gòu)建輸出目錄 帅戒，在npm run build 打包生成的文件夾的名字
assetsDir: "assets", //靜態(tài)資源目錄（js,css,img）
lintOnSave ： false, // 是否開啟eslint保存檢測(cè)灯帮，true | false | error 默認(rèn)使用false 不打開
devServer: {
open: false, // npm run server 運(yùn)行時(shí)是否自動(dòng)在瀏覽器中打開
host: "localehost"， //主機(jī)名字
prot: 8080, //端口號(hào) 默認(rèn)時(shí)8080
https: false逻住， //是否啟用https協(xié)議钟哥，最好不使用 默認(rèn)使用http協(xié)議
hotOnly: false, //熱更新，就用false
//重點(diǎn)時(shí)這里跨域
proxy: {
'/api': {
target: "http://localhost:5000/api/",
ws: true,
changOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}瞎访，
//before 在所有的其他中間件之前腻贰，提供自定義中間件功能，這可以用來配置自定義處理程序
before(app) {
app.get("/api/goods",(req,res) => {
res.json(goods);
})
}
}
}
6. 單文件組件測(cè)試
我們可以通過一個(gè)全局的包對(duì)于一些特定的.vue文件(也就是單文件組件)進(jìn)行單獨(dú)的測(cè)試
6.1 安裝全局的cli-service
$ npm install -g @vue/cli-service-global
6.2.獨(dú)立運(yùn)行vue文件
//vue serve vue文件
vue serve hello.vue
這樣就可以單獨(dú)測(cè)試某些組件了
