从设计到前端，从前端到服务端

时间 2019-11-13

标签设计前端服务繁體版

原文原文链接

这几天试着将一个网站开发的全链路走了一遍，从Axure设计，使用webpack和Vue作前端开发，用Spring Boot做为后台，感受已经从java程序员变成了全能程序员！css

Axure是产品经理和前端使用的用来设计界面的工具，它能够直接生成html和相关的css，js，png等资源。html

前端开发若是能够复用Axure的生成文件，能够节省很多时间。前端框架使用Vue，因此不须要使用js等文件，在Axure设计的时候，只关注界面设计，而不用添加事件响应等动态内容。使用Vue Router来作页面路由，因此Axure设计时也不要使用模板。前端

一设计页面vue

打开Axure，新建工程，建立三张页面以下（每一个页面在后期Vue项目中对应一个component）：java

对每张页面设计内容，Home：jquery

Generator：程序员

页面设计只要托托拽拽就能完成，input可经过属性Type修改来作限制，设计完成以后能够经过Publish->Generate HTML Files...产生后期要用的html。web

产生以后的目录结构如：vue-cli

其中index.html, start.html, start_c_1.html, start_g_0.html都是Axure使用的中间文件，真正用到的是home.html, register.html, generator.html和包含资源的文件夹。

二建立Vue工程

1) 安装Node.js

2) 安装cnpm： npm install -g cnpm --registry=http://registry.npm.taobao.org

3) 全局安装webpack：cnpm install webpack -g

4) 全局安装vue-cli: cnpm install -g vue-cli

5) 用webpack模板建立一个vue项目：vue init webpack my-project

6) 安装项目依赖：cd my-project / cnpm install

7) 启动项目，用IntelliJ IDEA打开my-project文件夹

8) 编译：在my-project中，npm run build

编译完之后会在dist目录下生成index.html和static文件夹：

三将Axure的生成文件和Vue项目结合

1）能够将Axure文件生成的目标文件设置为src，将home.html, register.html, generator.html分别包装成三个vue。

首先处理主页home.html, 将html文件中<body>中的内容拷贝到对应App.vue文件的<template>中（注意保留第二层id为app的div）

拷贝过程当中注意资源文件的引用路径

将file/home/data中的styles.css的内容拷贝到App.vue的<style>中

html额外应用的三个css文件须要在main.js中import进来：

import './data/styles.css'
import './resources/css/jquery-ui-themes.css'
import './resources/css/axure_rp_page.css'

在src/components中建立Register.vue和Generator.vue，按照处理home.html的方法，将register.html和generator.html中的内容拷贝到vue中。

2）页面路由设置

在src中建立router.config.js, 内容以下：

import Register from './components/Register.vue'
import Generator from './components/Generator.vue'

export default{
  routes: [
    {path: '/register', component: Register},
    {path: '/generator', component: Generator}
  ]
}

在main.js中添加路由信息：

在App.vue <template>的合适位置添加

<router-view></router-view>

<router-link to="/register">注册页面</router-link>

<router-link to="/generator">注册码生成</router-link>

四编译前端

修改config/index.js

将assetsPublicPath改成./（编译以后index.html引用资源的相对路径）

将devtool改成eval-source-map（方便打包以后调试）

使用npm run build打包。

五将打包的前端代码上传服务端

可将static文件夹直接拷贝到resources下，将index.html拷贝到resources/templates下，在Controller中将index.html包装成一个view。

启动服务端！！

参考：

https://www.cnblogs.com/alantao/p/8477907.html

https://blog.csdn.net/zilaike/article/details/82665922