【Vue】vue-cli 起步配置步骤

发布于:2022-12-06 ⋅ 阅读:(716) ⋅ 点赞:(0)

一、vue-cli 起步配置

官网:https://cli.vuejs.org/zh/

1. 安装 vue-cli

vue-cli 是npm上的一个全局包,使用 npm install 命令即可安装:

npm install -g @vue/cli

2022092701
查看是否安装成功

C:\Users\huawei>vue -V
@vue/cli 5.0.8

2. 快速生成工程化 Vue 项目

(1)在终端下运行如下命令,创建指定名称的项目

vue create 项目的名称

(2)询问是否使用更快的淘宝镜像,这里选择Y
2022092702
(3)选择使用默认配置创建还是手动选择配置项
2022092703
建议初学者,选择 Manually select features 进行手动选择要安装哪些功能到项目中。
(4)手动选择功能
2022092704
选择需要的配置,空格键选择。
(4)选择 vue.js 的版本
2022092705
(5)选择 CSS 预处理器
2022092706
(6)把第三方插件的配置项,放到独立的配置文件中
2022092707
(7)是否保存本次配置,下次直接进行使用,这里选择保存
2022092708
(8)项目创建成功
2022092709
其中,npm run serve 的功能同 webpack 中的 npm run dev 功能类似。
(9)运行项目
2022092710
注意:在开发过程中,该终端页面不能关闭。如果关闭了,可以在 vscode的终端中执行 npm run serve 命令,从而再次打开。
(10)访问 http://127.0.0.1:8080/ 查看效果
2022092711


网站公告

今日签到

点亮在社区的每一天
去签到