寫給後端同學的vue

adouwt發表於2019-07-21

文章內,圖片很多,佔據了一定的篇幅。有寫後臺的哥們說,vue怎麼寫,怎麼新建一個vue專案,然後我想了想,覺得寫一個面向後臺同學的vue教程也是有必要,文章中幾乎沒講css和vue細節處理的相關內容,減少接受不必要的資訊量,降低vue的學習成本。如果有不清楚的地方,可以私信聯絡我,有不對不合理之處,敬請指出!我是邇伶貳!

安裝環境

安裝vue-cli 腳手架

1. 安裝nodejs環境

  • 下載地址: (nodejs)[https://nodejs.org/zh-cn/download/]
  • 安裝(略)

2. 安裝vue-cli系列工具

  • npm install -g @vue/cli
  • npm install -g @vue/cli-service-global

3. vue create hello-world // 用vue 初始化hello-world 專案

3.1 vue create hello-world
3.2 跑起專案 npm run serve

很多後端同學的用的編輯器是 idea, 我這裡也用idea演示這個,細節之處不是本文的重點,可檢視 idea建立vue專案
開啟剛才初始化後的專案
寫給後端同學的vue
配置啟動指令碼,相對於配置java 的指令碼要簡單的多
寫給後端同學的vue
啟動:
寫給後端同學的vue
訪問地址
寫給後端同學的vue

3.3 專案目錄介紹:

寫給後端同學的vue

  • node_modules , 專案依賴的模組包,我們需要的模組包都會下載到這個目錄下,我們開發時不用管
  • public 靜態檔案放的位置,放一下大的靜態檔案
  • src 專案的原始檔
    • assets 小的靜態檔案
    • components 元件,一些公用的元件,比如登入框,輸入元件等
    • APP.vue vue專案的根元件
    • main.js 專案的主入口檔案,一些需要的基本的js css 可在這裡引入
  • package.json 專案依賴、介紹、基本配置等的清單檔案,我們只需要看,scripts 裡面的執行命令即可, 比如serve ->啟動, build -> 構建打包
  • 其他 專案執行配置檔案,可忽略

    Tips:上面的內容瞭解即可,可不用深入,繼續往下新增頁面路由

    4. 增加路由vue-router

    4.1 安裝路由 npm install vue-router -S

    寫給後端同學的vue
    使用

    4.2 在專案資料夾下新建router.js
    4.3 寫入程式碼
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';

Vue.use(Router);

export default  new Router({
    mode:'history',
    routes: [
        {
            path: '/helloworld',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})
4.4. 新建page資料夾,資料夾下面的都是為頁面 .vue檔案

寫給後端同學的vue

4.5 修改router.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
import Index from './page/index';
import List from './page/list';

Vue.use(Router);

export default  new Router({
    mode:'history',
    routes: [
        {
            path: '/helloworld',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/index',
            name: 'Index',
            component: Index
        },
        {
            path: '/list',
            name: 'List',
            component: List
        },
    ]
})

訪問路由:
寫給後端同學的vue
寫給後端同學的vue

5. 增加axios, http請求庫 (https://www.kancloud.cn/yunye/axios/234845)

5.1 安裝庫 axios , npm install axios -S
5.2 使用

以上面的list.vue 檔案為例:

<template>
    <div>
        <h3>這是一個list 頁面</h3>
        <ul>

            <li>
                <router-link to="/index">Index</router-link>
            </li>
        </ul>

        <h3>下面是axios請求到到資料</h3>
        <ul v-if="userList.length">
            <li v-for="item in userList" :key="item.id">
                姓名:{{item.name}}
            </li>
        </ul>

        <ul v-if="!userList.length">
            loading....
        </ul>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
        name: "Index",
        data(){
            return {
                userList: []
            }
        },
        created () {
            axios('http://localhost:4000/get/alluser')
                .then(res => {
                    this.userList = res.data.users;
                })
        }
    }
</script>
<style scoped>
    ul li {
        list-style: none;
        font-size: 16px;
    }
</style>

6. 增加腳手架可配置檔案 vue.config.js

設定介面的跨域,vue-cli 啟動的服務埠等

module.exports = {
    devServer: {
        port: 8090,
        proxy: 'http://localhost:4000'
    }
}

7. 打包專案

7.1 執行命令 npm run build

寫給後端同學的vue

7.2 構建結果

會在專案目錄下生成dist 資料夾,資料夾下的檔案就是我們需要的靜態檔案
寫給後端同學的vue

我們把打包後的靜態檔案扔進伺服器即可,或者我們用ngxix 部署靜態檔案,index.html 就是最終指向的入口檔案。

10. 補充,使用第三方ui庫

相關文章