国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

寫給后端同學的vue

SoapEye / 1264人閱讀

摘要：有寫后臺的哥們說，怎么寫，怎么新建一個項目，然后我想了想，覺得寫一個面向后臺同學的教程也是有必要，文章中幾乎沒講和細節處理的相關內容，減少接受不必要的信息量，降低的學習成本。

安裝環境 
文章內，圖片很多，占據了一定的篇幅。有寫后臺的哥們說，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 文件為例：
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庫

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105842.html

相關文章

  • 寫給在迷茫中前行的前端學習/工作者

    摘要：我從今年的月份開始在知乎上連續回答前端開發相關的問題，至今已有將近三個月，回顧寫過的一百多條回答，不少是給迷茫的前端工作者的建議。今天我把我的思考提煉整理成文，希望能給予在迷茫中前行中的前端學習工作者一些有用的建議。 本文首發于知乎專欄——前端指南作者：Mark MFS老師轉載請注明來源。 我從今年的2月份開始在知乎上連續回答前端開發相關的問題，至今已有將近三個月，回顧寫過的一百多條回...

    羅志環 評論0 收藏0

  • 寫給想做前端的你

    摘要：不過細想想，我郵只有前端的選修課啥的，課程也不是那么就業導向。至少目前，很少有大公司完全把作為前后端通用的技術棧。不能把簡單看做是在服務端的延展。編譯這個思想在前端領域很重要不改變現有的語言環境同時進行最佳的工程實踐。 P.S. 噴神請繞道，大神勿噴，不引戰，不攻擊，不鉆牛角尖。 大二時第一次接觸前端。許多同學估計都想過要做一個網站，大部分又是從PHP開始的（誰讓它是世界上最好的語言呢...

    JerryWangSAP 評論0 收藏0

  • 26自學轉行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。 轉行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏2637

  • 26自學轉行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。 轉行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏2577

  • 26自學轉行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。 轉行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<