vue入门之认识vue-cli和vue-ui

一、安装 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 手动选择

vue入门之认识vue-cli和vue-ui

 

 

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

vue入门之认识vue-cli和vue-ui

 

4.是否选择历史,Yvue入门之认识vue-cli和vue-ui

 

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

vue入门之认识vue-cli和vue-ui

 

6.文件格式,选第二个

vue入门之认识vue-cli和vue-ui

 

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

vue入门之认识vue-cli和vue-ui

 

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

vue入门之认识vue-cli和vue-ui

 

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

vue入门之认识vue-cli和vue-ui

 

10.依赖下载方式选择 NPM

vue入门之认识vue-cli和vue-ui

 

11.创建成功

vue入门之认识vue-cli和vue-ui

先后执行上面两行命令

vue入门之认识vue-cli和vue-ui

 

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

vue入门之认识vue-cli和vue-ui

 

三、vue-ui 可视化界面

在终端输入 vue-ui

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

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

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

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

vue入门之认识vue-cli和vue-ui

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: