文章目录

  • 一、前言
  • 二、概况
  • 三、搭建注册页面
  • 四、改造登录页面
  • 四、整体效果动画演示
  • 五、前端源码下载
  • 六、后续

一、前言

  • 本文将在vue-admin-template模板基础上完成搭建注册与登录页面。文末处有完整的前端源码下载。

  • 环境准备

  1. 浏览器：Chrome
  2. IDE: VS Code
  3. Node.js 10+，npm

二、概况

  • 我们先了解一下整个项目的目录结构

    ├── build # 构建相关
    ├── mock # 项目mock 模拟数据
    ├── plop-templates # 基本模板
    ├── public # 静态资源
    │ │── favicon.ico # favicon图标
    │ └── index.html # html模板
    ├── src # 源代码
    │ ├── api # 所有请求
    │ ├── assets # 主题 字体等静态资源
    │ ├── components # 全局公用组件
    │ ├── directive # 全局指令
    │ ├── filters # 全局 filter
    │ ├── icons # 项目所有 svg icons
    │ ├── lang # 国际化 language
    │ ├── layout # 全局 layout
    │ ├── router # 路由
    │ ├── store # 全局 store管理
    │ ├── styles # 全局样式
    │ ├── utils # 全局公用方法
    │ ├── vendor # 公用vendor
    │ ├── views # views 所有页面
    │ ├── App.vue # 入口页面
    │ ├── main.js # 入口文件 加载组件 初始化等
    │ └── permission.js # 权限管理
    ├── tests # 测试
    ├── .env.xxx # 环境变量配置
    ├── .eslintrc.js # eslint 配置项
    ├── .babelrc # babel-loader 配置
    ├── .travis.yml # 自动化CI配置
    ├── vue.config.js # vue-cli 配置
    ├── postcss.config.js # postcss 配置
    └── package.json # package.json

  • 项目的运行方法

    安装依赖

    npm install

    http://www.taodudu.cc/news/show-2229491.html