vue less安装_Seajs配合vue打造不脱发轻量级spa（一）

现如今要开启一个前端项目，大都会利用上webpack，parcel前端模块化工具来构建前端项目。

我自己也常常用webpack来构建自己的项目，但每次

webpack的版本升级都要导致项目要修改各种loader插件，

有过类似经历的人自然会明白多么痛苦

它的优点我就不说了，缺点我觉得也不少，请看

知乎这篇文章 https://zhuanlan.zhihu.com/p/32148338

所以我分享一下最近搭的一个spa,不需要太复杂的构建流程。简单干净

虽不一定完美，兼顾到各方面 但用起来非常舒服,感觉仿佛回到了一个jquery走天下的年代。

说说脚手架中一些必要的配料

1 构建工具 npm

构建工具 webpack ？

不用。

为啥？ 太笨太大

gulp 也不用？

gulp很好但秉着能不依赖就不用的原则 我也放弃了

那用啥呢？ npm自己写个小脚本，构建less，压缩js 短短

几行代码就搞定，比webpack好维护多了

2 样式开发 less

其实我是想用css的，但是 less官网一查开发模式下，

less有个浏览器端用法，可实时将less文件转成css

实在受不了less诱惑，好吧就用它了，当然构建的时候

需要转一下成css

3 vue

不得不说 vue书写体验上确实比jquery好。我非常喜欢它

一个vue一个组件，干净。写组件就像搭积木似的爽

4 seajs/seajs-text

模块化开发是必须的，用惯了es6那套写法，我更倾向于CMD规范来组织我的代码。

网上搜了一大圈，找到了它。

5 语言版本ES5

这真不是我矫情，我很喜欢用ES6来码前端，但是ES6的很多语法手机浏览器都不支持。连箭头函数也得小心翼翼的使用。什么？babel转一遍 ,想着配置babel又要费一番功夫。

5 live-server(node)

用来跑前端的调试/或者自己有静态服务器

有了上面这些就可以愉快的搞起项目，

安装node/live-server

接下来以简单的spa demo项目来分享一下搭建过程

首先新建一个文件夹

demo_spa 进入该文件夹 npm init ba ba 一顿操作

然后建一些项目文件夹

src 放代码

configbuild.js 构建文件

ools 一些脚本文件

如图

demo中所有vue文件均以异步组件的方式动态加载。需要加载的组件 (应该是一个 `Promise` 对象)

如图

为了达到动态加载的目的我们需要seajs配合封装一个import函数，大概实现思想是当读取vue文件时

将vue文件内容分别按照标签, export default 关键字 解析成模板内容，依赖文件 还有vue本身业务逻辑三段，将export default里的内容通过new Function函数生成的组件

如图