Vue实战快速上手-vue+ElementUI

前言
创建工程
安装依赖
使用
- 创建组件
- 配置路由
- 导入路由
- 展示
- 运行
问题

前言

ElementUI是饿了么的官方组件库，可以将vue和ElementUI组合使用，这样可以更加快速的开发vue程序。
官方链接：

https://element.eleme.cn/#/zh-CN

创建工程

我们以管理员的身份进入命令行，进入我们一开始的目录下，创建一个名为Hello-vue的工程
命令：

vue init webpack hello-vue

安装依赖

我们进入我们创建的工程中，安装我们的依赖
安装vue-router

npm install vue-router@3.5.2 --save-dev

安装 element-ui

npm i element-ui -S

安装依赖

npm install

安装SASS加载器

cnpm install sass-loader node-sass --save-dev

启动测试

npm run dev

然后确定没有问题之后，用IDEA打开即可。

使用

我们先建立好基础工程，创建一个router文件夹用来存放我们的路由，创建views文件夹用来存放我们的视图组件。

创建组件

我们在views中创建我们的组件

Login.vue

<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-dialogtitle="温馨提示":visible.sync="dialogVisible"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: " 密码不可为空 ", trigger: '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>

Main.vue

<template><h1>首页</h1>
</template><script>
export default {name: "Main"
}
</script><style scoped></style>

配置路由

我们在router下面创建一个index.js来配置我们的路由

import Vue from 'vue';
import Router from 'vue-router'import Main from '../views/Main'
import Login from '../views/Login'
Vue.use(Router);export default new Router({routes:[{path: '/main',component: Main},{path: '/login',component: Login}]})

这里把我们创建的组件导入进来，并配置好相应的路由

导入路由

我们在main.js中将我们自己配置的路由导入，并且把ElementUi的配置也导入进来，详细可以看官网的快速上手。

import Vue from 'vue'
import App from './App'import router from './router'//导入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(router);
Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App),//ElementUIrouter
})

展示

我们在App.vue中进行展示

<template><div id="app"><router-view></router-view></div>
</template><script>export default {name: 'App',}
</script>

运行

在IDEA的命令行中输入npm run dev

问题

在输入完npm run dev之后报错

原因是sass版本太高了，要降级
我们默认安装的都是最新版本的

我们可以直接在package.json中直接进行修改

然后重新npm install即可
cnpm install sass-loader@7.3.1 node-sass --save-dev

node-sass版本推荐用4.14.1

node.js推荐用14.x

https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi

最新版本的东西问题真的很多！

Vue实战快速上手-vue+ElementUI相关推荐

Vue简单快速上手 idea版
文章目录版本插件安装和通过CDN使用Vue Vue的基本语法 v-bind 条件判断循环监听事件表单双绑 1.什么是双向数据绑定 2.在表单中使用双向数据绑定组件什么是组件第一个Vue ...
Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...
Vue 3 快速上手
Vue 3 快速上手官网: 配置环境变量和nodejs node vue 开发环境搭建第二天的时候,vue create xxx.xxx.xxx(项目名)失败! 前端项目问题解决 ==第二天修改环 ...
Vue实战项，基于Element-UI 电商管理系统源代码，含项目部署指南
电商项目基本业务概述根据不同的应用场景,电商系统一般都提供了 PC 端.移动 APP.移动 Web.微信小程序等多种终端访问方式,我们主要是实现PC后台管理系统. 1.2 电商后台管理系统的功能电 ...
快速上手vue的登录界面(最新版)
文章目录一.创建vue项目二.引入依赖三.改造下项目四.写入Login视图总结这是一个非常非常适合新手的vue登录界面,总体来说美观大气,axios那部分没有发,有需要的大家可以自己进行二 ...
2 snippets vue 修改配置_VSCode 自定义Vue snippets, 快速生成Vue模板
命令行 Ctrl+Shift+P # 选择 Configure User Snippets # 选择 Vue.json 原始的Vue.json { // Place your snippets for ...
Vue系列之十二: 实战快速上手
我们采用实战教学模式并结合ElementUI组件库,将所需知识点应用到实际中,以最快速度带领大家掌握Vue的使用: 12.1.创建工程注意:命令行都要使用管理员模式运行 1.创建一个名为hello- ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
【Vue实战】使用vue实现点击按钮，改变被点击按钮的样式。
1. 实现思路为每个按钮设置一个index: 为按钮设置点击事件获取到按钮点击事件以后,判断index,进而动态修改按钮的class 2. 代码实现 2.1 代码 <template> ...

Vue实战快速上手-vue+ElementUI

Vue实战快速上手-vue+ElementUI

前言

创建工程

安装依赖

使用

创建组件

配置路由

导入路由

展示

运行

问题

Vue实战快速上手-vue+ElementUI相关推荐

最新文章

热门文章