可视化的方式创建vue项目+git管理vue项目

写在前面

由于我的vue版本是3.0以下的（2.9.6版本），所以终端输入vue -V无反应，因此无法通过可视化的形式创建vue项目。因此就输入sudo cnpm i -g @vue/cli或sudo npm i -g @vue/cli升级了最新的vue版本才得以解决

image.png

---

可视化的方式创建vue项目

步骤一： 可视化的形式创建vue项目：vue -V。以后可以通过vue -V命令打开可视化Vue管理器

image.png

步骤二：将项目安装到指定路径下

image.png

步骤三：创建项目名，点击下一步

image.png

步骤四：项目预设-手动。 以手动的方式创建项目配置信息

image.png

步骤五：根据需求安装项目所需要的插件

image.png

步骤六：选择 ESLint + Standard config 和Lint on save，然后再点击创建项目

image.png

步骤七：保存为预设

image.png

步骤八：创建项目成功

image.png

步骤九：选中左侧的插件选项卡，然后点击右侧的添加插件

image.png

步骤十：输入vue-cli-plugin-element进行搜索插件，然后点击插件图标

image.png

步骤十一：安装vue-cli-plugin-element插件

image.png

步骤十二：将vue-cli-plugin-element插件改成按需导入，最后点击完成安装

image.png

步骤十三：若提示文件改动，选择提交修改即可。

image.png

步骤十四：安装vue-cli-plugin-element插件成功

image.png

步骤十五：选中左侧的依赖选项卡，然后点击右侧的安装依赖

image.png

步骤十六：输入axios进行搜索依赖，然后点击插件图标

image.png

步骤十七：安装axios依赖

image.png

步骤十八：安装axios依赖成功

image.png

二：初始化git远程仓库

步骤十九：登录码云,进行初始化git远程仓库

image.png

步骤二十：复制HTTPS选项中对应的仓库链接

image.png

步骤二十一：SourceTree->偏好设置->网络->编辑

image.png

image.png

步骤二十二：将gitee.com主机对应的用户名更改成 创建该项目所登录的账号

image.png

步骤二十三：弹框中输入码云对应的密码，再点击始终允许

image.png

步骤二十四：新仓库->从URL克隆

image.png

步骤二十五：克隆仓库到本地empty文件夹(empty为空文件夹)，会克隆出一个.git文件

image.png

步骤二十六：将上一步骤中的得到的.git文件夹整体剪切到vue_ecommerce文件夹下，替换vue_ecommerce文件夹下原来的.git文件夹

image.png

步骤二十七：新仓库->添加已存在的本地仓库

image.png

步骤二十八：把步骤三中的vue_ecommerce文件夹作为仓库

image.png

步骤二十九：打开vue_ecommerce这个仓库

image.png

步骤三十：提交本地vue代码到码云

image.png

步骤三十一：在码云上查看，提交成功

image.png

我的另一篇文章

vue 命令行的方式搭建用git管理的vue项目