写在前面的话:
vue命令行工具的包名字已经从vue-cli变成了@vue/cli,@vue/cli 是vue 的3.x版本,而vue-cli的最高版本目前只到 @2.9.6。如果你原先在电脑上全局安装过vue-cli,需要先执行 npm uninstall vue-cli -g 或者 yarn global remove vue-cli 将其卸载掉。

一、安装 @vue/cli

注意: 这里安装的是@vue/cli,而不是vue-cli
执行

npm install -g @vue/cli

控制台打印如下:

npm WARN rm not removing C:\Users\pyk4vq\AppData\Roaming\npm\vue.cmd as it wasn't installed by C:\Users\pyk4vq\AppData\Roaming\npm\node_modules\@vue\cli
npm WARN rm not removing C:\Users\pyk4vq\AppData\Roaming\npm\vue as it wasn't installed by C:\Users\pyk4vq\AppData\Roaming\npm\node_modules\@vue\cliC:\Users\pyk4vq\AppData\Roaming\npm\vue -> C:\Users\pyk4vq\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.jsnpm WARN apollo-client@2.3.7 requires a peer of graphql@^0.11.0 || ^14.0.0 but none is installed. You must install peer dependencies yourself.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\@vue\cli\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @vue/cli@3.0.0-rc.10updated 11 packages in 63.496s

执行:

vue --version

控制台打印如下:

3.0.0-rc.10

说明已安装成功。

二、创建项目

执行:

vue create hello-vue-i18n

控制台打印如下:
这里写图片描述

cd到新建的工程目录:

 cd hello-vue-i18n

执行:

npm run serve

控制台打印如下:

> hello-vue-i18n@0.1.0 serve D:\01_Study\关于i18n\hello-vue-i18n
> vue-cli-service serve

 INFO  Starting development server...
        10           11                    12  12                 13% 13 13 13                                                                          2   98% after emitting CopyPlugin

 DONE  Compiled successfully in 13132ms                                                                        18:26:44
  App running at:
  - Local:   http://localhost:8081/
  - Network: http://10.0.75.1:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

在浏览器中打开“http://localhost:8081/”,一个初始化好的vue工程就完成了。
这里写图片描述

三、使用GUI

通过vue ui命令可以在浏览器中直接打开 vue命令行工具的可视化界面。
这里写图片描述

在这个可视化界面中,可以轻松的不通过命令行而创建vue工程。

官网网址:https://cli.vuejs.org/guide/
Logo

前往低代码交流专区

更多推荐