vue快速原型开发

vue快速原型开发

有时候我们只是想要查看一两个vue文件的效果，但是却不得不使用 Vue CLI 创建一个完整的项目。然后copy代码进去才能看到具体的效果。这非常麻烦，那么有没有什么简单的方法可以不用脚手架创建整个项目就能看到一个vue页面的效果呢？答案是：有！

1.安装插件

首先需要安装一个插件，输入如下命令进行安装：

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

注意，这个需要全局安装才行，所以 -g 选项不能省略。

2.运行服务

插件安装完成后，直接在你需要查看效果的 *.vue 文件所在的文件夹中运行如下命令即可：

vue serve 文件名.vue

没错，这样你就可以快速的查看一个 *.vue 文件的页面效果了。不再需要像以前那样要创建一个新项目，然后再copy代码进去运行才能查看到效果了。

3.注意事项

需要注意的是，如果文件夹下有 App.vue 文件，那么你可以直接运行 vue serve 命令，不需要指定文件名。

直接运行 vue serve 命令，需要在运行该命令的文件夹下至少有如下文件中的一个才行：

main.js，index,js，App.vue，app.vue

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