vue快速开发小技巧-不使用依赖针对单个vue文件进行快速开发

缘起

在我们日常开发生活中，经常遇到要执行某段代码，或者demo的时候，这个时候往往需要进行新建个文件夹，再新建html，甚至还需要新建js，css，等一系列繁琐的操作，如果要新建解析vue文件就更加麻烦了，使用vue cli也会耗费不少时间。搞起来非常麻烦。

这里提供一个简单快捷的方法，可以针对单个vue文件进行解析，不需要安装其他任何依赖，整个目录文件只需要一个app.vue文件即可。
如图：

image.png

解析下来是：

image.png

下面来实现一下:

1. 首先安装全局扩展:

npm install -g @vue/cli-service-global

vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

2. 新建一个文件夹，起一个叫app.vue的文件：

   
   
   image.png

3. 然后在这个 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。

4. 你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署：

vue build MyComponent.vue

总结

针对单个vue文件进行解析构建的方案其实vue cli官方文档就有，但看周围同学用的比较少，像比较冷的知识，故分享出来水篇文章~