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

目录
一 项目创建步骤
二 删除不必要的文件
三 删除不必要的代码
四 安装 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) Less Stylus

5 选择默认配置文件
> In dedicated config files In 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删除后的样子

3 APP.vue删除后的样子

四 安装 element-ui
cnpm i -S element-ui

五 启动项目
npm run serve

六 测试 1 浏览器输入http://localhost:8080/
2 界面呈现如下
Element-UI组件实现全局回到顶部功能
文章图片

七 正式编写的代码 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

3 BackTopOne.vue

4 BackTopTwo.vue

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)

八 测试效果 Element-UI组件实现全局回到顶部功能
文章图片

九 源码地址 【Element-UI组件实现全局回到顶部功能】https://gitee.com/cakin24/ele-components

    推荐阅读