码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！
在这之前我们已经把vue的基础部分已经基本讲述完毕。
我们之前写vue组件的流程都是
Vue.component("组件名", {
});
new Vue({
components:组件名
});
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue 的单文件组件为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
使用 .vue 后缀的单文件组件的好处是：
- 完整语法高亮
- CommonJS模块
- 组件作用域的CSS
Vue为我们提供了一套非常好用的脚手架工具Vue-Cli3，可以为我们把项目初始化的基础部分的目录结构构建完整。
下面我们说一下它的基本配置：
- 安装Nodejs
保证Nodejs8.9或更高版本
终端输出 node -v，保证已经安装完成 - 安装淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后的 npm 可以用 cnpm 代替
（因为大部分人使用npm下载东西都会很慢，淘宝镜像cnpm可以给我们下载同样的东西，并且速度更快。） - 安装Vue Cli3脚手架
cnpm install -g @vue/cli - 检查其版本是否正确
vue --version
快速原型开发
使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：
cnpm install -g @vue/cli-service-global
vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证.因此这只适用于快速原型开发.
需要的仅仅是一个 App.vue 文件：
<template>
<div>
<h2>hello world 单页面组件</h2>
</div>
</template>
<script>
export default {
};
</script>
<style></style>
然后在这个 App.vue 文件所在的目录下运行:
vue serve
以上内容仅仅是快速原型开发.vue后缀的这种单文件组件的流程。
下篇文章讲述一下在我们开发完整的项目时，真正使用我们Vue-Cli3构建项目目录的流程。
有微信小程序课设、毕设需求联系个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！
