2020/6/30 学习知识汇聚平台：Vue搭建尝试-CSDN博客

本文链接：https://blog.csdn.net/weixin_43398608/article/details/118356638

本次开发主要在搭建好Vue环境的基础上，进行了简单的Vue界面开发尝试：

一、Vue添加页面

1.创建文件

进入项目的components文件夹下，右键创建文件DashBoard.vue

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

2 修改路由文件

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

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

import DashBoard from '@/components/DashBoard'

在routes数组中添加一个对象：

{
path: '/dashboard',
name: 'DashBoard',
component: DashBoard
}

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

发现创建页面成功

二、element创建布局

官网：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>

然后引入element，官网解释如下：

修改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/>'
})

保存运行一下，就可以得到左右分布的界面了