2021-03-31

Vue项目前端学习之路——电商管理系统（Element-UI）I

1.项目准备
1.1 安装Vue脚手架
快捷键按win+R，输入cmd按enter回车，打开命令提示符窗口；
命令提示符窗口中输入：npm i -g @vue/cli 命令，按enter回车运行即可安装Vue脚手架。（只用安装一次）

1.2 创建新项目（可视化面板创建）、配置路由
快捷键按win+R，输入cmd，按enter回车键，打开命令提示符窗口；命令提示符窗口中输入vue ui命令,按enter回车运行成功之后会自动打开可视化面板。（如果输入命令无法打开Vue项目管理器页面，可以检查一下Vue脚手架是否安装）
打开Vue项目管理器页面依次选择：+创建—Desktop:文件存储位置—+在此创建新项目—输入 项目名：(英文)，Git 初始化git仓库（建议）：init project—下一步—手动（可选预设）—下一步—Babel,Router,Linter/Formatter,使用配置文件几项均打开—下一步—选ESLint+Standard config 其他不改变—创建项目。

1.3 配置Element-UI组件库
页面依次选择：插件—右上角+添加插件—搜索框输入vue-cli-plugin-element选中—安装—Fully import (默认)改成Import on demand . zh-cn(默认)—完成安装。

1.4 配置axios库
页面依次选择：依赖—右上角+安装依赖—搜索框输入axios选中—安装。

1.5 初始化git远程仓库
码云远程仓库网址：https://gitee.com

1.6 将本地项目托管到Github或码云（Gitee）中
（1）注册登录：https://gitee.com打开网页注册码云后登录，首次登录需要设置一下；
（2）设置SSH公钥：设置—SSH公钥—怎样生成公钥右键在新标签中打开链接—仓库管理右键在新标签中打开链接—打开生成/添加SSH公钥—复制命令（将命令中的邮箱改为注册码云时的邮箱）—粘贴到命令提示符窗口（快捷键按win+R，输入cmd，按enter回车打开）中，连按三次Enter回车即可生成—找到文件存放的位置文件 id_rsa.pub 打开—复制文件中的内容粘贴到公钥中—输入标题—输入密码—添加成功—测试：命令提示符窗口输入ssh-T git@gitee.com 命令按enter回车—输入yes按enter回车—看到提示Hi xxxx即成功；
（3）创建仓库：在码云中依次操作右上角+—新建仓库—输入仓库名称（唯一不重复的名称）—下方□（三个）不勾选—创建—出现Git全局设置的两行代码，分别复制粘贴到命令提示符窗口中输入执行；
（4）上传项目至码云仓库：已有仓库—复制中间一行代码—找到已有的项目文件打开—按shift+鼠标右键，选择在此处打开Powershell窗口中（S）—输入git status按enter回车—（状态需要处理一下）输入git add . 按enter回车—git commit -m "add files"按enter回车—输入git status按enter回车，出现on branch master……即处理好—粘贴复制的代码（中间一行有http……）执行—复制第三行代码执行—弹出用户名、密码，输入后即可连接成功。

注意：若最后输入命令不出现弹框，则需要检查git账户（控制面板—用户账户—凭据管理—Windows凭据—前缀有git……的账户删除即可重新输入命令尝试连接），账户重复会影响无法创建连接。