1.安裝vue腳手架

這里一定要安裝4.x的腳手架，5.x的腳手架會(huì)報(bào)錯(cuò)

npm install -g @vue/cli@4.x
vue --version  // 查看版本號(hào) 是否安裝成功

2.全局安裝支持零配置運(yùn)行 .vue文件的擴(kuò)展

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

3.新建一個(gè)test文件夾

在test文件夾中創(chuàng)建一個(gè)需要運(yùn)行的vue文件--app.vue

4.初始化項(xiàng)目

npm init

5.運(yùn)行app.vue文件

vue serve app.vue

官方文檔文檔的介紹到此為止，但是我運(yùn)行的時(shí)候一直報(bào)錯(cuò)螟够，詳細(xì)錯(cuò)誤見(jiàn)

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.

上面的錯(cuò)誤主要是說(shuō) 找不到 'vue-template-compiler' 這個(gè)模塊。
那我們就安裝這個(gè)依賴(lài)模塊

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

最后執(zhí)行命令峡钓，運(yùn)行成功

vue serve app.vue

image.png