Vue學習整理筆記

安裝Vue

前提是安裝了NodeJS

1、安裝指令行工具

        npm install --global vue-cli

2、安裝完成後檢查是否安裝成功

    vue -V （V要大寫）

3、建立一個基于webpack模闆的新項目my-project（項目名不能大寫）

       vue init webpack my-project 

      注意安裝過程 中有個選項（Use ESLint to line your code ?選擇 No ）意思是選擇檢測自己的代碼。vue-cli 的模闆包括 webpack 和 webpack-simple,前者是比較複雜專業的項目，他的配置并不全放在根目錄下的 webpack.config.js 中。----webpack-simple 相對簡單的，它根目錄下才有個 webpack.config.js

4、安裝依賴注入

      cd my-project

      npm install

5、運作

      npm run dev

如果安裝好了網頁不能自動打開，把config中的index.js中的 autoOpenBrowser: false改成true

目錄結構

Vue 項目如何運作

main.js 

main.js     頁面入口js

import App from './App'   引用App.vue

new Vue({})      執行個體化一個vue        

el：是一個挂載點

components：注冊一個插件        components:{App}注冊一個App.vue的插件

App.vue

每個vue元件分為：template、script、style

如何引用元件

1、在App.vue中的script

       import 元件名 from ‘元件URL’

       compontents:{元件名}

2、在App.vue中的template

      <元件名></元件名>

router下的index.js

路由子產品

router引用

1、在vue元件中的template中

      <router-view/>

2、在router中的index.js

1、import 元件名 from '@/components/元件名'

2、在export default new Router({})的routes中

      {

              path: '/',

              name: '元件名',

              component: 元件名             

      }

Vue基礎知識

常見指令

v-bind

v-if

v-on

v-for

v-model

路由的跳轉

1、<router-link to=""></router-link>

2、jump: function () { this.$router.push('/') }

資料MOCK

在開發過程中，前後端不論是否分離，接口多半是滞後于頁面開發的。是以建立一個REST風格的API接口，給前端頁面提供虛拟的資料，是非常有必要的。

對比過多種mock工具後，我最終選擇了使用 

json server

 作為工具，因為它足夠簡單，寫少量資料，即可使用。

也因為它足夠強大，支援CORS和JSONP跨域請求，支援GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查詢方法，如limit，order等

安裝json-server

npm install json-server -g

使用linux和macOS的電腦需要加上sudo

sudo npm install json-server -g

安裝完成後可以用 

json-server -h

 指令檢查是否安裝成功，成功後會出現

json-server [options] <source>

選項：
  --config, -c       Path to config file            [預設值: "json-server.json"]
  --port, -p         Set port                                     [預設值: 3000]
  --host, -H         Set host                                [預設值: "0.0.0.0"]
  --watch, -w        Watch file(s)                                        [布爾]
  --routes, -r       Path to routes file
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                              [布爾]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing                [布爾]
  --no-gzip, --ng    Disable GZIP Content-Encoding                        [布爾]
  --snapshots, -S    Set snapshots directory                       [預設值: "."]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)          [預設值: "id"]
  --quiet, -q        Suppress log messages from output                    [布爾]
  --help, -h         顯示幫助資訊                                         [布爾]
  --version, -v      顯示版本号                                           [布爾]

示例：
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

https://github.com/typicode/json-server
           

運作

安裝完成後，可以在任一目錄下建立一個 

xxx.json

 檔案,例如在 

mock/

 檔案夾下，建立一個 

db.json

 檔案，并寫入以下内容，并在 

mock/

 檔案夾下執行 

json-server db.json -p 3003

 。

{
  "news":[
    {
      "id": 1,
      "title": "曹縣宣布昨日晚間登日成功",
      "date": "2016-08-12",
      "likes": 55,
      "views": 100086
    },
    {
      "id": 2,
      "title": "長江流域首次發現海豚",
      "date": "2016-08-12",
      "likes": 505,
      "views": 9800
    }
  ],
  "comments":[
    {
      "id": 1,
      "news_id": 1,
      "data": [
        {
          "id": 1,
          "content": "支援黨中央決定"
        },
        {
          "id": 2,
          "content": "抄寫黨章勢在必行！"
        }
      ]
    }
  ]
}
           

為了友善，再建立一個 

package.json

 檔案，寫入

{
  "scripts": {
    "mock": "json-server db.json --port 3003"
  }
}
           

然後使用到 

/mock

 目錄下執行 

npm run mock

 指令，如果成功會出現

> @ mock /你的電腦中mock檔案夾所在目錄的路徑/mock
> json-server db.json -p 3003


  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3003/news
  http://localhost:3003/comments

  Home
  http://localhost:3003
           

如果不成功請檢查 

db.json

 檔案的格式是否正确。

操作資料

GET

這個時候通路 

http://localhost:3003/db

 可以檢視 

db.json

 檔案中所定義的全部資料。

使用浏覽器位址欄，

jQuery.get

 或 

fecth({method: "get"})

 通路 

http://localhost:3003/news

 ，則可以看到 

news

 對象下的資料,以Array格式傳回:

[
  {
    "id": 1,
    "title": "曹縣宣布昨日晚間登日成功",
    "date": "2016-08-12",
    "likes": 55,
    "views": 100086
  },
  {
    "id": 2,
    "title": "長江流域首次發現海豚",
    "date": "2016-08-12",
    "likes": 505,
    "views": 9800
  }
]
           

POST

以jquery的 

$.ajax

 方法舉例,以下代碼會實時的向 

db.json

 中的 

news

 對象push一條新的資料再次用 

get

 方式通路 

http://localhost:3003/news

 , 就可以看到它了

$.ajax({
    type: 'post',
    url: 'http://localhost:3003/news',
    data: {
      "id": 3,
      "title": "我是新加入的新聞",
      "date": "2016-08-12",
      "likes": 0,
      "views": 0
    }
  }
)
           

PUT

同樣以jquery的 

$.ajax

 方法舉例,以下代碼會實時的對 

db.json

 中的 

news

 對象中 

id=1

 資料進行修改

$.ajax({
    type: 'put',
    url: 'http://localhost:3003/news/1',
    data: {
      "title": "曹縣宣布昨日晚間登日失敗",
      "date": "2016-08-12",
      "likes": 55,
      "views": 100086
    }
  }
)

// 結果

[
  {
    "id": 1,
    "title": "曹縣宣布昨日晚間登日失敗",
    "date": "2016-08-12",
    "likes": 55,
    "views": 100086
  }
]
           

PATCH 和 DELETE 使用方式同上。

還有更多的資料操作可以參考：https://www.cnblogs.com/ys-wuhan/p/6387791.html

如果你是用vue寫移動端的話，我推薦使用better-scroll。

better-scroll的使用可以參考better-server文檔：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/