vue現(xiàn)在已經(jīng)出到3.x了，但是2.x還是使用的更多，就像我現(xiàn)在工作中在做的項(xiàng)目。身為后端，有時(shí)候不得不也要會前端的知識，本篇就按順序先從2.x開始入門吧。
?
一、vue.js背景
先聲明一下，vue.js和vue是指一個(gè)東西，vue只是vue.js的簡稱罷了。
1.什么是vue
官方的說法是：vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。
從這里我們就可以看出vue首先不是某個(gè)類庫，而是一個(gè)框架，這說明它不是召之即來揮之即去的。類庫我們可以隨意更換，但是框架一旦更換，那就是相當(dāng)于重構(gòu)。
不過vue是漸進(jìn)式的，這說明我們依然可以把它當(dāng)類庫一樣，簡單的使用在一兩個(gè)組件上。同時(shí)也可以像框架一樣，讓它全局接管整個(gè)項(xiàng)目，漸進(jìn)式的想用多少就用多少，根據(jù)自己的需求選用不同的層級。
2.vue的優(yōu)勢
①雙向數(shù)據(jù)綁定
vue會根據(jù)對應(yīng)的元素，進(jìn)行設(shè)置元素?cái)?shù)據(jù)，通過輸入框，以及get獲取數(shù)據(jù)等多種方式進(jìn)行數(shù)據(jù)的實(shí)時(shí)綁定，進(jìn)行網(wǎng)頁及應(yīng)用的數(shù)據(jù)渲染。
②組件式開發(fā)
通過vue的模塊封裝，它可以將一個(gè)web開發(fā)中設(shè)計(jì)的各種模塊進(jìn)行拆分，變成單獨(dú)的組件，然后通過數(shù)據(jù)綁定，調(diào)用對應(yīng)模版組件，同時(shí)傳入?yún)?shù)，即可完成對整個(gè)項(xiàng)目的開發(fā)。
二、vue的安裝
雖然vue有多種方式安裝，但是基本上大家都是用npm方式，穩(wěn)定可靠。
npm install vue
也可以加個(gè)-g參數(shù)將其安裝到全局目錄下
?
三、vue-cli的使用
vue官方為我們提供了一個(gè)腳手架，讓我們可以快速的搭建一個(gè)vue項(xiàng)目，剛好可以讓我們簡單的體驗(yàn)一下vue項(xiàng)目。
1.安裝vue-cli
打開cmd，直接將vue-cli安裝到全局
npm install vue-cli -g
2.初始化一個(gè)項(xiàng)目
初始化webpack模板的項(xiàng)目
安裝好后，到指定的位置下用命令行初始化項(xiàng)目，輸入
vue init webpack my-project
代表以webpack為基礎(chǔ)創(chuàng)建模版，它會自動(dòng)下載 vuejs-templates上的webpack模板。
如果初始化成功，進(jìn)入到配置vue-cli項(xiàng)的時(shí)候，我們一路點(diǎn)回車就行了，讓它默認(rèn)給過，因?yàn)楝F(xiàn)在我們還不了解他，只是為了啟動(dòng)一下玩玩。
沒有外網(wǎng)導(dǎo)致下載失敗的解決辦法：
但是如果你無法訪問外網(wǎng)或網(wǎng)絡(luò)環(huán)境很差，可能會下載失敗，連不上github，就會報(bào)錯(cuò)
解決方法①：
如果你有代理服務(wù)器，可以給npm設(shè)置好代理，依次輸入如下兩句
npm config set proxy http://代理IP:代理端口
npm config set https-proxy http://代理IP:代理端口
解決方法②：
如果實(shí)在沒法，那也沒關(guān)系，我們可以選擇手動(dòng)下載好了放進(jìn)去
到官網(wǎng)用git下載：https://github.com/vuejs-templates/webpack
下載好后，需要放到指定的目錄下，可以先用離線初始化的語句查詢一下需要放在哪里：
vue init webpack projectName --offline
它會提示no found，位置在C:\Users\用戶名\.vue-templates\下
但是通常這個(gè).vue-templates目錄還沒有創(chuàng)建，我們在cmd中將其創(chuàng)建出來
mkdir .vue-templates
然后將下載好的包放進(jìn)去即可，注意名稱要對的上
重新跑一遍初始化指令，加上--offline代表離線情況下的初始化：
vue init webpack projectName --offline
由于我們現(xiàn)在還不了解怎么配置，所以配置vue-cli項(xiàng)的時(shí)候一路點(diǎn)回車就行了，讓它默認(rèn)給過。
初始化完畢后，在項(xiàng)目工程位置安裝依賴包
npm install
Failed at the chromedriver@2.46.0 install script報(bào)錯(cuò)的解決辦法
這時(shí)候就又可能出現(xiàn)一個(gè)問題，如圖
如果你的也是Failed at the chromedriver@2.46.0 install script.報(bào)錯(cuò)，說明我們的問題是一樣的。
報(bào)錯(cuò)原因：
原因是chromedriver這個(gè)依賴包的package.json中用scripts指定了一個(gè)腳本，當(dāng)install到它時(shí)，它會執(zhí)行它目錄下的install.js文件，偏偏這個(gè)文件貌似訪問了一個(gè)國外的網(wǎng)站導(dǎo)致被墻報(bào)錯(cuò)了。
image-20210429150216421
解決方法①：
解決方式有多種，首先我們可以將其里面的網(wǎng)站替換成淘寶的，方法是執(zhí)行語句：
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
解決方法②：
如果還是失敗，就只能忽略執(zhí)行這個(gè)腳本了。執(zhí)行時(shí)同時(shí)增加一句參數(shù)--ignore-scripts，作用是讓npm不會執(zhí)行script下的腳本。個(gè)人感覺肯定是有風(fēng)險(xiǎn)的，畢竟少了點(diǎn)東西，但是網(wǎng)上大多人都是這樣處理的，也沒見到有什么后果，所以我們也按照這樣的方式解決就好了。執(zhí)行語句：
npm install chromedriver --ignore-scripts
解決方法③：
這個(gè)是終極方案，如果前面的都解決不了，就可以參考這個(gè)，我就是這樣解決的。因?yàn)槲业墓臼莾?nèi)網(wǎng)的，平時(shí)是用代理訪問的外網(wǎng)，所以找了一遍后，發(fā)現(xiàn)要個(gè)npm配置代理才可以，代理的地址和端口自己應(yīng)該都清楚。
任意位置cmd，輸入指令：
npm config set proxy http://代理IP:代理端口
npm config set https-proxy http://代理IP:代理端口
然后刪掉下載的依賴目錄node_modules，重新直接執(zhí)行
npm install
會發(fā)現(xiàn)，一次性可能就過了，如果不行那就再按方法①和②的試一下。
解決方法④：
前面我們都是盡量小影響的，但是如果你真的沒外網(wǎng)，又實(shí)在想搞，那么唯一的方式就是刪除下載的node_modules目錄，然后重新輸入
npm install --ignore-scripts
當(dāng)然，它不止是針對chromedriver忽略scripts了，它顯然對所有的依賴都這樣做了，但是貌似網(wǎng)上也是有人這樣做的，可能問題不會很大，算是沒辦法的辦法了。
安裝完畢
我配置了代理后，一次安裝成功了：
測試啟動(dòng)
輸入指令啟動(dòng)一下這個(gè)模板：
npm run dev
啟動(dòng)成功，瀏覽器訪問一下
成了，兄dei
?
最近沒時(shí)間細(xì)看這個(gè)了，決定先發(fā)布出來，如果以后有更新的打算，也會直接更新到這里
?
?
?
參考：
使用vue-cli創(chuàng)建工程的時(shí)候提示報(bào)錯(cuò)的解決方法
https://www.cnblogs.com/gaozhiqiang/p/11528554.html
npm安裝的坑瀏覽器代理
