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/#/ ，如下界面表示启动成功。