Vue全家桶快速開發指南

Vue全家桶快速開發指南着手與項目

• 環境配置
• • 安裝npm
  • 安裝vuecli4.x
• 建構項目
• • 圖形化建構
  • 指令行配置
• 代碼目錄
• vue-router
• • 定義元件
  • • 元件的作用
    • 如何定義元件
  • 在需要他顯示的html代碼下面聲明元件
  • 定義路由跳轉
  • • 聲明一個路由
    • 定義路由互動元件
    • 定義路由元件顯示位置
    • 通過程式跳轉
• vue 文法
• • v-text和插值表達式
  • v-html
  • v-on 或者 @
  • v-show 和 v-if
  • v-bind 或者 ：
  • v-for
  • v-model
  • 在頁面被渲染前調用自定義函數
  • 在頁面被渲染後調用自定義函數
  • .vue檔案下引入js代碼
  • 全局引入jq
• axios
• • 安裝axios和vue_axios
  • 引入檔案
  • 使用
• vuex
• 取消vuecli4.x 嚴格模式
• 總結

原先一直都在搞人工智能，突然間稀裡糊塗的開始做前端vue了，從着手學習到開始寫項目時間隻有短短的一天，現在把項目遇到的大部分知識點和開發流程做個小的總結。基本上按照這個套路就可以開發一個中等的項目，希望能幫助到其他的人。

環境配置

安裝npm

npm是nodejs的包管理工具，本人使用的是arch系統是以隻需要以下指令就可以安裝

yaourt -S npm
           

當然ubuntu安裝的指令是

sudo apt-get install npm
           

安裝vuecli4.x

有了npm之後

在終端輸入以下指令就可以安裝vue腳手架

npm install -g @vue/cli
           

建構項目

圖形化建構

直接在終端輸入以下指令就可以打開圖形化配置的視窗

vue ui
           

打開完成後會在終端裡顯示一個本地服務，用浏覽器打開他就可以進行圖形化配置了

指令行配置

因為我在本地ui配置的時候圖形界面打不開是以我選擇的指令行配置

在終端輸入以下指令

随便進入一個檔案夾輸入以下指令便可以進入到vue的建構項目的選項裡

vue create 你的項目名
           

在這裡我們選擇第二個手動選擇元件（按上下方向鍵切換選項，回車按鍵選中）選中後我們會進入這樣的位置

同樣選擇上下方向鍵切換選項，空格鍵選中

在這裡我們選中router和vuex

回車确定

這裡問我們是否要安裝舊版本的router 我們選擇n

在這裡推薦選擇第三項ESLint+Standard config

第一項

這裡問我們設定是要有單獨的檔案夾還是全寫在package.json裡

我們選擇第一項

這裡問我們是否儲存預設的元件，我們選擇是，這會在之後的項目中加入模闆為你提供參考

建立完成項目後我們輸入

cd 你剛才的項目名
           

這樣會進入你的項目目錄

在這個目錄下我們輸入

npm run serve
           

這樣會編譯并運作項目，之後會在指令行提示兩個位址

第一個是你本地的位址

第二個就是你外網位址

随便打開一個網址就可以看到這樣的畫面

在這裡點選about又會變一種樣式

這就是我們所謂的前端路由

代碼目錄

近來之後用vs code打開項目所在檔案夾

可以看到以下目錄

其中這裡主要在意src目錄

components是你元件的目錄

ruter是前端路由的配置目錄

store是狀态管理vuex的目錄

views是視圖目錄

main.js是配置檔案

vue-router

vue-router是一個vue生态裡管理前端路由的一個元件

因為他預設就已經寫好了一個前端路由是以我們先來看一下這個

定義元件

元件的作用

元件是幹嘛的呢？

元件就是為了友善的進行代碼重用而定義的

可以想象是把元件裡的html代碼插入到需要他的地方

如何定義元件

一個元件呢就是把html代碼寫在标簽裡頭

如

<!-- 格外注意 這裡不支援text标簽 text标簽全部換成span -->
<template>
  <div class="about">
    <h1>123</h1>
    <p>abc</p>
  </div>
</template>
  <!-- 注意這裡必須有一個回車，而且每一段代碼後面都不能有空格出現 -->
           

把html需要的css檔案在main.js裡引入就像下面這個樣子

import '../static/css/about.css'
import '../static/css/mainstyle.css'
           

這樣我們一個元件就定義好了，那怎麼用呢

在需要他顯示的html代碼下面聲明元件

因為vuecli規定的所有頁面都是元件，隻不過有父與子的差別

是以下面這段代碼以父元件為例

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld/><!-- 1 -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'//2

export default {
  name: 'Home1S',//3
  components: {
    HelloWorld //4
  }
}
</script>
           

通常用不同的元件需要改四個地方

位置1:元件插入的位置，标簽裡的名稱必須和2,4相同

位置2:引入元件，注意名稱和路徑就可以了，名稱必須和1,4相同

位置3:名字随便起

位置4:聲明元件，多個元件聲明用逗号隔開，名稱必須和1，2相同

注意事項

這裡的script代碼必須嚴格按照

兩個空格縮進，

字元串用單引号，

括号附近有空格‘ () ’

運算符附近必須有空格’ + ’

冒号後面要有空格‘: ’

等嚴格的格式控制

定義路由跳轉

聲明一個路由

在src/router/目錄下 有一個index.js檔案

打開他

在routes數組後添加一個對象如下

{
    path: '/about',//将來這個名稱會在導航欄顯示，被稱之為哈希
    name: 'About',//随便起但後面會用到
    component: () => import('../views/About.vue')//跳轉元件位址 和前面元件跳轉一個樣子
  }
           

定義路由互動元件

我們這裡用

包裹住的所有标簽最後都會成為跳轉的可互動标簽，同時這個标簽可以定義樣式，（事實上它本身會預設渲染成a标簽）如

<router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link>
           

定義路由元件顯示位置

我們在需要路由轉換的位置加上标簽即可

如

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
           

通過程式跳轉

這條指令可以直接跳轉到對應的位置

vue 文法

這裡的文法和其他開發的形式不太相同但可以看出來大體是相同的

v-text和插值表達式

我們在about.vue檔案裡實驗一下以下代碼

注意一定是about.vue别自己建一個就來，這裡涉及到元件引用我們之後在說

<template>
  <div class="about">
    <h1 v-text="a">安琪拉</h1>
    <h1>{{a}}安琪拉</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: 'hello'
    }
  }
}
</script>

           

說白了就是将v-text屬性的标簽或者{{}}雙括号裡引入的變量與資料綁定資料會被實時渲染上去

a可以是清單 、對象等等等等、文法按照js文法就可以

v-html

這個元件會把變量當作html代碼解析

<template>
  <div class="about">
    <h1 v-text="a">安琪拉</h1>
    <h1 v-html="a"></h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: '<h1>asd</h1>'
    }
  }
}
</script>
           

v-on 或者 @

綁定事件的元件事件有什麼滑鼠點選，輕按兩下等等等等

<!-- v-on:keyup.enter -->
<template>
    <h1 @click="click">{{a}}</h1>
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      this.a = this.a + 1
    }
  }
}
</script>
           

<!-- 回車事件 -->
<template>
  <input type = "text" @keyup.enter="click">
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      this.a = this.a + 1
      console.log(this.a)
    }
  }
}
</script>
           

v-show 和 v-if

這兩個标簽唯一的不同就是v-if會讓代碼樹消失，v-shou隻是不顯示

<template>
  <div>`
    <h1 @click="click1" v-show = a>{{a}}</h1>
    <h1 @click="click2" v-if = b||a>{{b}}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: 2,
      b: 2
    }
  },
  methods: {
    click1: function () {
      this.a = this.a - 1
    },
    click2: function () {
      this.b = this.b - 1
    }
  }
}
</script>
           

v-bind 或者 ：

這個指令可以改變标簽的屬性

<template>
  <div>`
    <p @click="click" :id = a >asdf</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: '#naa'
    }
  },
  methods: {
    click: function () {
      this.a = 'nav'
    }
  }
}
</script>
<style scoped>
#nav {
  padding: 30px;
}
#naa {
  font-weight: bold;
  color: #2c3e50;
}
</style>
           

v-for

根據數組或者對象個數重複某個标簽，同時可以将資料周遊出來

<template>
  <div>
    <h1 @click="click">{{a}}</h1>
    <h1 v-for="(item, name, index) in a" :key = "item">{{item}}{{name}}{{index}}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}
</script>
           

v-model

雙向資料綁定

<template>
  <input type = "text" @keyup.enter="click" v-model="a">
</template>
<script>
export default {
  data () {
    return {
      a: 1
    }
  },
  methods: {
    click: function () {
      console.log(this.a)
    }
  }
}
</script>
           

在頁面被渲染前調用自定義函數

methods: {
            indexs:function(){
                this.$http.post('{:url("Index/fun")}')
                    .then(function(res){
                        this.items=res.data;
                        console.log(res.data);
                    })
                    .catch(function(error){
                        console.log(error);
                    });
            }
        },
        created(){
            //自動加載indexs方法
            this.indexs();
        }
           

在頁面被渲染後調用自定義函數

methods: {
            indexs:function(){
                this.$http.post('{:url("Index/fun")}')
                    .then(function(res){
                        this.items=res.data;
                        console.log(res.data);
                    })
                    .catch(function(error){
                        console.log(error);
                    });
            }
        },
        mounted(){
            //自動加載indexs方法
            this.indexs();
        }
           

.vue檔案下引入js代碼

<script>
import echarts from "echarts";
export default {
  name: "Home",
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.after();
    });
  },
  methods: {
    after() {}
  }
};
</script>
           

全局引入jq

在根目錄下的main.js加入以下内容

import jquery from 'jquery'

window.jquery = window.$ = jquery
           

axios

安裝axios和vue_axios

輸入以下指令安裝axios和vue_axios

npm install axios
npm install vue_axios
           

引入檔案

在main.js中加入

import axios from 'axios'
import vueAxios from 'vue-axios'
Vue.use(vueAxios, axios)
           

使用

将token放置在請求頭

參數模式

this.axios({
          method: 'post',
          url: this.$store.state.ApiUrl + '/api/jobpath/getPageList',
          headers: {
            'token': ''
          },
          params: {
          }

        }).then(
          res => {
            console.log(res)
          },
          res => {
            console.log(res)
          })
           

get和post請求

// 元件中使用get方法
this.axios.get(url, parmas: {a: 1, b: 2})
  .then(res => {
    // 成功回調
    console.log(res)
  }, res => {
    // 錯誤回調
    console.log(res)
  })


// 元件中使用post方法
this.axios.post(url, {a: 1, b: 2})
  .then(res => {
    // 成功回調
    console.log(res)
  }, res => {
    // 錯誤回調
    console.log(res)
  })
           

vuex

vuex其實就是一個全局元件，無論在那裡都可以通過

this.$store.state.xxx
           

通路儲存在裡面的狀态

Getters：用來從 store 擷取 Vue 元件資料。

Mutators：事件處理器用來驅動狀态的變化。

Actions：可以給元件使用的函數，以此用來驅動事件處理器 mutations

Vuex和簡單的全局對象是不同的，當Vuex從store中讀取狀态值的時候，若狀态發生了變化，那麼相應的元件也會高效的更新。并且，改變store中狀态的唯一途徑就是送出commit mutations。這樣便于我們跟蹤每一次狀态的變化。隻要發生了狀态的變化，一定伴随着mutation的送出。

剩下的和變量一樣

取消vuecli4.x 嚴格模式

在根目錄下建立vue.config.js檔案

在檔案中輸入以下内容

module.exports = {
    lintOnSave: false,
}
           

就好了 ok 記得重新開機項目哦

總結

vue這個東西特别簡單，當然剛入門的時候我也踩了不少的坑，不過有了一個系統的架構，學起來其實也就一天就足夠了，尤其是資源已經提供了模闆的前提下。額外說一句，vuecli的嚴格模式是可以關掉的，需要的小夥伴們可以去網上查一下