寫給後端同窗的vue

安裝環境

文章內，圖片不少，佔據了必定的篇幅。有寫後臺的哥們說，vue怎麼寫，怎麼新建一個vue項目，而後我想了想，以爲寫一個面向後臺同窗的vue教程也是有必要，文章中幾乎沒講css和vue細節處理的相關內容，減小接受沒必要要的信息量，下降vue的學習成本。若是有不清楚的地方，能夠私信聯繫我，有不對不合理之處，敬請指出！我是邇伶貳！

1. 安裝nodejs環境

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

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項目
打開剛纔初始化後的項目】

配置啓動腳本，相對於配置java 的腳本要簡單的多

啓動：

訪問地址

3.3 項目目錄介紹：

• 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

使用

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文件

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
        },
    ]
})

4.6 修改入口main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router';

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

訪問路由：

5. 增長axios， http請求庫 (https://www.kancloud.cn/yunye...

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

7.2 構建結果

會在項目目錄下生成dist 文件夾，文件夾下的文件就是咱們須要的靜態文件
咱們把打包後的靜態文件扔進服務器便可，或者咱們用ngxix 部署靜態文件，index.html 就是最終指向的入口文件。

關於nginx的部署，須要的話能夠參考： nginx會多少

-1. 補充，使用第三方ui庫

整理不容易，轉載請註明出處，我是邇伶貳，謝謝閱讀