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
网友评论