可视化的方式创建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项目

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。