vue-cli项目开发从0到1的过程
女程序媛的修炼笔记
一直修炼,持续升级,打败内心懒惰的小怪兽
展开
-
vue+router.beforeEach实现登录验证路由拦截
1.在配置路由路径的文件夹里加上如下图的语句2.在main.js里添加3.login.vue<template> <div> <!-- 表单--> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> ...原创 2020-02-20 21:00:25 · 1442 阅读 · 0 评论 -
node+express框架搭建服务器(超详细)
1.首先在node环境下全局安装express2.安装express-generator这是一个快速应用生成器,通过使用express-generator可以快速生成一个应用骨架,帮助我们快速开发3.进入你项目想放置的文件夹并创建项目名express 项目名;(添加项目语法)注意,若出现如下不要慌张:解决方法如下步骤解决方法一:1.右键我的电脑,打开环境变量2.找到exp...原创 2020-02-15 17:38:38 · 4107 阅读 · 0 评论 -
监听滚动事件,实现导航栏吸顶css3动画效果--vue
功能描述:当子组件滚动到100时导航栏置顶(如下所示)之前:之后:动画效果功能实现主要代码(代码不完整,请理解代码选取自己需要的部分):实现思路:中间可滚动的部分是子组件,(大家,关注,我的)这一栏导航是父组件。步骤一:在父组件里监控子组件与父元素顶部的距离如下是在父组件中时:在子组件中时:若有疑惑请在下方留言...原创 2020-01-10 16:56:27 · 1267 阅读 · 0 评论 -
vue移动端页面中局部可滚动(纯css可实现)
功能描述:移动端页面局部滚动(如下所示)功能实现主要代码(代码只有主要功能实现的代码,不全,要理解摘取自己需要的部分):备注:重点就是class="textScroll"的样式,其余都是配角<template> <div class="textScroll"> <ul> <li class="textList"> ...原创 2020-01-08 17:49:24 · 4463 阅读 · 6 评论 -
vue的二级路由切换父组件图片不变
功能描述:点击二级路由切换时一级父路由样式依然保留,如下所示注意看页面地址变化功能实现代码(只展示主要代码,css样式请自行编写):注意:只需底部父组件代码改动,其他组件不变<template> <div> <keep-alive> <router-view></router-view> <...原创 2020-01-08 17:14:35 · 726 阅读 · 0 评论 -
Vue-cli webpack,element-ui搭建一个完整的项目
一.安装node环境1.打开电脑cmd命令提示符检测是否安装成功,如果出现版本号则安装成功若提示不是内部命令,请参考如下地址进行安装https://www.runoob.com/nodejs/nodejs-install-setup.html2.为了提高开发效率,可以使用淘宝镜像:输入:npm install -g cnpm –registry=https://registry.np...原创 2020-01-07 15:21:11 · 567 阅读 · 0 评论 -
vue底部导航点击切换图标及页面功能实现
功能需求:点击底部导航栏切换图片及页面(如下效果)(以下代码只展示重要部分,css等样式请自行编写)父组件代码(导航栏页)<template> <div> <keep-alive> <router-view></router-view> </keep-alive> <!--...原创 2020-01-07 14:26:18 · 6704 阅读 · 9 评论