缘起
在我们日常开发生活中，经常遇到要执行某段代码，或者demo的时候，这个时候往往需要进行新建个文件夹，再新建html，甚至还需要新建js，css，等一系列繁琐的操作，如果要新建解析vue文件就更加麻烦了，使用vue cli也会耗费不少时间。搞起来非常麻烦。
这里提供一个简单快捷的方法，可以针对单个vue文件进行解析，不需要安装其他任何依赖，整个目录文件只需要一个app.vue文件即可。
如图：
image.png
解析下来是：
image.png
下面来实现一下:
- 首先安装全局扩展:
npm install -g @vue/cli-service-global
vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。
-
新建一个文件夹，起一个叫app.vue的文件：
image.png 然后在这个 App.vue 文件所在的目录下运行：
vue serve
vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件：
vue serve MyComponent.vue
如果需要，你还可以提供一个 index.html、package.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint。
- 你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署：
vue build MyComponent.vue
总结
针对单个vue文件进行解析构建的方案其实vue cli官方文档就有，但看周围同学用的比较少，像比较冷的知识，故分享出来水篇文章~
