Vue Page Transition 开源项目教程

最新推荐文章于 2024-08-22 09:17:29 发布

房耿园Hartley

最新推荐文章于 2024-08-22 09:17:29 发布

阅读量262

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00081/article/details/141373845

版权

Vue Page Transition 开源项目教程

vue-page-transitionA lightweight Vue.js plugin for page / route transitions.项目地址:https://gitcode.com/gh_mirrors/vu/vue-page-transition

1. 项目的目录结构及介绍

Vue Page Transition 项目的目录结构如下：

vue-page-transition/
├── dist/
├── examples/
├── src/
│   ├── components/
│   │   ├── BaseTransition.vue
│   │   ├── PageTransition.vue
│   │   └── index.js
│   ├── index.js
│   └── styles/
│       └── main.scss
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

dist/: 打包后的文件目录。
examples/: 示例代码目录。
src/: 源代码目录。
- components/: Vue 组件目录。
  - BaseTransition.vue: 基础过渡组件。
  - PageTransition.vue: 页面过渡组件。
  - index.js: 组件入口文件。
- index.js: 项目入口文件。
- styles/: 样式文件目录。
  - main.scss: 主要样式文件。
.babelrc: Babel 配置文件。
.editorconfig: 编辑器配置文件。
.eslintrc.js: ESLint 配置文件。
.gitignore: Git 忽略文件配置。
.npmignore: npm 忽略文件配置。
.travis.yml: Travis CI 配置文件。
LICENSE: 项目许可证。
package.json: 项目依赖和脚本配置。
README.md: 项目说明文档。
webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，该文件主要负责导出项目的主要组件 PageTransition。

import PageTransition from './components/PageTransition.vue';

export default PageTransition;

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "vue-page-transition",
  "version": "1.2.0",
  "description": "Easy route and nested view transitions for Vue.js",
  "main": "dist/vue-page-transition.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development --watch",
    "lint": "eslint --ext .js,.vue src",
    "prepublishOnly": "npm run lint && npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Orlandster/vue-page-transition.git"
  },
  "keywords": [
    "vue",
    "transition",
    "page",
    "route",
    "animation"
  ],
  "author": "Orlandster",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Orlandster/vue-page-transition/issues"
  },
  "homepage": "https://github.com/Orlandster/vue-page-transition#readme",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.

vue-page-transitionA lightweight Vue.js plugin for page / route transitions.项目地址:https://gitcode.com/gh_mirrors/vu/vue-page-transition