基于@vue/cli 3.0 快速构建vue 项目

写在前面的话:
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/
  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值