vue2.0环境搭建（含router路由）

最新推荐文章于 2024-07-09 15:12:53 发布

lemon678

最新推荐文章于 2024-07-09 15:12:53 发布

阅读量1.3w

点赞数 5

文章标签： vue router

本文链接：https://blog.csdn.net/lemon_zhao/article/details/55509903

版权

本文详述了Vue2.0的环境搭建步骤，从全局安装vue-cli和webpack，到初始化项目，安装vue-router和vue-resource，以及本地运行和构建。接着介绍了如何配置路由，并展示了部分关键代码。最后提到了前端登录验证机制，通过token管理登录状态。

摘要由CSDN通过智能技术生成

现如今这四海八荒都在用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