寫(xiě)給后端同學(xué)的vue

SoapEye 發(fā)布于2019-08-26 10:14 / 1269人閱讀

摘要：有寫(xiě)后臺(tái)的哥們說(shuō)，怎么寫(xiě)，怎么新建一個(gè)項(xiàng)目，然后我想了想，覺(jué)得寫(xiě)一個(gè)面向后臺(tái)同學(xué)的教程也是有必要，文章中幾乎沒(méi)講和細(xì)節(jié)處理的相關(guān)內(nèi)容，減少接受不必要的信息量，降低的學(xué)習(xí)成本。

安裝環(huán)境

文章內(nèi)，圖片很多，占據(jù)了一定的篇幅。有寫(xiě)后臺(tái)的哥們說(shuō)，vue怎么寫(xiě)，怎么新建一個(gè)vue項(xiàng)目，然后我想了想，覺(jué)得寫(xiě)一個(gè)面向后臺(tái)同學(xué)的vue教程也是有必要，文章中幾乎沒(méi)講css和vue細(xì)節(jié)處理的相關(guān)內(nèi)容，減少接受不必要的信息量，降低vue的學(xué)習(xí)成本。如果有不清楚的地方，可以私信聯(lián)系我，有不對(duì)不合理之處，敬請(qǐng)指出！我是邇伶貳！

1. 安裝nodejs環(huán)境

下載地址： (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 項(xiàng)目

3.1 vue create hello-world

3.2 跑起項(xiàng)目 npm run serve

很多后端同學(xué)的用的編輯器是 idea,  我這里也用idea演示這個(gè),細(xì)節(jié)之處不是本文的重點(diǎn)，可查看 idea創(chuàng)建vue項(xiàng)目
打開(kāi)剛才初始化后的項(xiàng)目】

配置啟動(dòng)腳本，相對(duì)于配置java 的腳本要簡(jiǎn)單的多

啟動(dòng)：

訪(fǎng)問(wèn)地址

3.3 項(xiàng)目目錄介紹：

node_modules , 項(xiàng)目依賴(lài)的模塊包，我們需要的模塊包都會(huì)下載到這個(gè)目錄下，我們開(kāi)發(fā)時(shí)不用管

public 靜態(tài)文件放的位置，放一下大的靜態(tài)文件

src 項(xiàng)目的源文件

assets 小的靜態(tài)文件

components 組件，一些公用的組件，比如登錄框，輸入組件等

APP.vue vue項(xiàng)目的根組件

main.js 項(xiàng)目的主入口文件，一些需要的基本的js css 可在這里引入

package.json 項(xiàng)目依賴(lài)、介紹、基本配置等的清單文件，我們只需要看，scripts 里面的執(zhí)行命令即可，比如serve ->啟動(dòng)， build -> 構(gòu)建打包

其他項(xiàng)目運(yùn)行配置文件，可忽略

Tips：上面的內(nèi)容了解即可，可不用深入，繼續(xù)往下添加頁(yè)面路由

4. 增加路由vue-router

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

使用

4.2 在項(xiàng)目文件夾下新建router.js

4.3 寫(xiě)入代碼

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文件夾，文件夾下面的都是為頁(yè)面 .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")

訪(fǎng)問(wèn)路由：

5. 增加axios， http請(qǐng)求庫(kù) (https://www.kancloud.cn/yunye...

5.1 安裝庫(kù) axios , npm install axios -S

5.2 使用

以上面的list.vue 文件為例：

6. 增加腳手架可配置文件 vue.config.js

設(shè)置接口的跨域，vue-cli 啟動(dòng)的服務(wù)端口等

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

7. 打包項(xiàng)目

7.1 執(zhí)行命令 npm run build

7.2 構(gòu)建結(jié)果

會(huì)在項(xiàng)目目錄下生成dist 文件夾，文件夾下的文件就是我們需要的靜態(tài)文件
我們把打包后的靜態(tài)文件扔進(jìn)服務(wù)器即可，或者我們用ngxix 部署靜態(tài)文件，index.html 就是最終指向的入口文件。

關(guān)于nginx的部署，需要的話(huà)可以參考： nginx會(huì)多少

-1. 補(bǔ)充，使用第三方ui庫(kù)

整理不容易，轉(zhuǎn)載請(qǐng)注明出處，我是邇伶貳，謝謝閱讀

云服務(wù)器 GPU云服務(wù)器寫(xiě)給浮躁的IT同仁寫(xiě)給寫(xiě)給1000-5000 同學(xué)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105842.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

SoapEye

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

yolov3

閱讀 2956·2023-04-26 01:52
35歲，一個(gè)團(tuán)隊(duì)leader，從工作滿(mǎn)8年的公司離職，選擇重新嘗試新機(jī)會(huì)，或許35歲才是起點(diǎn)。

閱讀 3481·2021-09-04 16:40
RAKsmart八月服務(wù)器秒殺$30/月起,VPS主機(jī)$1.99/月起,新增香港大帶寬可選100Gb

閱讀 3639·2021-08-31 09:41
sharktech：荷蘭機(jī)房1Gbps帶寬不限流量服務(wù)器簡(jiǎn)單測(cè)評(píng)

閱讀 1779·2021-08-09 13:41
css圖像拼合技術(shù)（精靈圖）

閱讀 575·2019-08-30 15:54
echarts大屏字體自適應(yīng)

閱讀 2969·2019-08-30 11:22
Grid布局簡(jiǎn)介

閱讀 1624·2019-08-30 10:52
vue構(gòu)建優(yōu)化

閱讀 957·2019-08-29 13:24

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

寫(xiě)給后端同學(xué)的vue

3.1 vue create hello-world

3.2 跑起項(xiàng)目 npm run serve

3.3 項(xiàng)目目錄介紹：

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

4.2 在項(xiàng)目文件夾下新建router.js

4.3 寫(xiě)入代碼

4.4. 新建page文件夾，文件夾下面的都是為頁(yè)面 .vue文件

4.5 修改router.js

4.6 修改入口main.js

5.1 安裝庫(kù) axios , npm install axios -S

5.2 使用

這是一個(gè)list 頁(yè)面

下面是axios請(qǐng)求到到數(shù)據(jù)

7.1 執(zhí)行命令 npm run build

7.2 構(gòu)建結(jié)果

相關(guān)文章

寫(xiě)給在迷茫中前行的前端學(xué)習(xí)/工作者

寫(xiě)給想做前端的你

**26自學(xué)轉(zhuǎn)行前端（寫(xiě)給和1年前一樣迷茫的我的你）**

**26自學(xué)轉(zhuǎn)行前端（寫(xiě)給和1年前一樣迷茫的我的你）**

**26自學(xué)轉(zhuǎn)行前端（寫(xiě)給和1年前一樣迷茫的我的你）**

發(fā)表評(píng)論

0條評(píng)論

SoapEye

男|高級(jí)講師

TA的文章

yolov3

35歲，一個(gè)團(tuán)隊(duì)leader，從工作滿(mǎn)8年的公司離職，選擇重新嘗試新機(jī)會(huì)，或許35歲才是起點(diǎn)。

RAKsmart八月服務(wù)器秒殺$30/月起,VPS主機(jī)$1.99/月起,新增香港大帶寬可選100Gb

sharktech：荷蘭機(jī)房1Gbps帶寬不限流量服務(wù)器簡(jiǎn)單測(cè)評(píng)

css圖像拼合技術(shù)（精靈圖）

echarts大屏字體自適應(yīng)

Grid布局簡(jiǎn)介

vue構(gòu)建優(yōu)化

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

寫(xiě)給后端同學(xué)的vue

3.1 vue create hello-world

3.2 跑起項(xiàng)目 npm run serve

3.3 項(xiàng)目目錄介紹：

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

4.2 在項(xiàng)目文件夾下新建router.js

4.3 寫(xiě)入代碼

4.4. 新建page文件夾，文件夾下面的都是為頁(yè)面 .vue文件

4.5 修改router.js

4.6 修改入口main.js

5.1 安裝庫(kù) axios , npm install axios -S

5.2 使用

這是一個(gè)list 頁(yè)面

下面是axios請(qǐng)求到到數(shù)據(jù)

7.1 執(zhí)行命令 npm run build

7.2 構(gòu)建結(jié)果

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

4.4. 新建page文件夾，文件夾下面的都是為頁(yè)面 .vue文件