1.项目初始化

  1. 安装 Vue 脚手架
  2. 通过 Vue 脚手架创建项目
  3. 配置 Vue 路由
  4. 配置 Element-UI 组件库
  5. 配置 axios 库
  6. 初始化 git 远程仓库
  7. 将本地项目托管到 github 中
1.安装 Vue 脚手架
npm install vue-cli -g
2-3.通过 Vue 脚手架创建项目、配置 Vue 路由
vue ui

在这里插入图片描述

在命令行输入完 vue ui 后会自动打开一个 vue 项目可视化管理页面,如下图

在这里插入图片描述

然后选择需要存放的路径

在这里插入图片描述

点击在此创建新项目后,为项目起一个名称,并且初始化 git 仓库 init project

在这里插入图片描述

手动创建一个配置项目,或者使用一套预设

在这里插入图片描述

在功能把面板中选择安装一些主要的功能(默认一定要安装的: BabelRouterLinter / Formatter 、 使用配置文件 )

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

选择完功能后继续选择配置,将 Pick a linter / formatter config 选择为 ESLint + Standard config 即可

在这里插入图片描述

创建项目后可以将其保存为新预设

在这里插入图片描述

创建完成后就看到了这个界面

在这里插入图片描述

4.配置 Element-UI 组件库

在左侧导航栏中找到插件这个选项,并且点击右上角的添加插件按钮

在这里插入图片描述

在搜索框中查找 vue-cli-plugin-element 插件,选中并安装

在这里插入图片描述

配置 vue-cli-plugin-element 插件,将 Fully import (默认) 改为 Import on demand

在这里插入图片描述

5.配置 axios 库

在左侧导航栏中找到依赖这个选项,并且点击右上角的安装依赖按钮

在这里插入图片描述

在搜索框中查找 axios 插件,选中并安装(注意,是安装到运行依赖)

在这里插入图片描述

6.初始化 git 远程仓库

打开 github 并创建一个项目,输入完项目的名称后,一定要把 Add a README file 给取消选择,随后创建项目

项目创建完成后将本地文件和远程仓库连接

在连接之前先查看一下本地仓库的状态 git status

在这里插入图片描述

先将所有文件都添加到暂存区 git add .

在这里插入图片描述

在本地做一次提交 git commit -m "add files"

在这里插入图片描述

提交完成后检查一下状态 git status

在这里插入图片描述

在命令行中先输入 git remote add origin https://github.com/Littlesmart3/vue_test.git 命令,随后将本地仓库和 github 仓库关联

在这里插入图片描述

1.git branch -M main 2.git push -u origin main

在这里插入图片描述

完成上传

在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐