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

拿了个以前的项目做练手，用了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发起请求，连接数据库并返回数据，继续完善~~