一、Vue 世界初探
- 2020 年 3 月 4 日
- 筆記
前言
我們後端用SpringBoot 框架已經搭建的差不多了之前，既然我們最初的夢想是做先後端分離的架手架，終於也開始學習一下前端的框架了。自己也算是前端小白，所以將自己學習vue 的過程記錄系列部落格。希望對學習vue 的小夥伴有幫助，如果文章中有不對的，希望大家及時提出一起探討。
至於為什麼要使用vue ,雖然是一個前端小白，但是還是知道當前主流的三大框架，Angular、React以及Vue .優劣我就不說了，我就說說我為什麼選擇vue 吧。其實還是因為畢竟是後端開發，對前端的東西不要求深入理解，做到能用能複製就好了。所以基本上是本著最小學習成本來的。所以相對Angular 和React來說，vue 算是上手最快的，所以也就入坑了。自己花了一周的時間預研，勉強算自己入門了吧，所以才開始寫部落格記錄下來，這樣也算是對自己學習的內容的整理，也可以記錄下來方便大家。
學習地址
想要了解vue 是什麼， 怎麼學習？我也是參考網上的資料學習的。
vue.js 的官網：https://cn.vuejs.org/v2/guide/
菜鳥教程：https://www.runoob.com/vue2/vue-tutorial.html
gitBook: http://vue_book.siwei.me/preface.html
自己感覺官網上和菜鳥教程上，對自己的作用只是熟悉的了vue的語法，不足以我來搭建在項目中使用，但是又不能不看，不然基本的語法都不知道，怎麼開展下一步。上面的gitBook 算是帶我入門的，我也在網上找了很多資料，但是跟著gitBook一步步實現起來，整體流程算是清楚了，所以也推薦大家。自己記錄這系列部落格，也算自己vue入門吧，有不對的地方大家多多指教。
安裝
好啦，說了這麼多，我們正式開始吧。我們直接使用vue-cli .當然大家亦可以使用其他的。我們首先電腦上 npm和git 並配置郵箱 ,至於怎麼安裝，網上有很多教程，這裡就不說了，安裝好之後，我們需要安裝vue-cli 。
npm install vue vue-cli -g
安裝好之後，我們控制台我們想要創建項目的目錄執行：
vue init webpack zlflovemmVue
這樣就可以看到項目已經初始化成功了。我們現在用IDEA 打開這個項目，當然大家也可以用其他的，後端的用慣了idea ,所以也就用idea 來開發vue 啦。
IDEA 配置vue
我們既然使用idea,當然需要一些配置，不使用idea 的可以忽略。1、我們打開settings 下載vue.js 插件，然後重啟。打開我們創建的項目zlflovemmVue
2、配置js 版本 ECMAScript6
3、HTML 增加 .vue 支援
4、啟動項目，在edit Configurations 中增加npm 啟動，配置如下圖：
配置好後，我們來啟動就好啦，如下圖就表示啟動成功啦。
我們啟動成後，在瀏覽器上輸入：
http://localhost:8081
證明我們項目已經初始化搭建完成啦。到這裡我們已經完成了第一步。但是可以看到我們到現在為止還沒有開始寫程式碼，也不知道如何下手寫。
不要急，我們前面這些工作做好後，我們接下來就開始啦。
項目結構
雖然我們項目稀里糊塗的啟動起來了，但是相比到此的小夥伴還是一頭霧水，在那寫我們的程式碼呢？整個流程是怎麼樣的呢？在寫程式碼之前，我們還是先來看看，vue-cli 初始化為我們創建的項目有哪些東西。
▸ build/ // 編譯用到的腳本 ▸ config/ // 各種配置 ▸ dist/ // 打包後的文件夾 ▸ node_modules/ // node第三方包 ▸ src/ // 源程式碼 ▸ static/ // 靜態文件, 暫時無用 index.html // 最外層文件 package.json // node項目配置文件
build
保留各種打包腳本。不可或缺，不要隨意修改。
展開後如下：
▾ build/ build.js //打包使用， 不要修改。 check-versions.js //檢查npm的版本， 不要修改。 dev-client.js //是在開發時使用的伺服器腳本。不要修改。 dev-server.js //同上 utils.js // 不要修改。做一些css/sass 等文件的生成。 vue-loader.conf.js //非常重要的配置文件，不要修改。內容是用來輔助載入vuejs用到的css source map等內容。 webpack.base.conf.js //下面這三個都是基本的配置文件。不要修改 webpack.dev.conf.js webpack.prod.conf.js
我們初學者階段，暫時不用管這些，也不改這些東西。
config
上圖我們可以看到config 目錄中就有
▾ config/ dev.env.js index.js prod.env.js test.env.js
dev.env.js 開發模式下的配置文件，一般不用修改。prod.env.js 生產模式下的配置文件，一般不用修改。test.env.js 測試模式下的配置文件，一般不用修改。index.js 很重要的文件， 定義了 開發時的埠（默認是8080），定義了圖片文件夾（默認static)， 定義了開發模式下的 代理伺服器. 我們修改的還是比較多的。
node_modules
node項目所用到的第三方包，特別多，特別大。$ npm install 所產生。這個文件夾不要放到git中
src
最最核心的源程式碼所在的目錄。我們要寫的程式碼就是寫在這個裡面啦。
▾ src/ ▾ assets/ logo.png ▾ components/ Hello.vue ▾ router/ index.js App.vue main.js
assets: 用到的圖片
components: 用到的"視圖"和"組件"所在的文件夾。（最最核心）
router/index.js 路由文件。定義了各個頁面對應的url.
App.vue 如果index.html 是一級頁面模板的話，這個App.vue就是二級頁面模板。所有的其他vuejs頁面，都作為該模板的 一部分被渲染出來。
main.js 廢程式碼。沒有實際意義，但是為了支撐整個vuejs框架，存在很必要。
Hello World
好啦，我們已經知道了項目的結構了，現在就要開始實現我們自己的hello world 啦。不然我們當程式設計師還有什麼意義。其實我們程式已經幫我們寫了一個helloworld 。但是我們還是自己來創建一個，這樣自己才能熟悉點。最終添加的內容圖如下：
Hello.vue
我們在src–components 新建Hello.vue 。內容如下:
<template> <div> {{message}} </div> </template> <script> export default { data(){ return { message: "hello world" } } } </style>
可以看到內容很簡單，就是返回一個hello world 。
修改index.js
接下來我們在src–router–index.js 中增加一個路由。
啟動
這樣的話我們就可以來啟動項目啦。啟動的時候報這種錯誤：
✘ http://eslint.org/docs/rules/indent
啟用eslint檢測不通過導致的，我們這裡的解決辦法：
在build/webpack.base.conf.js文件中，注釋config.dev.useEslint?這行配置，然後重啟項目就好了。
啟動之後，我們在介面上輸入：
http://localhost:8081/#/hello
這裡我們的hello world 出來了，但是我們可能會感覺到奇怪，我們只是僅僅寫了helloworld 為什麼還有logo ,並且還有居中的樣式。我們這個問題留在下篇文章接著講。這裡我們先記著。
番外
到此為止，我們也算是將vue安裝成功了，並運行一個非常簡單的例子。
程式碼上傳到github：https://github.com/QuellanAn/zlflovemmVue
後續加油♡
