运行单个Vue文件;不创建脚手架项目运行.vue文件

1.安装vue脚手架

这里一定要安装4.x的脚手架,5.x的脚手架会报错

npm install -g @vue/cli@4.x
vue --version  // 查看版本号 是否安装成功

2.全局安装支持零配置运行 .vue文件的扩展

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

3.新建一个test文件夹

在test文件夹中创建一个需要运行的vue文件--app.vue

4.初始化项目

npm init

5.运行app.vue文件

vue serve app.vue



官方文档文档的介绍到此为止,但是我运行的时候一直报错,详细错误见

PS E:\Desktop\test> vue serve text.vue
 INFO  Starting development server...
(node:30628) UnhandledPromiseRejectionWarning: Error: Cannot find module 'vue-template-compiler'
Require stack:
- D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\compiler.js
- D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\resolveScript.js
- D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\select.js
- D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\index.js
- D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\config\base.js
- D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\Service.js
- D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\index.js
- D:\nvm\v12.18.1\node_modules\@vue\cli\lib\util\loadCommand.js
- D:\nvm\v12.18.1\node_modules\@vue\cli\bin\vue.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.resolve (internal/modules/cjs/helpers.js:78:19)
    at loadFromContext (D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\compiler.js:30:26)
    at loadTemplateCompiler (D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\compiler.js:37:12)
    at exports.resolveCompiler (D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\compiler.js:25:23)
    at VueLoaderPlugin.apply (D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\plugin-webpack4.js:91:22)
    at VueLoaderPlugin.apply (D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\vue-loader\lib\plugin.js:13:16)
    at webpack (D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\webpack\lib\webpack.js:51:13)
    at serve (D:\nvm\v12.18.1\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\commands\serve.js:163:22)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:30628) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:30628) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

上面的错误主要是说 找不到 'vue-template-compiler' 这个模块。
那我们就安装这个依赖模块

npm install vue-template-compiler --save-dev

最后执行命令,运行成功

vue serve app.vue
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容