目录
一 项目创建步骤
二 删除不必要的文件
三 删除不必要的代码
四 安装 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删除后的样子
home
3 APP.vue删除后的样子
四 安装 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
去往页面1
去往页面2
3 BackTopOne.vue
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
这是回到顶部页面1
4 BackTopTwo.vue
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
这是回到顶部页面2
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组件实现全局回到顶部功能】https://gitee.com/cakin24/ele-components
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结
- vue|电商后台管理系统(vue+python|node.js)
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- Vue|vue-router 详解
- vue|vue3替代vuex的框架piniajs实例教程
- Vue|Vue3.0的插槽是如何实现的()
- 前端|面试官(谈谈Vue和React的区别())