用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发起请求,连接数据库并返回数据,继续完善~~

你可能感兴趣的:(vue-js,vue-router,vue-cli)