esc -o static.go admin
admin 是vue 打包出来得dist 文件夹。（只不过改了个名字， dist ->admin）
使用 vue-admin-template 项目。
// clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git
// enter the project directory
cd vue-admin-template
// install dependency
npm install
// develop
npm run dev
执行npm run build:prod
src 同级（项目根目录）目录创建admin 目录
拷贝vue build 出来得内容到admin 目录
gin 框架， / 后边必须有个名字， 一般就是/ filepath，表示多级目录
这时候 直接 GET /admin/就能访问我们的系统
容器部署即使用 docker 化部署 golang 应用程序，这是在云服务时代最流行的部署方式，也是最推荐的部署方式。
跨平台交叉编译是 golang 的特点之一，可以非常方便地编译出我们需要的目标服务器平台的版本，而且是静态编译，非常容易地解决了运行依赖问题。
使用以下指令可以静态编译 Linux 平台 amd64 架构的可执行文件：
生成的 main 便是我们静态编译的，可部署于 Linux amd64 上的可执行文件。
我们需要将该可执行文件 main 编译生成 docker 镜像，以便于分发及部署。 Golang 的运行环境推荐使用 alpine 基础系统镜像，编译出的容器镜像约为 20MB 左右。
一个参考的 Dockerfile 文件如下：
其中，我们的基础镜像使用了 loads/alpine:3.8 ，中国国内的用户推荐使用该基础镜像，基础镜像的 Dockerfile 地址： https://github.com/johngcn/dockerfiles ，仓库地址： https://hub.docker.com/u/loads
随后使用 " docker build -t main . " 指令编译生成名为 main 的 docker 镜像。
需要注意的是，在某些项目的架构设计中， 静态文件 和 配置文件 可能不会随着镜像进行编译发布，而是分开进行管理和发布。
例如，使用 MVVM 模式的项目中(例如使用 vue 框架)，往往是前后端非常独立的，因此在镜像中往往并不会包含 public 目录。而使用了 配置管理中心 (例如使用 consul / etcd / zookeeper )的项目中，也往往并不需要 config 目录。
因此对于以上示例的 Dockerfile 的使用，仅作参考，根据实际情况请进行必要的调整。
使用以下指令可直接运行刚才编译成的镜像：
容器的分发可以使用 docker 官方的平台： https://hub.docker.com/ ，国内也可以考虑使用阿里云： https://www.aliyun.com/product/acr 。
在企业级生产环境中， docker 容器往往需要结合 kubernetes 或者 docker swarm 容器编排工具一起使用。
容器编排涉及到的内容比较多，感兴趣的同学可以参考以下资料：
Vue.js很简单。正因为如此简单，人们常常认为其适合于小项目。虽然真正的Vue.js核心知识只是一个视图层库，实际上有一组工具，将使您能够使用Vue.js构建完整的大规模SPA（单页应用程序）。SPA应用可以在不完全重新加载网页，产生一个更流畅的用户体验到的用户交互响应。还有好的副作用，SPA还鼓励后端专注于展示数据端点，这使得整体架构更加分离，并且对于其他类型的客户端可能是可重用的。
从开发人员的角度来看，SPA和传统的后端呈现应用程序之间的主要区别是，我们必须将客户端视为具有自己架构的应用程序。通常，我们需要处理路由，数据获取和持久性，查看渲染和必要的构建设置，以便于模块化代码库。
对于基于Vue.js的SPA，下面工具将帮助你：
1.视图层：Vue.js
2.路由：vue-router，Vue的官方路由器
3.状态管理：vuex，受Flux/Redux启发的状态管理解决方案
4.服务通讯：vue-resource这是和RESTful后端交互的接口
5.构建工具：Webpack和vue-loader进行模块 热刷新ES2015和预处理器等重要的组件
视图层
本系列假设您已经熟悉Vue.js的基础知识，将Vue.js用于大型SPA时的核心概念是：将应用程序分为许多嵌套的自定义组件。在数据流的组件熟悉props和通讯定义事件直接进行平衡设计，将复杂组件切分为小型解耦的单元，更易于维护。
路由器
官方VUE路由器库处理客户端的路由，同时支持哈希模式和HTML5的历史模式。它与独立路由库有点不同，它与Vue.js深度集成，并假设我们将嵌套路由映射到嵌套Vue组件。
当使用vue-router时，我们将组件作为“pages”实现，使用这些组件能够实现党路由变化时，钩子函数被调用。
状态管理
状态管理是只有当应用程序复杂性超过一定水平时才出现。当有多个组件需要共享可变的应用程序状态时，如果您的应用程序中没有专用于管理此类共享状态的层，则可能很难推理和维护。
服务器通信
在本案例中，我们会使用RESful后端，这是一个Go语言编写的 go-vue-event项目
构建工具
首先，整个编译工具链依靠的Node.js ，管理所有使用库包和工具依赖NPM 。 虽然NPM开始是Node.js后端模块的包管理器，但它现在也广泛用于前端包管理。 因为所有NPM包是使用CommonJS模块格式创建的，我们需要一个特殊的工具将这些模块“捆绑”到适合最终部署的文件中。 Webpack就是这样一个工具，你可能也听说过一个类似的工具Browserify。
我们将使用Webpack的系列，因为它提供了更多的高级功能开箱即用，如热重新加载，bundle-splitting和静态文件处理。
无论WebPACK中和Browserify它们暴露的API，使我们能够装载更多的CommonJS的模块：例如，我们可以直接require()的HTML文件通过将其转化成一个JavaScript字符串。
通过将你的前端的一切，包括HTML，CSS甚至图像文件看作为模块依赖，可以在捆绑过程中任意转换，Webpack实际上涵盖了构建SPA时遇到的大多数构建任务。 我们主要是要使用WebPACK和普通 NPM脚本 ，而不需要 任务运行器如Gulp或Grunt。
使用vue-loader 激活单页中Vue组件：
//app.vue <template> <h1 class="red">{{msg}}</h1> </template> export default{ data(){ return{ msg:'Hello world!' } } } <style> .red{ color:#f00 } </style>
WebPACK和vue-loader组合能带来：
：
1.默认情况下ES2015。 这允许我们今天使用未来的JavaScript语法，产生更具表达性和简洁的代码。
2.预埋处理器 。 您可以在单文件Vue组件中使用预处理器，例如使用Jade作为模板，使用SASS作为样式。
3.Vue组件内部CSS输出将自动加前缀。 您也可以使用任何PostCSS插件，如果你喜欢。
4.作用域CSS。 通过增加一个scoped属性添加到<style>，VUE-loader将通过重写模板和样式模拟输出，特定组件的范围内的CSS不会影响应用程序的其他部分。
5.热刷新 。在开发过程中编辑Vue组件时，组件将“热切换”到正在运行的应用程序中，在不重新加载页面的情况下维护应用程序状态。 这极大地提高了开发体验。
开始设置
现在有了所有这些花哨的功能，对于自己组装构建栈可能是一个非常艰巨的任务！ 幸运的是，Vue公司提供vue-cli ，一个命令行界面，十分容易上手：
npm install -g vue-cli vue init webpack my-project
回答提示，CLI具有开箱即用特点。 所有你需要做的下一步是：
cd my-project npm install # install dependencies npm run dev # start dev server at http://localhost:8080
以上所述是小编给大家介绍的使用Vue.js创建一个时间跟踪的单页应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
