vue使用ElementUI搭建精美页面入门

ElementUI简直是css学得不好的同学的福音

ElementUI官网:

 Element - The world's most popular Vue UI framework

安装

在vue文件下,用这个命令去安装Element UI。

npm i element-ui -S

step1\先切换到vue的目录下去,注意这里面的WARN不是报错。红框里的内容提示我们此时添加了九个包。

然后在node_modules里能看到element-ui的安装包

引入

在main.js中引用代码,在原有代码基础上再添加这三行即可:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

然后新建一个名叫Element.vue的页面

然后页面中输入以下代码:

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div style="width:100%;height:300px;background-color:dodgerblue"></div>
      </el-col>
      
      <el-col :span="12">
        <div style="width:100%;height:300px;background-color:red"></div>
        
      </el-col> 
       
    </el-row>
    
  </div>
  
  
</template>

此时启动该文件的运行有以下几种方法:

1、在我博客《vue2入门》结尾处写了如何配置启动的快捷方式

2、在终端输入命令运行:

MacBook-Pro-2 vue % npm run serve

看到这样的结果就算是运行成功了

而此时我们还要添加路由,才能访问到Element.vue

在router/index.js文件const routes下添加路由:

 {
    path: '/element',
    name: 'Element',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Element.vue')
  }

然后直接在地址栏里加上/Element

然后自己多去官网看文档就好了。

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Vue和Element UI来搭建一个个人中心页面。首先,确保你已经安装了Vue和Element UI。 1. 创建一个Vue组件,可以命名为"PersonalCenter",并在其中引入Element UI的相关组件: ```vue <template> <div> <el-card> <el-row> <el-col :span="6"> <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleMenuSelect"> <el-menu-item index="1">基本信息</el-menu-item> <el-menu-item index="2">订单记录</el-menu-item> <!-- 其他菜单项 --> </el-menu> </el-col> <el-col :span="18"> <el-card> <div v-show="activeMenu === '1'"> <!-- 基本信息内容 --> </div> <div v-show="activeMenu === '2'"> <!-- 订单记录内容 --> </div> <!-- 其他菜单对应的内容 --> </el-card> </el-col> </el-row> </el-card> </div> </template> <script> export default { data() { return { activeMenu: '1' // 默认显示基本信息内容 }; }, methods: { handleMenuSelect(index) { this.activeMenu = index; } } }; </script> <style scoped> .el-card { margin: 20px; } </style> ``` 2. 在你的Vue实例中使用这个组件: ```vue <template> <div id="app"> <PersonalCenter/> </div> </template> <script> import PersonalCenter from "./components/PersonalCenter.vue"; export default { components: { PersonalCenter } }; </script> <style> #app { text-align: center; } </style> ``` 这样,你就可以在你的个人中心页面使用Element UI的组件来构建各种功能模块了。根据具体需求,你可以在"PersonalCenter"组件中添加更多的菜单项和对应的内容。记得按照Element UI的文档来使用其提供的各种组件和功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值