一项目创建步骤

二删除不必要的文件

三删除不必要的代码

四安装 element-ui

五启动项目

六测试

七正式编写的代码

八测试效果

九源码地址

一项目创建步骤

1 创建项目

vue create ele-components

2 选择必要组件

? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
(*) CSS Pre-processors
>( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

3 路由模式选择history模式

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

4 预处理器选择 node-sass

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)LessStylus

5 选择默认配置文件

> In dedicated config filesIn package.json

6 不保存为预制项目

? Save this as a preset for future projects? (y/N) n

7 使用npm安装依赖

? Pick the package manager to use when installing dependencies:Use Yarn
> Use NPM

8 安装过程

Vue CLI v4.3.1
✨  Creating project in F:\vue\ele-components\ele-components.
⚙️  Installing CLI plugins. This might take a while...

二删除不必要的文件

About.vue

HelloWord.vue

三删除不必要的代码

1 index.js删除后的样子

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: Home}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

2 Home.vue删除后的样子

<template><div>home</div>
</template>
<script>export default {name: 'Home',components: {}
}
</script>

3 APP.vue删除后的样子

<template><div><router-view/></div>
</template><style lang="scss">
</style>

四安装 element-ui

cnpm i -S element-ui

五启动项目

npm run serve

六测试

1 浏览器输入 http://localhost:8080/

2 界面呈现如下

七正式编写的代码

1 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 导入ElementUI
import ElementUI from 'element-ui'
// 导入ElementUI的样式
import 'element-ui/lib/theme-chalk/index.css'
// 导入全局组件
import './globalComponents'
// 使用导入ElementUI
Vue.use(ElementUI)
Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

2 Home.vue

<!--主页面-->
<template><div><el-button type="primary" @click="goTo('/backTopOne')">去往页面1</el-button><el-button type="primary" @click="goTo('/backTopTwo')">去往页面2</el-button></div>
</template>
<script>export default {name: 'Home',components: {},methods: {/*页面跳转*/goTo(path) {this.$router.push(path)}}}
</script>

3 BackTopOne.vue

<template><div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div><div>这是回到顶部页面1</div></div>
</template><script>export default {name: "BackTopOne"}
</script><style scoped>
</style>

4 BackTopTwo.vue

<template><div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div><div>这是回到顶部页面2</div></div>
</template><script>export default {name: "BackTopTwo"}
</script><style scoped>
</style>

5 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: Home},{path: '/backTopOne',name: 'backTopOne',component: () => import('../views/BackTopOne')},{path: '/backTopTwo',name: 'backTopTwo',component: () => import('../views/BackTopTwo')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

6 ele-components\src\globalComponents\index.js

/*注册全局组件*/
import Vue from "vue"
import BackTop from "../components/backTop/BackTop"Vue.component('backTop',BackTop)

八测试效果

九源码地址

https://gitee.com/cakin24/ele-components

Element-UI组件实现全局回到顶部功能相关推荐

elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
锚点定位跳转到指定位置回到顶部功能
一.跳转到指定位置项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息数据 arrayList:[{ //不一一列出 ...
（7）＜a＞标签之锚点和回到顶部功能
一.什么是锚点? 这里,我们拿京东官网举例,如下图可以看到京东官网首页右侧的导航条选项卡,当我们点击其中一个选项卡的时候,他会自动给你定位跳到当前页的符合该选项卡标题的位置,省去我们从上往下鼠标滚轮一 ...
javascript实现页面中回到顶部功能
当一个页面比较长的时候,在下拉页面到一定长度的时候,页面右下角通常会出现一个回到顶部的图标,点击即可以回到页面顶部,本案例对这一功能进行了简单实现.当页面下拉到一定长度后,页面右下角出现一个回到顶部图 ...
Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉
1.Image 图片图片容器,在保留原生img的特性下,支持懒加载,自定义占位.加载失败等. 基础用法可通过fit确定图片如何适应到容器框,同原生 object-fit. <div clas ...
vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
浏览器刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...
Element UI组件介绍
简介 element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面. 1.安装Element UI,通过vue脚手架创建项 vue init webpa ...

Element-UI组件实现全局回到顶部功能

一项目创建步骤

二删除不必要的文件

三删除不必要的代码

四安装 element-ui

五启动项目

六测试

七正式编写的代码

八测试效果

九源码地址

Element-UI组件实现全局回到顶部功能相关推荐

最新文章

热门文章

Element-UI组件实现全局回到顶部功能

一 项目创建步骤

二 删除不必要的文件

三 删除不必要的代码

四 安装 element-ui

五 启动项目

六 测试

七 正式编写的代码

八 测试效果

九 源码地址

Element-UI组件实现全局回到顶部功能相关推荐

最新文章

热门文章

一项目创建步骤

二删除不必要的文件

三删除不必要的代码

四安装 element-ui

五启动项目

六测试

七正式编写的代码

八测试效果

九源码地址