1. 脚手架那套系统帮你模块化，比如每个页面都是一个组件，可以抽象出共用组件分给不同页面用。直接引用其实也能做，你也得搭一套js的模块化，再放到你的index.html，功能是一样的，自己设计一套也挺麻烦，要考虑很多问题。

2. 脚手架有一个统一的入口main.js，你引入router，resource，vuex很方便，也很清晰，你的方式项目庞大以后，容易乱。

3. 脚手架提供了测试服，你现在用的是单机版，测试服在本地监听端口进行测试，可以使用ajax请求，可以将请求代理到web端接口进行联调。

4. webpack配合vue单文件，css，js，html整合在一起，每个部分都是一个模块，同样图片模板都是一个模块，你可以在webpack里配置这些文件的处理方式，比如自动添加css前缀，使用less，sass，jade，将小于多少的图片转成base64，等等等等。

5. 使用npm管理你的开发和插件，想用什么插件直接npm install，不用手动script标签引入，插件很多的时候不用考虑那么多，直接找到配置表，版本管理也很方便。

你就算不用vue-cli，也有必要找一套vue的项目模板，基本路数都差不多，你总有那么多事要做。要么，你自己设计一套vue的架构，也没问题，前提就是方便，规划的合理，脉路清晰。

推荐一个让新手前端也能轻松上手高端工具（webpack等）的脚手架

介绍

X-BUILD 是面向小型项目的脚手架工具，通过终端命令最快在几秒钟初始化项目目录，解决开发中的自动化、性能、模块化、规范、自适应布局等问题，辅助你生成更优质的代码。它两部分组成：一部分为基于 Node.js 环境下的项目生成器，它是安装在全局环境下的 NPM 包；另一部分是基于 webpack 的开发和生产环境，对各类需求做了相应的配置。

特性

脚手架：

自动创建工程目录（自定义/快速）

自动安装依赖 / 自动初始化 Git

生成配置文件，提供更灵活的选择

开发/生产环境：

基于 webpack4 的开发环境

支持 CSS 预处理器(sass、less、stylus)

支持 TypeScript & TSLint 或 Babel & ESLint

提供可选的自适应解决方案

数据接口模块自动加载

适合环境

小型项目：周期短，无需使用大型框架开发并且还能保证项目的品质和效率。

高效学习：无论是 ES 新语法、TS 或 CSS 预处理器，避免复杂的搭建环境影响学习效率。

文档地址（支持中英文）：https://codexu.github.io/

vue.js做好的前端怎么对接后端啊，初学者，请指教

后端怎么去配置前端路径呢？webpack真心难学

首先，根据使用jq的传统经验，直接引用vue似乎十分的方便。

但是不便于组件化管理。

而使用vue-cli构建的话，你可以一个函数一个组件，同时还可以使用es6,es7语法。

vue-cli脚手架，就是方便你盖楼的，方便，方便，方便。免去了你上手时还得自己配置webpack的麻烦，徒增学习曲线

使用脚手架工具可以，自动刷新页面，自动构建项目，打包压缩代码，

现代化的前端开发模式