DKGEE

# 前端框架

记录前端开发部分知识

# 前端问答

  1. 2019前端面试题汇总（主要为Vue） (opens new window)

# Nodejs

  1. nodejs最新安装包下载目录 (opens new window)
  2. 淘宝 NPM 镜像 (opens new window)

淘宝NPM镜像

当前 registry.npm.taobao.org 是从 r.cnpmjs.org 进行全量同步的.
当前 npm.taobao.org 运行版本是: cnpmjs.org@3.0.0-rc.32
本系统运行在 Node.js@v12.8.1 上.
开源镜像: http://npm.taobao.org/mirrors
Node.js 镜像: http://npm.taobao.org/mirrors/node
alinode 镜像: http://npm.taobao.org/mirrors/alinode
phantomjs 镜像: http://npm.taobao.org/mirrors/phantomjs
ChromeDriver 镜像: http://npm.taobao.org/mirrors/chromedriver
OperaDriver 镜像: http://npm.taobao.org/mirrors/operadriver
Selenium 镜像: http://npm.taobao.org/mirrors/selenium
Node.js 文档镜像: http://npm.taobao.org/mirrors/node/latest/docs/api/index.html
NPM 镜像: https://npm.taobao.org/mirrors/npm/
electron 镜像: https://npm.taobao.org/mirrors/electron/
node-inspector 镜像: https://npm.taobao.org/mirrors/node-inspector/

小知识

nrm命令 (opens new window): (npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换。

服务器端渲染(SSR) (opens new window)

# 安装

  1. Yarn的安装和使用 (opens new window)
  2. 基于Vue与SpringBoot的前后端分离研究 (opens new window)

# Vue

本教程旨在指导前端，开发者可掌握日常vue页面基础组件开发及应用。 Vue官网 (opens new window)

此处添加Vue知识模块图

  1. Vue: 一个JS框架，具备MVVM（Model、View、VM=Bind）设计理念

  2. vue-cli: vue客户端，可以使用vue ui界面创建项目

  3. vuex: vue扩展，主要用于前端页面数据存储

  4. vue-router: vue路由，主要用于导航

  5. VUE官网地址 (opens new window)：https://cn.vuejs.org/
    开发时，如遇一些命令不懂，查询官网文档。

  6. Element前端UI框架

    • 官网地址 (opens new window)：https://element.eleme.cn/#/zh-CN
      开发时，前端页面设计遇到一些组件问题，如图标、按钮、字体、布局等。参考官网示例

  7. VUE项目前端框架

    前端框架一和二，均可以作为前端基础框架，进行二次开发

  8. 其他工具

    使用该工具可进行前端基础界面开发，如使用命令"vue ui" 启动后

  9. SpringBoot+VUE前后端分离项目模板

    使用RuoYi-Vue作为选型项目框架，修改后模板地址如下，请各团队负责人在本地搭建基础环境

    搭建步骤： step01: 下载v2.2源码包 (opens new window)
    step02: 后端代码路径（RuoYi-Vue/ruoyi）、前端代码路径（RuoYi-Vue/ruoyi-ui）
    step03: 后端代码下载后，使用IDEA开发工具，打开使用。
    前端代码下载后，切换到ruoyi-ui目录，执行"npm install" 安装前端依赖包，安装完成后，使用"npm run dev"启动前端项目

  10. 项目模板

# Koa2

koa2自诩是基于Nodejs的下一代Web开发框架，koa2进阶学习 (opens new window)

# NuxtJS

NextJS官网 (opens new window)是一个基于Vue上的框架，

该框架非常方便做Vue的SSR（服务器端渲染|Server side rendering）比传统SPA (单页应用程序|Single-Page Application) 更好，

此处添加NuxtJS知识模块图

创建即配置

# 开发前期

  1. 环境准备：node@v8.12.0、vue@v2.5.17、npm@v6.4.1、webpack@v4.19.1、 nuxtjs@2.0.0
  2. 项目安装
  3. 辅助工具安装: vue-cli、axios、vuex.....
  4. 配置安装

# 前端自动化部署

  1. Jenkins自动化部署nodejs项目（前端项目） (opens new window)
  2. 前端可以部署多个项目，修改nginx及项目的base路径

# 参考示例

  1. 若依：基于SpringBoot + Vue + Element UI的前后端分离权限管理系统 (opens new window)
  2. APlayer——一个HTML5音乐播放器 (opens new window)
  3. vue-element-admin (opens new window)
  4. Github-JEECG-BOOT:基于代码生成器的低代码平台,前后端分离架构 (opens new window)
  5. Gitee-JEECG-BOOT:基于代码生成器的低代码平台,前后端分离架构 (opens new window)

# Gitee Pages

与dkgee.github.io相似，gitee使用的是dkgee.gitee.io/xxx 来发布文档项目，并且是手动部署更新，例如自定义项目doc示例 (opens new window)

码云Pages

# 前端UI界面参考模板

  1. AdminLTE (opens new window)：非常流行的基于Bootstrap 3.x的免费的后台UI框架
  2. vue-Element-Admin (opens new window)：一个基于vue2.0和Eelement的控制面板UI框架
  3. tabler (opens new window)：构建在BootStrap 4之上的免费的HTML控制面板框架
  4. Gentelella (opens new window)：一个基于Bootstarp的免费的后台控制面板
  5. ng2-admin (opens new window)：基于Angular2,Bootstrap4和Webpack的后台管理面板框架
  6. 【建议】【蚂蚁金服】ant-design-pro (opens new window)：开箱即用的中台前端/设计解决方案
  7. blur-admin (opens new window)：基于Angular和Bootstrap的后台管理面板框架
  8. vue-admin (opens new window)：基于Vue和Bulma的控制面板
  9. 【还不错】iview-admin (opens new window)：基于iView的Vue2.0控制面板
  10. material-dashboard (opens new window)：基于Bootstrap4和Material风格的控制面板

# 相关框架

  1. Matrxi-Web前后端分离的管理系统 (opens new window)

# 前端数据可视化工具

  1. 百度图说-Echarts (opens new window)
  2. 可视化JS库-D3js (opens new window)

# 后端技术栈

  1. Spring Boot
  2. Spring Security
  3. MyBatis
  4. MySQL
  5. Redis
  6. RabbitMQ
  7. Spring Cache
  8. WebSocket

# 前端技术栈

  1. Vue
  2. ElementUI
  3. axios
  4. vue-router
  5. Vuex
  6. WebSocket
  7. vue-cli4
  8. vue-echarts
  9. mavon-editor
  10. Js-cookie
  11. jsfiddle (opens new window)
  12. codesandbox (opens new window)
  13. nprogress
上次更新: 2020-12-29 18:43:33

← 案例与团队 →