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) }