现如今这四海八荒都在用vue啊!年前我手头新做一个运营平台,截图如下,前后端分离,费了半天劲终于把环境搭建起来了,年后有功夫了,特地整理下,希望大家能少走些弯路!
一、搭建环境
用官方的脚手架cli一步一步按流程走,我整理出的流程如下,参考官网指导 https://cn.vuejs.org/v2/guide/installation.html#NPM
1. npm install vue-cli webpack -g (全局安装vue脚手架和webpack)
2. 进入工程目录 vue init webpack my-project (初始化,输入有的没的)
3. cd my-project
4. npm install (安装项目依赖,一定要用npm,会比较慢)
5. npm install vue-router vue-resource --save-dev(安装 vue 路由模块vue-router和网络请求模块vue-resource)
6. npm run dev(本地运行)
7. npm run build(生成服务器build)
二、路由配置
前面搭建环境的时候已经安装了router了,在配置里直接调用就可以了,参考官方指导和demo https://router.vuejs.org/zh-cn/essentials/getting-started.html
由于代码里设计太多公司接口的东东,我就只展示部分路由代码了,framework.vue放的是路由的dom层,main.js是路由配置层
1.framework.vue
<ul>
<!-- home -->
<li>
<router-link to="/home" class="parent-title"><span class="glyphicon glyphicon-home"></span>Home</router-link>
</li>
<!-- 统计报表 -->
<li>
<a class="parent-title" v-on:click.self="menuFold($event)"><span class="glyphicon glyphicon-stats"></span>统计报表<span class="drop-arrow">◢</span></a>
<ul class="child-menu">
<router-link to="/stat/bandWidth">带宽统计</router-link>
</ul>
</li>
<!-- 业务监控 -->
<li>
<a class="parent-title" v-on:click.self="menuFold($event)"><span class="glyphicon glyphicon-hdd"></span>业务监控<span class="drop-arrow">◢</span></a>
<ul class="child-menu">
<router-link to="/monitor/pingInfo">丢包检测</router-link>
</ul