vue使用element ui绘制界面
搭建 Vue 脚手架的过程主要依赖于 Vue CLI（命令行工具）。下面是一个简单的步骤指南，帮助你快速搭建一个 Vue 项目。
步骤 1：安装 Node.js
确保你的系统上已安装 Node.js。你可以在 Node.js 官网 下载并安装它。安装完成后，可以在终端中运行以下命令检查 Node.js 和 npm 的版本：
node -v
npm -v
步骤 2：安装 Vue CLI
打开终端，使用 npm 安装 Vue CLI：
bash
npm install -g @vue/cli
安装完成后，你可以使用以下命令检查 Vue CLI 的版本：
vue --version
步骤 3：创建一个新项目
使用 Vue CLI 创建一个新项目。你可以使用以下命令：
vue create my-project
将 my-project 替换为你的项目名称。
运行此命令后，CLI 会询问你选择一些配置选项，比如使用默认配置还是手动选择功能。根据你的需要选择相应的选项。
打开终端，使用 npm 安装 Vue CLI：
npm install -g @vue/cli
至此一个vue项目就创建完成了
安装element ui
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
查看是否安装成功
在package.json下查看是否有 “element-ui”: “^2.15.14”,
存在就基本上说明安装成功
引入element ui
完成之后可以测试一下是否成功
随便在element ui官网引入一个组件
<template><div class="about">
<el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button>
</el-row></div>
</template><script></script>
运行结果
说明安装成功
默认是有两个vue文件
如果想要进行添加
则需要在index中添加一部分
其中layout是你的创建的vue文件名
完了还要在app.vue里面进行添加
再打开你的网页查看是否多了一个页面，则完成
接下来就可以引入所需要的组件
比如可以引入一个简单的登录页面
<template><div class="home"><div class="login-container"><el-card class="login-card" shadow="hover"><h2 class="title">登录</h2><el-form :model="loginForm" ref="loginForm" :rules="rules" status-icon><el-form-item prop="username"><el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user" /></el-form-item><el-form-item prop="password"><el-inputv-model="loginForm.password"placeholder="请输入密码"prefix-icon="el-icon-lock"type="password"/></el-form-item><el-form-item><el-button type="primary" @click="handleLogin">登录</el-button><el-button @click="zhuce">注册</el-button></el-form-item></el-form></el-card></div></div>
</template><script>export default {data() {return {loginForm: {username: '',password: ''},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]}};},methods: {handleLogin() {this.$refs.loginForm.validate((valid) => {if (valid) {// 处理登录逻辑console.log('登录成功:', this.loginForm);this.$router.push({ name: 'layout' });} else {console.log('登录失败，表单验证失败');return false;}});},zhuce() {this.$router.push({ name: 'about' });}}};
</script><style scoped>
.login-container {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f2f5;background-image: url('@/assets/vuebeijing.jpg');background-size: cover;}.login-card {width: 400px;padding: 20px;
background-color: skyblue;}.title {text-align: center;margin-bottom: 20px;font-weight: bold;}
</style>
如果觉得太单调，可以引入样式或者
可以选择登录背景图片或者是颜色
跟所学的css是类似的
或者如果觉得登录按钮太常规，页可以自行进行更换。
表格和导航结合
可以分别引入表格和导航试一下
表格：
<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}}</script>
可以选择自己选择的表格类型，粘贴到自己的项目下
效果如下
导航亦如此
接下来可以做一下结合