1、Vue 世界初探

前言

咱們後端用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/v...

gitBook: http://vue_book.siwei.me/pref...

本身感受官網上和菜鳥教程上，對本身的做用只是熟悉的了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 的能夠忽略。
一、咱們打開settings 下載vue.js 插件，而後重啓。打開咱們建立的項目zlflovemmVue

二、配置js 版本 ECMAScript6

三、HTML 增長 .vue 支持

四、啓動項目，在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/...

後續加油♡

歡迎你們關注我的公衆號 "程序員愛酸奶"

分享各類學習資料，包含java，linux，大數據等。資料包含視頻文檔以及源碼，同時分享本人及投遞的優質技術博文。

若是你們喜歡記得關注和分享喲❤