一、安装 vue-cli 工具

通过 vue --version 查看版本，如果已经安装了较低版本如2.9.6版本，先卸载

npm uninstall -g vue-cli

 

然后再重新安装

npm install -g @vue/cli

 

查看版本

vue --version

3.6.3

 

二、vue-cli创建项目

1.在终端输入命令

vue create hello-vue

 

2.选择默认的组件包，还是自己手动选择。通过上下箭头切换，enter 键确定。

这里选 Manually select features 手动选择



 

 

3.选择组件，上下切换，按空格键选择，回车键键确定



 

4.是否选择历史，Y

 

5.CSS处理格式，选择第一个



 

6.文件格式，选第二个



 

7.选择是否是保存的时候对js检查，还是提交的时候检查



 

8.配置文件存放位置，默认



 

9.是否将以上配置应用于未来的项目，这里先选N



 

10.依赖下载方式选择 NPM



 

11.创建成功



先后执行上面两行命令



 

访问 http://localhost:8080/ 看到如图，说明启动成功



 

三、vue-ui 可视化界面

在终端输入 vue-ui

访问 http://localhost:8000 可以看到可视化的界面

可以直接创建项目，导入项目

这里我们选择导入项目，导出刚才的 hello-vue

然后就可以看到项目管理页面，这里就不一一介绍了