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

資訊專欄INFORMATION COLUMN

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

hiyayiji / 2551人閱讀

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

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

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

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

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

開始創(chuàng)建項(xiàng)目

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

這里說一下這個(gè)ESLint 這是一個(gè)代碼風(fēng)格檢查的插件，你的縮進(jìn)是兩個(gè)空格還是四個(gè)空格，你用不用: 當(dāng)你的代碼不符合ESLint的規(guī)則時(shí)就會(huì)報(bào)錯(cuò)，及時(shí)你的代碼語法和邏輯都沒錯(cuò)?？醋约合埠眠x擇yes還是no。如果不小心回車選擇了yes。一會(huì)告訴你怎么解決。

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

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

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

找到main.js 改成這個(gè)樣子

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)頁一樣可以前進(jìn)和后退
  el: "#app",
  router,
  template: "",
  components: { App }
})

在components 新建組件login

-

這一步運(yùn)行需要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

長成上面的樣子的話，估計(jì)就成功了

待續(xù) 　荊軻刺秦王

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

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

相關(guān)文章

  • 前端小白的全棧初體驗(yàn)

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

    wangym 評論0 收藏0

  • 前端小白的全棧初體驗(yàn)

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

    Jioby 評論0 收藏0

  • 前端小白的全棧初體驗(yàn)

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

    PumpkinDylan 評論0 收藏0

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

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

    fish 評論0 收藏0

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

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

    warkiz 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<