亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

小白的全棧開發(fā) 一

hiyayiji / 2596人閱讀

摘要：小白的全棧開發(fā)一簡介從新手的角度對有了解，對和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關(guān)于怎么搭建全棧的文章，部分可能有借鑒。因為要自己獨立完成，所以開始自己的全棧之旅。分享出來我的全棧經(jīng)歷，并記錄我的畢設(shè)進度逃。

小白的全棧開發(fā) 一 簡介

從新手的角度（對vue有了解，對Koa和Express有了解。）從0開始搭建一個通過RESTful API提供數(shù)據(jù)，vue組成的單頁面的前端項目。希望能夠幫助和我一樣是全棧小白的你（看過很多關(guān)于怎么搭建全棧的文章，部分可能有借鑒）。

馬上畢業(yè)了，畢設(shè)題目是XXX課程網(wǎng)站，就是一個類似B站的網(wǎng)站。學(xué)生可以觀看視頻，文檔(暫定為word和pdf)，可以在視頻和文檔下面進行評論。由老師上傳視頻和文檔。因為要自己獨立完成，所以開始自己的全棧之旅。分享出來我的全棧經(jīng)歷，并記錄我的畢設(shè)進度(逃~)。
-　當(dāng)時構(gòu)想自己的網(wǎng)站是這樣的： 是一個spa，有vue express提供接口api mongodb
開啟全棧之旅

首先這些東西你要有，node vue-cli webpack mongodb，準備好之后 我們就開始全棧之旅吧

開始創(chuàng)建項目

cd到你的想創(chuàng)建目錄的文件夾 然后在命令行 vue init webpack vuefile（你自己定的項目名稱）

這里說一下這個ESLint 這是一個代碼風(fēng)格檢查的插件，你的縮進是兩個空格還是四個空格，你用不用: 當(dāng)你的代碼不符合ESLint的規(guī)則時就會報錯，及時你的代碼語法和邏輯都沒錯。看自己喜好選擇yes還是no。如果不小心回車選擇了yes。一會告訴你怎么解決。

然后就和截圖上面一樣 cd到vuefile 然后npm install一鍵安裝依賴項 最后npm run dev 你的vue就可以跑起來了。 大概長這樣

補上前面的坑，如果你的ESLint選了Yes 在vuefile>build>webpack.base.conf.js 找到eslint-loader 并將代碼塊注釋。

項目已經(jīng)創(chuàng)建完成了下面要將項目改成spa
　登錄界面構(gòu)建 
進入我們的vue工作區(qū)(src文件夾)

找到main.js 改成這個樣子

import Vue from "vue"
import App from "./App"
import router from "./router"
import ElementUI from "element-ui" // 引入element-ui
import "element-ui/lib/theme-default/index.css"

Vue.config.productionTip = false
Vue.use(ElementUI)  //全局使用ElementUI 就可以在其他.vue文件使用element-ui
/* eslint-disable no-new */
new Vue({
  mode: "history", //開啟history模式保證spa可以和以前的網(wǎng)頁一樣可以前進和后退
  el: "#app",
  router,
  template: "",
  components: { App }
})

在components 新建組件login

-

這一步運行需要npm install stylus 和 stylus-loader

為新的login.vue增加路由 到router下的index.js

//... 前面的就不寫了 引入其他需要的東西
import Login from "@/components/Login"
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: "/",
      name: "Hello",
      component: Hello
    },
    {
      path: "/login",
      name: "Login",
      component: Login
    },
  ]
})

在我們的瀏覽器中輸入http://localhost:8080/#/login

長成上面的樣子的話，估計就成功了

待續(xù) 　荊軻刺秦王

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/18960.html

相關(guān)文章

  • 前端小白的全棧初體驗

    摘要：原文來源全棧初體驗前言據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應(yīng)該算是最簡單的前后端例子，如圖輸入賬戶密碼，提交表單，保存信息到數(shù)據(jù)庫再重定向到頁面獲取數(shù)據(jù)庫中的信息，渲染在瀏覽器上具體代碼主要技術(shù)前端模板后臺 原文來源： 全棧初體驗 前言 據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應(yīng)該算是最簡單的前后...

    wangym 評論0 收藏0

  • 前端小白的全棧初體驗

    摘要：原文來源全棧初體驗前言據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應(yīng)該算是最簡單的前后端例子，如圖輸入賬戶密碼，提交表單，保存信息到數(shù)據(jù)庫再重定向到頁面獲取數(shù)據(jù)庫中的信息，渲染在瀏覽器上具體代碼主要技術(shù)前端模板后臺 原文來源： 全棧初體驗 前言 據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應(yīng)該算是最簡單的前后...

    Jioby 評論0 收藏0

  • 前端小白的全棧初體驗

    摘要：原文來源全棧初體驗前言據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應(yīng)該算是最簡單的前后端例子，如圖輸入賬戶密碼，提交表單，保存信息到數(shù)據(jù)庫再重定向到頁面獲取數(shù)據(jù)庫中的信息，渲染在瀏覽器上具體代碼主要技術(shù)前端模板后臺 原文來源： 全棧初體驗 前言 據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應(yīng)該算是最簡單的前后...

    PumpkinDylan 評論0 收藏0

  • react + node + express + ant + mongodb 的簡潔兼時尚的博客網(wǎng)站

    摘要：前言此項目是用于構(gòu)建博客網(wǎng)站的，由三部分組成，包含前臺展示管理后臺和后端。體驗地址網(wǎng)站主頁網(wǎng)站首頁管理后臺計劃這次是一個完整的全棧式開發(fā)，只要部署了這三個項目的代碼，是完全可以搭建好博客網(wǎng)站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言 此項目是用于構(gòu)建博客網(wǎng)站的，由三部分組成，包含前臺展示、管理...

    fish 評論0 收藏0

  • Node中間層實踐（一）——基于NodeJS的全棧式開發(fā)

    摘要：總結(jié)我覺得，以后基于的全棧式開發(fā)的模式將會越來越流行，這也會引領(lǐng)前端步入工程化時代。歡迎繼續(xù)關(guān)注本博的更新中間層實踐一基于的全棧式開發(fā)中間層實踐二搭建項目框架中間層實踐三配置中間層實踐四模板引擎中間層實踐五中間層的邏輯處理 版權(quán)聲明：更多文章請訪問我的個人站Keyon Y，轉(zhuǎn)載請注明出處。 前言 近期公司有個新項目，由于后端人手不足，我果斷的提議用node中間層的方案，得到了老大的支持...

    warkiz 評論0 收藏0

發(fā)表評論

0條評論

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