Vue之修改项目

项目创建完后，网页为初始界面，那么怎么创建属于自己的页面呢？

一、创建新页面

1、创建vue文件

进入项目的components文件夹下，右键新建一个vue文件：Dashboard.vue。

2、DashBoard写入内容

打开HelloWorld，把里面的内容复制到新创建的DashBoard中。把data中对应的msg修改为dashboard，把name也修改为DashBoard

3、修改路由文件

打开route文件夹下index.js文件。

在开头导入新创建的vue文件，其实是模块。

import DashBoard from '@/components/DashBoard'

4、在routes数组中添加一个对象

{

path: '/dashboard',

name: 'DashBoard',

component: DashBoard

}

5、此时保存访问一下地址：http://localhost:8080/#/dashboard

访问后说明我们已经成功添加了页面。但是发现地址栏目里多了个#号

6、在router对象里添加属性mode:'history'

再次访问http://localhost:8080/dashboard,没有#号

为什么不用#，选择history

二、element引入

element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

官网：http://element-cn.eleme.io

1、安装

npm i element-ui -S

打开项目中的package.json，在dependencies中可以发现element已经被添加了

 

 

2、创建布局

官网中已经提供了代码，此时我们拿来用即可，直接复制官网代码。

修改本地app.vue文件如下：

<template>
  <div id="app">
    <div id="top"></div>
    <div id="aside">
      <el-menu router="true">
        <el-menu-item index="/dashboard">
          <i class="el-icon-location"></i>
          <span slot="title">仪表盘</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>博客管理</span>
          </template>
          <el-menu-item index="/newarticle">
            <i class="el-icon-edit"></i>
            <span>新建博文</span>
          </el-menu-item>
          <el-menu-item index="1-2">
            <i class="el-icon-document"></i>
            <span>博客列表</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu>
          <template slot="title">
            <i class="el-icon-message"></i>
            <span>留言管理</span>
          </template>
          <el-menu-item index>
            <i class="el-icon-time"></i>
            <span>最新留言</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div id="main">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#top {
  padding: 0px;
  position: absolute;
  height: 50px;
  line-height: 50px;

  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #409eff;
  color: white;
}

#main {
  position: absolute;
  top: 50px;
  left: 230px;
  right: 0px;
  bottom: 0px;
}

#aside {
  position: absolute;
  left: 0px;
  top: 50px;
  width: 230px;
  bottom: 0px;
}

#aside el-menu {
  margin: 0px;
}

#footer {
  position: absolute;
  bottom: 0px;
  left: 230px;
  right: 0px;
  text-align: center;
  height: 30px;
  background-color: aqua;
  line-height: 30px;
}
</style>

 

保存运行一下，发现并没有出现自己期望的布局样式，查看一下官网，官网有如下提示：

 

 所以修改自己的main.js文件，代码如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

注：

1、menu有一个router属性 设置为true时候可直接调用index指向的链接地址，即可实现导航。

 2、解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题

在router文件夹下直接添加如下代码

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}