Vue系列教程(18)- 集成UI框架(ElementUI)

简介: Vue系列教程(18)- 集成UI框架(ElementUI)

1. 引言

通过前面的章节,我们已经学会了使用vue-router来实现页面的跳转,有兴趣的同学可以参阅下:

目前我们的案例界面都是比较简单的,网上其实有很多好看的UI框架,它们很好的兼容了Vue,本文以ElementUI为例作一个讲解。

2. ElementUI案例

ElementUI官网地址:https://element.eleme.cn/#/zh-CN

ElementUI 是网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

2.1 创建项目

① 新建elui-demo项目:

vue create elui-demo

③使用vscode导入:

2.2 安装依赖

这里需要安装vue-router、element-ui、sass-loadernode-sass四个插件。

① 在vscode菜单栏,依次Terminal -> new Terminal,打开控制台后,安装依赖:

#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev

npm命令解释:

  • npm install moduleName:安装模块到项目目录下
  • npm install -g moduleName:-g的意思是将模块安装到全局,具体安装到磁盘哪个位置要看npm config prefix的位置
  • npm install -save moduleName–save的意思是将模块安装到项目目录下, 并在package文件的dependencies节点写入依赖,-S为该命令的缩写
  • npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖,-D为该命令的缩写

2.3 创建页面

components文件夹创建登录页面(Login.vue),可以直接复制ElementUI的代码过来:

<template>
  <div>
    <el-form
      ref="loginForm"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="login-box"
    >
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input
          type="text"
          placeholder="请输入账号"
          v-model="form.username"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          placeholder="请输入密码"
          v-model="form.password"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onsubmit('loginForm')"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisiable"
      width="30%"
      :before-close="handleClose"
    >
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      //表单验证,需要在 el-form-item 元素中增加prop属性
      rules: {
        username: [
          { required: true, message: "账号不可为空", trigger: "blur" },
        ],
        password: [{ required: true, message: "密码不可为空", tigger: "blur" }],
      },
      //对话框显示和隐藏
      dialogVisible: false,
    };
  },
  methods: {
    onSubmit(formName) {
      //为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //使用vue-router路由到指定界面,该方式称为编程式导航
          this.$router.push("/main");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

components文件夹创建主页面(Main.vue):

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/login">跳转到登录页面</router-link>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "Main",
};
</script>
<style scoped>
</style>

2.4 配置路由

① 配置router文件夹下的index.js文件,内容如下:

//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../components/Main";
import Login from "../components/Login";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
  routes: [
    {
      //首页
      path: '/main',
      component: Main
    },
    //  默认首页
    {
      path: '/',
      redirect: '/main'
    },
    //登录页
    {
      path: '/login',
      component: Login
    },
  ]
})

App.vue里引入路由布局,代码如下:

<template>
  <div id="app">
    <router-view/>
  </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;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

main.js引入路由和ElementUI:

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.use(router)
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

2.5 运行程序

运行程序:

npm run serve

可以看到报错了(解决方案参考:https://blog.csdn.net/qq_43610311/article/details/116736803):

这是因为sass-loader的版本过高导致的编译错误,需要退回到7.3.1,输入以下命令:

# 卸载当前版本
npm uninstall sass-loader
npm uninstall node-sass
# 安装
sudo cnpm install sass-loader@7.3.1 --save-dev
sudo cnpm install node-sass@4.14.1

运行的结果:

点击跳转:

目录
相关文章
|
19天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
95 1
|
4天前
|
人工智能 开发框架 前端开发
探索移动应用开发的未来:从跨平台框架到人工智能集成
【6月更文挑战第20天】随着移动设备的普及,移动应用开发领域不断演进,涌现出多种创新技术和工具。本文将深入探讨跨平台开发框架的兴起、人工智能在移动应用中的集成以及未来移动操作系统的发展趋势。我们将分析Flutter和React Native等流行框架如何简化开发流程,同时考察AI技术如何提升用户体验。此外,文章还将预测移动操作系统的发展方向,为开发者提供前瞻性的见解和建议。
13 3
|
22天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
23 3
|
25天前
|
JavaScript Java 测试技术
基于ssm+vue.js的框架失物招领信息交互平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js的框架失物招领信息交互平台附带文章和源代码设计说明文档ppt
16 1
|
26天前
|
JavaScript 前端开发 API
Vue与其他框架的对比优势
【5月更文挑战第30天】Vue与其他框架的对比优势
18 1
|
26天前
|
JavaScript 前端开发 API
Vue.js是一个构建用户界面的渐进式框架
【5月更文挑战第30天】Vue.js是一个构建用户界面的渐进式框架
23 1
|
26天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
28天前
|
JavaScript Java 测试技术
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
22 1
|
8天前
|
JavaScript 前端开发 编译器
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
17 0
|
1月前
|
编解码 人工智能
DiT架构大一统:一个框架集成图像、视频、音频和3D生成,可编辑、能试玩
【5月更文挑战第23天】研究人员提出Lumina-T2X框架,统一生成和编辑图像、视频、音频及3D内容。使用Flow-based Large Diffusion Transformer (Flag-DiT)模型,实现多模态生成,支持内容编辑。尽管面临训练资源需求高、生成质量不及人类创作等问题,该框架在娱乐、广告等领域有广泛应用潜力。[论文链接](https://arxiv.org/pdf/2405.05945)
43 1