Vue使用图形化界面创建项目
更多编程的干货关注我的公众号:不会写代码的阿P
需要vue的版本在3.0以上
1.安装Vue脚手架
查看Vue的版本vue -V
2.通过Vue脚手架创建项目
进入控制台输入:
vue ui
# 出现Ready on http://localhost:8000表示启动成功
1.1在浏览器输入 http://localhost:8000即可进入项目管理器
选择一根目录来创建项目,我这里是D:vueproject
1.2创建项目
输入项目名称和初始化Git
1.3选择手动配置项目
这可以自由选择,根据需求来定,我这里选择手动配置可以自由选择插件!!!
如果你需要从别人的开源项目Git clone项目那你就可以选着远程预设
1.4选择插件集成项目
这里我选择4个选项
- 项目的基本模板
- Vue-router路由配置
- 编码格式规范(ESlint)配置
- 将配置的插件保存在配置文件中,就像java中的Maven或者 Gradle 去管理依赖
1.5配置项目
如果是对Vue不是特别熟悉的话,就按照我的配置来走
1.6保存并创建项目
3.配置Vue路由
路由配置在第一步的1.4中已经完成!!!
4.配置Element-UI组件库
在步骤2完成安装Vue项目的创建之后,就会进入项目的配置页面,这里选择插件—>添加插件
4.1添加插件
4.2导入element插件并选择安装
这里需要用到element的UI库,所以需要导入element插件
4.3配置插件
这里选择import on demand按需导入
如果看到这个就表示安装成功!!!
5.配置axios库
配置前后交互的axios也算是ajax的升级版或者Vue的ajax,这里就不多作解释移步Baidu.com
5.1添加依赖
选择依赖-------->>>>>>安装依赖
5.2查找安装axios
安装成功!!!
6.初始化git远程仓库
Gitee和GitHub都是开源的项目管理平台
-
Gitee是码云的,服务器部署在国内,速度很快。
-
GitHub是国外的平台,自然服务器部署在国外,速度比较慢。
我这里选择Gitee码云
6.1新建仓库
登录码云,选择新建仓库,仓库名称不能重复
6.2将项目部署到仓库
如果电脑中没有Git的话需要装一个Git,安装完成之后,安装Git全局设置,来进行配置
这里我刚刚在1-1.2的步骤中已经初始化了Git所以直接查看已有仓库,找到下面那条指令,复制
6.3通过cmd进入Vue项目的根目录
我这里是—D:\vueproject\vue_element_manager,如果是window10的话进入根目录右键选择power shell
# 查看是否有未提交的
git status
下面就是未提交的
如果Git status输入无任何反应就先
git init
# 提交未提交的文件
git add .
# 提交到本地
git commit -m "add files"
在输入git status
-
on branch master处于主分支
-
nothing to commit 工作区是干净的
7.将本地项目托管到Gitee
这时执行git remote那句话,就是先将本地仓库与远端仓库建立一个链接: git remote add , 那么add什么呢? origin其实就是你为远端仓库所起的名字,一般都是叫origin,其实你也可以要Ceres 或者Earth,https://gitee.com/hahaguai007/vue_manage.git就是你的远端仓库的真实地址;
git remote add origin https://gitee.com/你gitee仓库的路径
# 我远程仓库
git remote add origin https://gitee.com/hahaguai007/vue_manage.git
# 将本地的master分支推送到origin主机,同时指定origin为默认主机,后面就可以不加任何参数使用git push了。
git push -u origin master
如果第一次使用Git的话会让你输入账号和密码,此时把你注册码云的账号密码输入即可。
7.1部署完成查看
重新进行仓库就可以看到参仓库的内容和刚刚提交的内容-add files
8启动项目
通过UI就可以直接启动
访问 http://localhost:8080/#/ ,如下界面表示启动成功。