VUE单文件组件在Vue项目中，然后使用 new Vue({el: '#container' }), 在每个页面内指定一个容器元素。使用Vue.component来定义全局组件，这种方式在小规模项目中还可以，但是在项目中有如下缺点：1. 全局定义：强制要求每个component中的命名不能重复。2. 字符串模板：缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的 \3. 不支持css，意味着HTML和javascript组件化时，css明显被遗漏。4. 没有构建步骤，限制只能使用HTML和ES5 Javascript，而不能使用预处理器。.vue 单文件组件可以解决上面的所有问题，并且还可以使用 webpack等构建工具。
.vue文件是一个自定义的文件类型，用类HTML语法描述一个Vue组件。每个 .vue文件包含三种类型的顶级语言块 <template>,<script>,和 <style>,如下代码：
<template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style>vue-loader 会解析文件，提取每个语言块，通过loader处理，最后将他们组成一个CommonJS模块。module.exports出一个Vue.js组件对象。vue-loader 支持使用非默认语言，比如css预处理器，预编译的HTML模板语言，通过设置语言块的lang属性。比如如下代码：
<style lang='stylus'> /* stylus代码 */ </style>语言块<template> 默认语言： html 每个.vue文件最多包含一个 <template>块 内容将被提取为字符串，将编译并用作Vue组件的template选项。
<script> 默认语言： js(在检测到 babel-loader 或 buble-loader 配置时自动支持ES2015) 每个.vue文件最多包含一个<script>块。 该脚本在类CommonJS环境中执行，也可以通过require()其他依赖，在ES2015支持下，可以使用import 和 export 语法。 脚本必须导出 Vue.js 组件对象。也可以导出由 Vue.extend()创建的扩展对象。但是普通对象将会更好。
<style> 默认语言：css 一个 .vue文件可以包含多个 <style> 标签。 默认情况下，将会使用 style-loader 提取内容，并通过 <style>标签动态加入文档的<head>中，也可以配置将所有style提取到单个的css文件中。
项目构建：一： 安装项目依赖npm install --save vue 默认安装最新版vuenpm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev-server
提示： npm install --save 和 npm install --save-dev的区别，--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。*
npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，babel的作用是将es6的语法编译成浏览器认识的语法es5npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件npm install --save-dev css-loader style-loader stylus-loader 用来解析css
提示：css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
npm install --save-dev url-loader file-loader 用于打包文件和图片npm install --save-dev vue-router 安装路由
二：项目目录结构如下：
demo # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- src # 项目的文件包 | | |--- assets # styles(样式)，img(图片)的目录文件 | | |--- components # 一些组件的目录，比如 header.vue 等 | | |--- views # 存放单个页面所有vue文件 | | |--- App.vue # 项目的入口文件 | | |--- index.js # 实例化的js入口文件 | | |--- routes.js # 路由配置文件 | |--- | |--- .babelrc # 支持es6 | |--- .gitignore | |--- README.md | |--- index.html # 首页入口文件 | |--- package.json | |--- webpack.config.js # 配置文件三：项目运行执行 webpack 打包；执行 webpack-dev-server 启动服务器；
四：转换命令把 webpack 和 webpack-dev-server 命令转成 npm 命令；需要安装 cross-env 命令如下：npm install cross-env --save-dev然后在package.json 文件添加"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "webpack"
现在可以使用 npm run dev 运行命令。
