用vue.js和vue-router重构一个网站

最新推荐文章于 2025-06-24 15:02:29 发布

转载最新推荐文章于 2025-06-24 15:02:29 发布 · 450 阅读

文章标签：

#计算机

前端同时被 2 个专栏收录

140 篇文章

订阅专栏

计算机

52 篇文章

订阅专栏

本文分享了使用Vue重构校内网的过程，介绍了利用Vue-CLI、Vue-Router及Vuex构建项目的经验，并探讨了单文件组件、懒加载及组件化开发的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拿了个以前的项目做练手，用了vue-cli，vue-router，vuex。主要还是想学习一下webpack和单文件组件的思想。不过代码写得其实挺匆忙，感觉还有很多地方还能改进，组件化思想还是不能很好的掌握。
github地址：https://github.com/fshwc/vuedemo-mpacc
这里写图片描述

vue-lic和webpack

很久以前我就看了webpack，但是因为还挺新的，大多资源都是英文，所以除我跟着网上做做demo没实际尝试过。但是vue我也学到了一定阶段，该进入进阶阶段了。vue-cli其实帮我们构建好一切了，一句vue init webpack-simple vuedemo就o了~，但是。。我知道其实webpack还有很多我不懂得功能的。搭好框架后一句webpack-dev-server就能把项目跑起来了。
webpack打包需要指定入口文件，这个其实指定多少个入口都无所谓的，但是要改出口哦~

//单入口 webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

//多入口
module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};

但是这项目能这么想，我把首页做唯一的入口文件，那么跳转的时候我再异步加载相应的模块，所以这次我只用了一个入口文件main.js。
当我没了解清楚的时候，会想把整个项目都打包成一个js啊，那这个js不就很大，加载很慢吗，但是有一东东叫懒加载，结合 Vue 的异步组件和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载 http://router.vuejs.org/zh-cn/advanced/lazy-loading.html

单文件组件

单文件组件思想就是为了更好的组件化开发。
什么是组件化开发呢？ https://www.zhihu.com/question/29735633?sort=created

页面上的每个独立的可视/可交互区域视为一个组件;
每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护;
每个组件相对独立，页面只不过是组件的容器，组件自由组合形成功能完整的界面;
当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

现在我自认还没理解好组件化开发，只是把相同功能的组件放在同一个目录下而已。vuex建议的项目结构。。。http://vuex.vuejs.org/zh-cn/structure.html。不知道这个是不是分太细。。。不过我相信一个项目足够大的时候，这样布局或许会更好~

项目介绍

用vue重构了校内网，页面跳转用了vue-router，我还暂时用了下vuex，但是其实这个是多余的。。。。本来想运用vuex代替连接数据库查询后返回数据，但是没找到合适的运用方式。所以不是每个项目都需要vuex，尤大大也提醒在项目需要的时候再用。等过完年，我看看webpack怎么结合Express，用vue-resource发起请求，连接数据库并返回数据，继续完善~~