跳转至

前端开发手册

本手册旨在于帮助前端开发人员快速熟悉PC与APP前端技术架构，以快速进入开发角色。

软件安装

  • Nginx：参考官方安装文档即可

  • nodeJs：版本要求8.11.3及以上，参考官方文档安装并配置环境变量即可

  • npm：nodejs的包管理器，新版nodejs集成了npm，通过输入 "npm -v" 查看版本来测试是否成功安装

  • cnpm：npm的阿里巴巴开源镜像站

    npm install -g cnpm --registry=https://registry.npm.taobao.org

  • gulp：前端自动化构建工具

    // 安装全局gulp
npm install –g gulp

  • VSCode：下载安装即可，安装如下插件：

  • ESLint：代码规范检查插件

  • vscode-sleet：sleet文件格式化与编译插件
  • Vue 2 Snippets：vue文件高亮与语法补全插件

启动工程

前端

控制台切换到zxy-management-frontend前端工程，

b) 运行 npm install命令

c) 运行gulp命令 如果没有什么问题，出现的节目如下：

重启nginx即可，这个时候访问http://localhost/ 跳转到登陆页面 https://dev9.zhixueyun.com/oauth/#login/cmVzcG9uc2VfdHlwZT10b2tlbiZjbGllbnRfaWQ9OTk5JnJlZGlyZWN0X3VyaT1odHRwcyUzQSUyRiUyRmRldjkuemhpeHVleXVuLmNvbSZzdGF0ZT0lMkZob21l

输入用户名

admin,

密码

zxy123456

登陆，成功跳转回来

http://localhost,

说明配置登录成功。

配置与说明

代理

  • 方法一：Nginx代理
# 后端代理，human为后端模块
location ^~ /api/v1/human {
        proxy_pass https://dev9.zhixueyun.com/api/v1/human;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# 前端代理
location / {
    proxy_pass http://localhost:8001/;
}

点此下载 nginx.conf

  • 方法二：前端http-proxy-middleware代理，在zxy-student-frontend的gulpfile.js中配置
const serve = (dir, path = '/', fn) => {
    // some code
    // 前端默认代理到指定环境，详见前端架构说明，如需单独代理，在此加上代理项，示例如下：
    app.use('/api/v1/custom', proxy({ target: 'http://localhost:8888', changeOrigin: true }))
    // other code
    paths.forEach(p => app.use(p, proxy(opt)))
}