什么是Vue CLI?
- 我們之前直接在HTML上面寫的Vue代碼都叫Demo小程序，它并不需要Vue CLI
- 但如果在開發(fā)大型項(xiàng)目的時(shí)候，就需要用到Vue CLI了
（1）因?yàn)槭褂肰ue.js開發(fā)大型應(yīng)用的時(shí)候猩谊，需要著手考慮代碼目錄結(jié)構(gòu)、項(xiàng)目結(jié)構(gòu)和部署宪彩、熱加載等等垂寥。
（2）但認(rèn)真想想，如果每一個(gè)項(xiàng)目都要手動(dòng)完成這些無味的配置工作脆霎，無疑效率非常低效总处，所以慢慢的，就有人開發(fā)出了絞手架的存在睛蛛，通常我們會(huì)直接使用現(xiàn)成的腳手架工具來幫助我們完成這些配置工作鹦马。
CLI又是什么意思?
- CLI是Command-Line Interface,中文是命令行界面的意思胧谈，俗稱腳手架，其實(shí)腳手架又是個(gè)建筑學(xué)的概念荸频，有點(diǎn)萬丈高樓平地起的意思菱肖，需要我們一步一步地從地基開始往上搭建支撐的架子。
- Vue.js的官方發(fā)布了一個(gè)項(xiàng)目腳手架,也就是Vue CLI
- 使用vue-cli可以幫助我們快速搭建Vue開發(fā)環(huán)境和對應(yīng)webpack的配置（繁瑣）旭从。
Vue CLI使用前提 - 需要安裝Node
- 官網(wǎng)直接下載nodejs
- node安裝完成后稳强，會(huì)自帶一個(gè)NPM包管理工具
什么是NPM呢？
- NPM的全稱是Node Package Manager
- NPM是一個(gè)NodeJS的包管理和分發(fā)工具和悦，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)退疫，有點(diǎn)類似我們手機(jī)上的應(yīng)用商店。
- 我們會(huì)經(jīng)常使用NPM來安裝一些開發(fā)過程中所依賴的包鸽素。
什么是CNPM?
- 由于國內(nèi)直接使用npm的官方鏡像去安裝依賴包褒繁，有時(shí)候不得不說是非常慢的，甚至還會(huì)出現(xiàn)卡殼崩掉的情況付鹿，于是乎澜汤，出現(xiàn)了淘寶鏡像,也就是所謂cnpm。
- cnpm是淘寶定制（gzip壓縮支持）的命令行工具舵匾，用于代替默認(rèn)的npm俊抵。
- cnpm它的指令和npm是一致的，用的時(shí)候?qū)pm改成cnpm即可坐梯。
- 可以說cnpm的出現(xiàn)就是為了彌補(bǔ)npm安裝的慢慢慢情況徽诲。
- 淘寶鏡像的安裝：
npm install -g cnpm --registry=https://registry.npm.taobao.org
Vue CLI使用前提 - 依賴Webpack
- 因?yàn)閂ue.js官方發(fā)布的腳手架工具就是使用了webpack模板構(gòu)架配置的，webpack會(huì)對所有的資源進(jìn)行壓縮優(yōu)化操作吵血，除此之外谎替，它在開發(fā)的過程中還提供了一套完整的功能，能夠讓我們高效開發(fā)項(xiàng)目蹋辅。
- Webpack的全局安裝
npm install webpack -g
Vue CLI的使用
安裝Vue腳手架
npm install -g @vue/cli
- 默認(rèn)安裝的是Vue CLI3的版本钱贯，第三代版本是向下兼容的，如果需要使用Vue CLI2的版本侦另，需要做拉取的操作秩命。
vue-cli官網(wǎng)有安裝教程：https://cli.vuejs.org/zh/
使用Vue CLI2版本創(chuàng)建注意事項(xiàng)及解釋
-
初始化操作等待（第一次初始化操作時(shí)間有點(diǎn)長，要耐心等待）
image.png
image.png
image.png
使用Vue CLI3版本創(chuàng)建注意事項(xiàng)及解釋
- 首先使用vue create projectName 創(chuàng)建項(xiàng)目(projectName褒傅，就是給你的項(xiàng)目去一個(gè)好聽的名字弃锐，命名只允許全英文小寫，大寫不支持)
image.png
