一起學Vue：入門

阿新 • • 發佈：2020-10-28

Why-為什麼需要Vue？

前端開發存在的問題？

其一，需求變化頻率更高

產品功能迭代前端肯定需要跟著調整。
提意見的人多，前端嘛誰都能看得見，所以，誰都可以指手畫腳提一點意見。產品經理、專案經理、老闆...甚至連後端都可以來提一些意見。
前端像人的衣著，還是需要經常更換。

其二，平臺、瀏覽器生態複雜，要考慮的場景多！需要考慮瀏覽器Chrome、Edge、Firefox、Safari，需要考慮平臺Window，IOS，Android等，不同平臺上實現同一介面功能的重複勞動嚴重，這個難點在於如何消除前端開發的重複勞動。

其三，前端技術確實處於飛速發展之中，足夠經驗的人少，現有的解決方案還處於不穩定階段。

以上，是我總結的一些業務前端的難點，當然只要有困難的地方，總有相應的解決返崗，目前，最流行的前端框架主要有Vue、Angular、React。

Vue、Angular、React比較

工作機會

什麼都是假的，能找到工作才是真的！快來看看截至2020年10月中，三種主流框架在51Job的工作機會數量吧：

Vue： 23133(勝)
React： 13198
Angular： 5773

結果是後起新秀的Vue稱霸，React只有Vue的一半了！

Google趨勢

Google趨勢，看看下面的圖，Vue.js落後於angular和react。React在搜尋中最受歡迎。

npm趨勢

npm趨勢，看看下面的圖，它清楚地顯示了React在頂部，Vue和Angular不分上下。但是，當我們觀察stats時，最低的是Angular，最高的是vue，然後是React。

What-Vue是什麼？

2014年釋出的漸進式Javascript框架，沒有像React和Angular這樣的大牌開發。實際上，它是由Google的前工程師Evan You建立的。它越來越受歡迎。

它是Javascript框架家族中最年輕的成員。它實際上消除了其他框架的弊端，從而使軟體開發人員更容易上一層樓。GitLab和阿里巴巴等網站都在使用Vue。

How-如何使用Vue？

使用 vue-cli 搭建專案

首先，可以使用下列任一命令安裝這個新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安裝之後，你就可以在命令列中訪問 vue 命令。你可以通過簡單執行 vue，看看是否展示出了一份所有可用命令的幫助資訊，來驗證它是否安裝成功。

你還可以用這個命令來檢查其版本是否正確：

vue --version

接下來，執行以下命令來建立一個新專案：

vue create hello-world

注意我們這裡選擇Vue2，而不是Vue3，這是因為Vue3正式版剛釋出，很多UI支援還不是很好。

最後，你可以通過 npm 或 Yarn 呼叫這些 script：

npm run serve
# OR
yarn serve

到這一步，就算成功利用vue-cli搭建一個vue專案了，撒花 ~

目錄結構及其對應作用

通過vue-cli搭建一個vue專案，會自動生成一系列檔案，而這些檔案具體是怎樣的結構、檔案對應起什麼作用，可以看看下面的解釋：

├── build/                      # webpack 編譯任務配置檔案: 開發環境與生產環境
│   └── ...
├ ── node_module/               #專案中安裝的依賴模組
├ ── public/
│   ├── index.html              # index.html 入口模板檔案
├ ── src/
│   ├── main.js                 # 程式入口檔案
│   ├── App.vue                 # 程式入口vue元件
│   ├── components/             # 元件
│   │   └── ...
│   └── assets/                 # 資原始檔夾，一般放一些靜態資原始檔
│       └── ...
└── babel.config.js             # babel語法編譯
└── package.json                # 專案檔案，記載著一些命令和依賴還有簡要的專案描述資訊 
└── README.md                   #介紹自己這個專案的，可參照github上star多的專案。
build/