![](https://img-blog.csdnimg.cn/20210924190401354.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js项目实战开发
学习VUE.js开发时,作的相关笔记
youlong2014
落花有意,流水无情
展开
-
P352节 vue开发的前端项目,如何进行部署
2.1项目上线相关配置1.利用node创建web服务器创建node项目,并安装express,通过express快速创建web服务器,将vue打包生成的dist文件夹,托管为静态资源即可。使用node建立web服务器的关键代码如下:const express = require('express')//创建web服务器const app = express()// 托管静态资源app.use(express.static('./dist'))//启动web服务器app.list原创 2021-09-24 18:41:19 · 169 阅读 · 0 评论 -
P172. 25.路由导航守卫控制访问权限
//如果用户没有登录,但是直接通过RUL访问特定页面,需要重新导航到登录页面,实现的路由导航守卫控制访问权限的代码如下://为路由对象,添加beforeEach导航守卫router.beforeEach((to,form,next)=>{//如果用户访问的登录页,直接放行if(to.path==='/login')returnnext()//从sessionStorage中获取保存的token值consttokenStr...原创 2021-09-24 10:47:42 · 89 阅读 · 0 评论 -
P170. 23.登录组件配置弹窗提示
在使用element-UI进行编程时,如何实现不同格式的弹框呢?在入口文件中,需要引入弹框提示组件,引入的代码如下所示//导入弹框提示组件import { Message } from 'element-ui'//将弹框组件挂载到了Vue的原型对象上,这样的话,每一个组件都是可以通过this来访问到$message//只要访问到$message就可以进行弹框提示了Vue.prototype.$message = Message在需要谈提示框的地方,所使用的方法//.原创 2021-09-24 09:42:59 · 121 阅读 · 0 评论 -
el-form如何拿到表单的实例对象
只需要在el-form中,添加一个ref属性,该属性就是存放该组件的实例对象的<template> <div> <el-form ref="loginFormRef"> <el-form-item ><el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item&原创 2021-09-23 18:51:50 · 1397 阅读 · 0 评论 -
P165登录组件数据绑定
VUE.js表单验证规则的添加基本步骤1、el-form通过属性绑定rules指定校验对象<el-form :model="ruleForm" :rules="rules"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item></el-form>.原创 2021-09-22 22:57:28 · 82 阅读 · 0 评论 -
P161. 14.登录组件布局的布局中
P161. 14.登录组件布局的布局中在对登录组件进行布局时,需要编写login_form在对form表单进行定位时,需要用到CSS的box-sizing属性,将其修改为border-boxbox-sizing的默认属性值为content-box,使用默认值设置时,设计的界面存在的问题为两个文本框将超出form表单的范围。修改之前的代码为: .login_form { position: absolute; bottom: 0; widt原创 2021-09-22 21:25:55 · 51 阅读 · 0 评论