摘要:小白的全棧開發一簡介從新手的角度對有了解,對和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關于怎么搭建全棧的文章,部分可能有借鑒。因為要自己獨立完成,所以開始自己的全棧之旅。分享出來我的全棧經歷,并記錄我的畢設進度逃。
小白的全棧開發 一 簡介
從新手的角度(對vue有了解,對Koa和Express有了解。)從0開始搭建一個通過RESTful API提供數據,vue組成的單頁面的前端項目。希望能夠幫助和我一樣是全棧小白的你(看過很多關于怎么搭建全棧的文章,部分可能有借鑒)。
開啟全棧之旅馬上畢業了,畢設題目是XXX課程網站,就是一個類似B站的網站。學生可以觀看視頻,文檔(暫定為word和pdf),可以在視頻和文檔下面進行評論。由老師上傳視頻和文檔。因為要自己獨立完成,所以開始自己的全棧之旅。分享出來我的全棧經歷,并記錄我的畢設進度(逃~)。
- 當時構想自己的網站是這樣的: 是一個spa,有vue express提供接口api mongodb
首先這些東西你要有,node vue-cli webpack mongodb,準備好之后 我們就開始全棧之旅吧
開始創建項目cd到你的想創建目錄的文件夾 然后在命令行 vue init webpack vuefile(你自己定的項目名稱)
這里說一下這個ESLint 這是一個代碼風格檢查的插件,你的縮進是兩個空格還是四個空格,你用不用: 當你的代碼不符合ESLint的規則時就會報錯,及時你的代碼語法和邏輯都沒錯。看自己喜好選擇yes還是no。如果不小心回車選擇了yes。一會告訴你怎么解決。
然后就和截圖上面一樣 cd到vuefile 然后npm install一鍵安裝依賴項 最后npm run dev 你的vue就可以跑起來了。 大概長這樣
補上前面的坑,如果你的ESLint選了Yes 在vuefile>build>webpack.base.conf.js 找到eslint-loader 并將代碼塊注釋。
登錄界面構建項目已經創建完成了下面要將項目改成spa
進入我們的vue工作區(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可以和以前的網頁一樣可以前進和后退 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
長成上面的樣子的話,估計就成功了
待續 荊軻刺秦王文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/18960.html
摘要:原文來源全棧初體驗前言據說現在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應該算是最簡單的前后端例子,如圖輸入賬戶密碼,提交表單,保存信息到數據庫再重定向到頁面獲取數據庫中的信息,渲染在瀏覽器上具體代碼主要技術前端模板后臺 原文來源: 全棧初體驗 前言 據說現在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應該算是最簡單的前后...
摘要:原文來源全棧初體驗前言據說現在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應該算是最簡單的前后端例子,如圖輸入賬戶密碼,提交表單,保存信息到數據庫再重定向到頁面獲取數據庫中的信息,渲染在瀏覽器上具體代碼主要技術前端模板后臺 原文來源: 全棧初體驗 前言 據說現在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應該算是最簡單的前后...
摘要:原文來源全棧初體驗前言據說現在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應該算是最簡單的前后端例子,如圖輸入賬戶密碼,提交表單,保存信息到數據庫再重定向到頁面獲取數據庫中的信息,渲染在瀏覽器上具體代碼主要技術前端模板后臺 原文來源: 全棧初體驗 前言 據說現在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應該算是最簡單的前后...
摘要:前言此項目是用于構建博客網站的,由三部分組成,包含前臺展示管理后臺和后端。體驗地址網站主頁網站首頁管理后臺計劃這次是一個完整的全棧式開發,只要部署了這三個項目的代碼,是完全可以搭建好博客網站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言 此項目是用于構建博客網站的,由三部分組成,包含前臺展示、管理...
摘要:總結我覺得,以后基于的全棧式開發的模式將會越來越流行,這也會引領前端步入工程化時代。歡迎繼續關注本博的更新中間層實踐一基于的全棧式開發中間層實踐二搭建項目框架中間層實踐三配置中間層實踐四模板引擎中間層實踐五中間層的邏輯處理 版權聲明:更多文章請訪問我的個人站Keyon Y,轉載請注明出處。 前言 近期公司有個新項目,由于后端人手不足,我果斷的提議用node中間層的方案,得到了老大的支持...
閱讀 2860·2019-08-30 15:44
閱讀 1886·2019-08-29 13:59
閱讀 2845·2019-08-29 12:29
閱讀 1090·2019-08-26 13:57
閱讀 3201·2019-08-26 13:45
閱讀 3330·2019-08-26 10:28
閱讀 824·2019-08-26 10:18
閱讀 1694·2019-08-23 16:52