VueNode - GitLite

KO | EN

gitlite — search

#javascript #python #react #ai #machine-learning #rust #linux #docker #macos #awesome #kubernetes #vue #pytorch #openai

VueNode

(★ 484)

VueNode is a project of front and backend separation that building on TypeScript + Vue3.x + Node.js + MySQL + TypeORM

File Explorer

Download Latest Version (.zip)

- - config.yml
  - feature_request.md
  - open-an-issue.md
- - dev.yml
  - test.yml
- - webpack.base.config.js
  - webpack.dev.config.js
  - webpack.prod.config.js
- - index.html
- - App.vue
  - main.ts
- .babelrc.js
- .editorconfig
- .eslintrc.js
- .prettierrc
- babel.config.js
- Jenkinsfile
- nginx.conf
- package-lock.json
- package.json
- publish.sh
- tsconfig.json
- vue.config.js
- - 1696406073873-update-user-default-avatar.ts
  - 1696413073247-update-tour-icon-path.ts
  - 1696418964257-update-coupon-endtime.ts
  - 1696423773558-update-coupon_recived_num-in-coupon-table.ts
- - data-source.ts
  - index.ts
- .editorconfig
- .eslintignore
- .eslintrc.js
- .gitignore
- .prettierrc.js
- Jenkinsfile
- nginx.conf
- package-lock.json
- package.json
- pm2.json
- publish.sh
- README.md
- tour.sql
- tsconfig.json
.gitignore
LICENSE
README-zh_CN.md
README.md

# Installation Guide

1. Get the code

git clone https://github.com/zhaoyiming0803/VueNode

Downloads the entire project code from GitHub to your computer.

cd VueNode

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

cd fe

This project's files live in a subfolder, so move into it first.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# VueNode

> The best way to learn is to read books and official documents, as well as open source codes in GitHub, and then write test demos.

English | [简体中文](./README-zh_CN.md)

VueNode is developed using Vue3 & Node.js, and the old version can refer to:

- [VueNode v1.x](https://github.com/zhaoyiming0803/VueNode/tree/v1.0)

- [VueNode v2.x](https://github.com/zhaoyiming0803/VueNode/tree/v2.2.2)
 
- [VueNode v3.x](https://github.com/zhaoyiming0803/VueNode/tree/v3.0.1)

### Replace Express with Koa.js

- https://github.com/zhaoyiming0803/test-code/blob/master/TypeORMDemoWithKoa/

### Vue upgrade guide from v2 to v3:

- [Vue Official Upgrade Guide](https://v3-migration.vuejs.org/)

- [vuex](https://next.vuex.vuejs.org/guide/)

- [vue-router](https://next.router.vuejs.org/installation.html)

- [upgrade vantUI](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/migrate-from-v2)

- [vuex](https://next.vuex.vuejs.org/guide/)

- [vue-router](https://next.router.vuejs.org/installation.html)

- [test demo](https://github.com/zhaoyiming0803/vue3-webpack-demo)

- Initialize a demo using Vue official cli, confirm the latest package dependency version is, and then install the corresponding version of the dependencies in the current project.

- Temporarily comment out the routes in `fe/src/router/routes.ts`, add a new test page, and gradually migrate the original business code.

- Convert all components under `fe/src/components` to Vue 3 syntax.

- Gradually migrate `fe/src/pages`.

- Note: This project is purely a personal hobby and code testing.

### Technology Stacks

- FE：@vue/cli@4.5.13、vue.js@3.2.16、vuex@4.0.2、vue-router@4.0.11、Less、ES6(7|8)、Webpack4、axios@0.19.0

- BE：Node.js（Koa.js）、MySQL、TypeORM、class-validator

### Run project in local

- git clone https://github.com/zhaoyiming0803/VueNode.git

- Open directory `fe` and `server`, view package.json, use npm can execute the corresponding script.

### Production environment deployment

- FE：refer to nginx.conf、Jenkinsfile、publish.sh under directory `fe`.

- BE：refer to nginx.conf、pm2.json、Jenkinsfile、publish.sh under directory `server`.

### About SQL

- Install MySQL database, create a new database named `tour`, and then import all data (/server/tour.sql).

- The default password for users in the user table is 123456.

### Features

- [x] Login、Regist、Modify password（100%）
- [x] Personal page（100%）
- [x] Update profile（100%）
- [x] Home（100%）
- [x] Home - list, global coupon（100%）
- [x] Show countries and regions list（100%）
- [x] Banners, coupons belong to country or region（100%）
- [x] Claim coupons（100%）
- [x] Coupon detail（100%）
- [x] Use coupon（100%）
- [x] Publish coupon detail（100%）
- [x] Star comment component（100%）
- [x] Wechat sharing（100%）using nodejs：https://github.com/zhaoyiming0803/wechat-nodejs

### Project GIF

![gif](https://github.com/zhaoyiming0803/VueNode/blob/v1.0/project.gif?raw=true)

### Thanks

- If it is helpful to you, you can click on the `Star` or `Watch` in the upper right corner to support it. Thank you ^_^

- Alternatively, you can `follow` me and I will continue to open up more interesting projects.

- If you have any problems, please directly raise them in issues, or if you find problems and have excellent solutions, welcome PR 👍

### My Wechat & QQ：1047832475

<img src="https://github.com/zhaoyiming0803/zhaoyiming0803/raw/master/wechat.jpeg" width="200" height="200">

### Reference material

- https://vuejs.org/
- https://router.vuejs.org/installation.html
- https://vuex.vuejs.org/guide/
- https://koajs.com/
- https://github.com/koajs/router/blob/master/API.md
- https://www.npmjs.com/package/koa-swagger-decorator
- https://typeorm.io/
- https://www.npmjs.com/package/class-validator
- https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html
- https://pm2.keymetrics.io/docs/usage/quick-start/