frontEnd

前端: Vue

环境

$ npm -v
5.6.0
$ node -v
v9.3.0

如果命令不存在请先安装node.js

npm源设置

$ npm config set registry https://registry.npm.taobao.org  # 设置npm源到淘宝镜像
$ npm config get registry  # 查看npm源

依赖安装

前端使用的是 vue-element

安装的依赖包定义在package.json文件中, package.json文件格式说明

$ cd open_dnsdb/dnsdb_fe
$ npm install

运行

$ npm run dev

 DONE  Compiled successfully in 7771ms                                                                                                                                 18:52:03

> Listening at http://localhost:8081

调试

结合nginx使用, 可以和dnsdb程序一起进行编程调试。

nginx.conf参考配置：

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 80;
        server_name localhost;

        location /api {
            proxy_pass http://localhost:9001/api;
        }
        location /web {
            proxy_pass http://localhost:9001/web;
        }
        location / {
            proxy_pass http://localhost:8081;
        }
    }
    include servers/*;
}

打包

前端修改完成之后， 执行下面命令：

$ npm run pack_prod		# 编译，并打包静态文件到dnsdb

$ vim open_dnsdb/dnsdb_fe/package.json
...
"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
     ....
    "pack_prod": "npm run build && rm -rf ../dnsdb/static && cp -R ./dist/static ../dnsdb/static && cp ./dist/index.html ../dnsdb/templates/",
  },
  ....