vue-cli 没有build如何配置_猫也能看得懂的Vue教程之 使用Vue CLI创建项目：单文件组件...

导读：Vue CLI又被称为“脚手架”，是建筑工程里的词汇，直观上讲是为保障施工能顺利进行而搭建的架子，也包括很多像电梯、吊塔等其他功能。

在程序开发里也一样，Vue CLI是我们为了开发而创建的一个工作空间，这里包括了整体的文件结构、约定俗成的开发流程、各种需要支持的工具包等、使用Vue CLI可以很方便的配置好这些，本文里首先介绍一下组成项目的基本元素——单文件组件（以下简称组件）

单文件组件（.vue）

在上一个教程里我们介绍了通过在html页面里嵌入vue的方法一个单独页面，这种方法可以快速的预览原型功能。<a href="http://mp.weixin.http://qq.com/s?__biz=MzU0NTk4MzMxNQ==&mid=2247483812&idx=1&sn=076d5b6d624812d3eebc6bfec4d204f3&chksm=fb65df98cc12568efce7de5b26d1f9efb3e099dce066bd0ef0d61ef7e5919ac6e40a814aa1d4&scene=21#wechat_redirect">（点击跳转至“一分钟使用Vue搭建简单Web页面”）

但是在真正的项目里，会有很多页面及调用关系，我们可以使用Vue.component来创建全局模版，并通过new Vue({ el: '#container '})去引用，但是这种方法仍然有很多缺点，如：

▪全局定义 (Global definitions)

强制要求每个 component 中的命名不得重复。

▪字符串模板 (String templates)

缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的。

▪不支持 CSS (No CSS support)

意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏。

▪没有构建步骤 (No build step)

限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel。

Vue为我们创建了扩展名为.vue的组件为以上问题提供了解决的办法，并且还可以使用 webpack 或 Browserify 等构建工具。

一个hello.vue的示例如下：

我们可以使用预处理器来构建简洁和功能更丰富的组件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。

可以看到一个组件里包括了html格式的模版、js和css三个部分，这种以组件维度来开发的模式把一个项目分为了不同的子任务，虽然每个组件里的内容是高耦合，但是不同组件之间是低耦合，互不影响并且可以相互调用，提高了整个项目的可扩展性，可以自己开发组件、也可以使用第三方组件库去构建你的项目，你也可以使用<script src="xx.js"></script>或者<style src="xx.css"></style>的方式把js和css分成独立文件做到热加载和预编译，最后通过我们的脚手架来组装我们的组件^_^

下个教程会通过一个多组件的工程实例来详细介绍组件的用法，请各位持续关注，敬请期待!

也欢迎各大程序员小哥哥小姐姐弟弟妹妹们一起留言探讨~