一起来学Vue.js【12】

单文件组件

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
（1）全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复；
（2）字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \；
（3）不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏；
（4）没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel。
文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。为了能够使用Vue.js的单文件组件，需要搭建环境：
（1）安装Node.js
安装Node.js是为了能使用NPM,NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用;
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用;
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的Node.js已经集成了NPM，所以直接下载Node.js即可。详细步骤见：

https://www.runoob.com/nodejs/nodejs-install-setup.html

用cmd命令查看Node.js是否安装成功

（2）由于网络问题，可以安装NPM的中国镜像CNPM。
注意：在第一次安装中终止了操作，切成D盘后的下载截图。

（3）安装vue-cli，Vue官方提供的一种用户生成Vue工程模板。可快速开始一个vue的项目，也就是给开发人员的一套vue的结构，包含基础的依赖库。
注意：没有截全。

（4）安装webpack，它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。简单来说，就是javascript的打包器(module bundler)。
注意：没有截全。

部署好环境后，开始项目创建，此处项目创建在D盘。创建命令：vue ui。
会看到一个项目管理器的网页。

接着就是创建项目。


到此，项目已经创建好。把网页关闭，在D盘就可以找到项目目录。

Webstorm也可以创建Vue GLI项目。

把项目文件拖拽到编辑器(笔者使用的是Webstorm)。观察目录结构,public是指项目打包后用来部署在生产环境下的一个目录；src为开发的目录，src下的components就是整个项目的组件开发目录。
App.vue是作为整个项目的入口文件，来完成组件的引入工作。在App.vue的内容里,可以看到用import引入一个组件，然后在页面上通过components这个属性局部注册和使用该组件。
HelloWord.vue是一个单文件组件，如果使用WebStorm的话，需要设置一下运行方式。步骤如下：

Name自取，Script选择的是serve。
设置完成后，点击运行。

在控制台中可以看到两个地址，一个是本地，一个是网络。
选择本地地址，打开后就是项目网页。
当然，可以通过修改HelloWord.vue来改变网页效果。删除了一大堆html代码。

运行结果：
单文件组件还可以自己创建，其中< template >标签用来视图布局或模板；< script >标签用来脚本处理；< style >标签用来设置样式 。

在< template >中定义一个模板，在< script >中使用props定义组件的属性，methods中注册组件的方法，data里注册组件的数据。还可以为组件设置样式，此处只设置字体颜色。如此一来组件就注册好了。
接下来就是使用定义好的组件，在App.vue中通过import导入组件，由components里局部注册该组件。最后在模板标签中写入组件。
运行成功后，就可以看到自定义的单文件组件在页面上的效果了。

https://cn.vuejs.org/v2/guide/single-file-components.html