创建vue项目(图形化和命令行)

图形化:

1.进入命令框(windows+R,输入CMD)

创建vue项目(图形化和命令行)_第1张图片
2. 输入 vue ui,回车

创建vue项目(图形化和命令行)_第2张图片

如果这里打不开,请看此处:

创建vue项目(图形化和命令行)_第3张图片
再浏览器中,打开给出的网址,就进入了,本地的vue管理项目:

创建vue项目(图形化和命令行)_第4张图片
3.创建项目
点击创建项目会进来这么一个界面:

1.填写项目名
2.选择包管理器
3.选择初始化git仓库

创建vue项目(图形化和命令行)_第5张图片下一步之后会让你选择创建模式:
创建vue项目(图形化和命令行)_第6张图片
我们选择手动,此时会让我们选择需要使用的库和插件,比如bebel、vuex、vue-router 等常用的库
创建vue项目(图形化和命令行)_第7张图片
接下来会让我们进入到插件的具体配置,比如:
创建vue项目(图形化和命令行)_第8张图片配置完成后点创建项目,此时会弹出:
创建vue项目(图形化和命令行)_第9张图片
这是让你保存本次的配置,下次创建项目可以直接使用保存的这套配置。

创建vue项目(图形化和命令行)_第10张图片

4.管理项目
经过上面都步骤,项目创建完成,你可以看到下面这个管理页

创建vue项目(图形化和命令行)_第11张图片
我们来介绍一下这三个菜单:
插件:可以从插件商店下载安装各种网上都插件
创建vue项目(图形化和命令行)_第12张图片配置: 对已安装对插件配置管理
创建vue项目(图形化和命令行)_第13张图片任务:就是各种可运行的命令,如打包、本地调试。
创建vue项目(图形化和命令行)_第14张图片
运行 serve (在vue cli 2.x版本中是dev 这里是一重大改变!)任务,我们可以看到,我们新建的项目已经跑起来了:
创建vue项目(图形化和命令行)_第15张图片
此时我们输入 localhost:8080 就可以看到
创建vue项目(图形化和命令行)_第16张图片
5.导入本地的项目
创建vue项目(图形化和命令行)_第17张图片
6.管理项目
列出已有的项目
创建vue项目(图形化和命令行)_第18张图片

命令行:

  1. 在终端,找到相对应的目录下,创建vue项目
vue create vue_project_name

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPt4fDB5-1651932437200)(https://mg-blog.csdnimg.cn/d5da17d2aba94a54bbda44592897e7e5.png)]
2.此时会出现两个选项询问你需要安装哪些功能

第一项是默认方式创建vue3 项目,第二项默认创建vue2项目,第三项是手动选择功能创建vue项目

按键盘↑或↓来选择

选择手动模式
创建vue项目(图形化和命令行)_第19张图片

3.安装完

运行vue项目
npm run serve

创建vue项目(图形化和命令行)_第20张图片
进入vue主页面
创建vue项目(图形化和命令行)_第21张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)