Vue+vue-router+Webpack4模拟登陆跳转和嵌套路由功能（非vue-cli）

源码地址：https://github.com/RidingACodeToStray/vue-login-jump-subRouter

Webpack实现的功能

打包和输出html

打包，分离，压缩和输出css文件

vue模板解析

自定义输出js文件路径和名称等

demo的基本功能

使用vue-router模拟登陆和跳转

vue-router嵌套路由模拟登陆后切换页面

package.json配置

{
  "name": "sntdata2",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17"
  },
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.2",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack --config=config/webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "keywords": [],
  "description": ""
}

项目运行

npm install
npm run dev

运行环境

需要单独配置服务器运行

效果图

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_36185028/article/details/82184266
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-01 22:46:27
阅读 ( 1079 )
分类：前端

Vue+vue-router+Webpack4模拟登陆跳转和嵌套路由功能（非vue-cli）

package.json配置

项目运行

运行环境

效果图

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看