Koa Vue Fullstack Boilerplate
��
��
��
Upgrade Webpack to v5!
Project based on Webpack4 is in Releases.
Preface
Vue.js, Koa.js, Node.js, and MongoDB fullstack lightweight example application. Authentication, CRUD, and access control included.
This project aims to build a small but structured full-stack application, so it would be relatively clear for a programmer/beginner to understand how to build a website from scratch.
Demo:
Click here to see demo website.
email: admin@example.com password: 123456
Environment:
- Server
- Koa
- Koa Router, Koa Cors, Koa Bodyparser
- Mongoose
- Node
v8.9.4v10.12.0v11.0.0
- Client
Architecture
├─client # frontend folder
│ ├─src # frontend src
│ │ ├─api
│ │ ├─router
│ │ ├─styles
│ │ ├─components
│ │ ├─store # state management
│ │ │ └─modules
│ │ └─view # app pages
│ │ └─auth
│ └─static # static folder
|
└─server # server folder
└─src # server src
├─api # server api list
│ ├─auth # completely token-based authentication
│ ├─thing
│ └─user
├─config # server configurations
│ ├─index # default server port, mongo uri, etc settings
│ ├─security # security settins
│ └─seed # populate database with sample data on server start
├─entry.js # entry file for environment setup
├─main.js # main file after entry
└─routes.js # router
Run through Docker
cd server # You can boost the server by using Docker
docker-compose up
# Open a new tab
cd client
npm install
npm start
Setup Locally:
- Steps:The server and client are completely seperated in this project, so go to each client and server folder and run:
cd client
npm install
npm start # Running dev client
# Open a new tab
mongod # Boost Mongo DB
# Open a new tab
cd server
# CREATE a .env file under server folder, and copy and paste the contents of .env.default file into this .env, and assign values
touch .env
npm install
npm start # Running dev server
- Others:
npm run build # Running production mode
npm run eslint # Check your coding style
npm run eslint-fix # Use auto ESLint fix
-
配置 Webpack vue-cli及诸多脚手架生成的项目里, 配置项非常繁琐, 结构也非常混乱, 实际上 webpack 常规配置就需要两个, 分别给开发环境和产品环境使用. 而且像 webpack-merge 这样的插件, 可以通过简单的 Object.assign 或 [].concat 完成. 示例: base.js 基础设置: const path = require('path');
-
前言 本文将包含WebSocket原理，WebSocket在项目中的使用，如何用WebSocket实现及时消息沟通三大块内容。 webSocket 早期，很多网站为了实现推送技术，所用的技术都是轮询（也叫短轮询）。轮询是指由浏览器每隔一段时间向服务器发出HTTP 请求，然后服务器返回最新的数据给客户端。无法由服务端主动发送数据。 而WebSocket是一种可在单个TCP连接上进行全双工通信的网络传
-
不废话先上地址 https://github.com/tiandao5d/kvxl.git 新人，欢迎各位大神随时批评教育 最近一直在找全栈模板，没找到比较好的（在下查找水平太差劲，哈哈） 所以自己动手搞了个发在了git上 如果有很不错的全栈模板，愿意的话也请推荐给在下
-
Koa和Vue是两个不同的框架，针对的领域也不同。 Koa是一个基于Node.js平台的Web框架，用于编写服务器端应用程序，提供了中间件机制来处理HTTP请求和响应，使得编写Web应用程序更加简洁、直观和可读性更强。 Vue是一个用于构建用户界面的渐进式JavaScript框架，专注于前端开发领域，使得开发者可以更加方便地编写高效、灵活和可维护的Web应用程序。 虽然它们的目的不同，但在实际项目
-
vue-koa-demo A fullstack demo used Vue2 & Koa2(Koa1 version is here) ☀️ Easy to setup and learn �� Api test coverage �� Instant feedback �� Vue SSR support in the ssr branch �� Docker support View the
-
内容 Vue，React，微信小程序，快应用，TS , Koa和JS 一把梭。 star ^_^欢迎star,你的star是我更新的动力^_^ 目录 mini-program-demo：小程序 demomini-program-template：小程序 templatereact-koa：react+koa 的全栈demoreact-mobile：react 的移动端 demodva-umi-te
-
Koa-Vue-Notes-Api This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Frontend Vue GitHub Frontend Vue Demo Frontend React GitHub Fron
-
Koa Vue SSR Template This template built with Vue 2.x, vue-router & vuex with server-side rendering by koa. Screenshot Build Setup Requires Node.js 7+ # install dependenciesnpm install # or yarn insta
-
Koa art-template view render middleware. support all feature of art-template. Install npm install --save art-template npm install --save koa-art-template Example const Koa = require('koa'); const ren
-
koa是Express的下一代基于Node.js的web框架，目前有1.x和2.0两个版本。 历史 1. Express Express是第一代最流行的web框架，它对Node.js的http进行了封装，用起来如下： var express = require('express'); var app = express(); app.get('/', function (req, res) {