【前端】记录第一次企业项目/简易

1. 环境配置

• node 建议16以上 【更迭太快】
• 教程

2. 导入项目

• vite + yarn + ts
• vben
• Ant Design Vue

1. 复用

• 即观察已有的项目 将相同的模块进行复制 新的内容自行添加修改

2. swagger

• 后端的api接口文档
• 根据给出的网址可以进行访问
• 可以看到接口信息 知道属性意义

3. Xmind

• 用于观察原型
• 原型：即对APP或者网站的UI设计或者是演示图

4. 步骤

1. 当我们收到一个项目

1. 观察目录结构
2. 观察package.json【可以大概知道用了什么框架】
3. 展示的页面观察【src \ views】
4. api的使用观察【src \ api】
5. 一般企业项目使用动态路由 所以直接增加菜单及其对应文件夹

5. 下载

• 直接下载gitee无法自动识别改动。建议克隆。
  

6. 克隆

• git clone 【复制的网址】
• 1. 克隆时出现的bug : 权限不够

“ You hasn‘t joined this enterprise! ”

• 先利用这条语句查看自己现在的账户是否符合需求

  • git config user.email 或者 git config user.name
  • 这种情况的出现可能是曾经将账号记忆在系统中 现在此账号不符合需求 所以不能克隆

• 解决方式 更改系统凭据

• 2. 因为之前有过固定账号 这里出现bug 表示账号之间有冲突

" remote: [session-1f47159e] Access denied "

• 解决方式 使用语句
  • git config --system --unset credential.helper
• 关于设置账号的详细情况 跳转博客

3. 启动项目

• 注意路径！

1. 试错

• 直接进行npm install 报错
• 报错后执行npm run dev 报错 【vite非可运行项】
  • 启动项看package.json中调试项
    
    

2. 解决

1. 【所需时间较长 慢慢等即可】

yarn

• 成功之后 npm run dev 即可

3. 其中可能发生的错误

1. ‘node’ lib/install.js

解决

npm i --registry https://registry.npm.taobao.org --ignore-scripts

安装插件的时候也有可能出现

解决 【增加强制性】【插件同样】

npm i --legacy-peer-deps --ignore-scripts --registry=https://registry.npm.taobao.org

npm install element-plus --save --legacy-peer-deps

4. VUE3 + TS 安装 element-plus

• element-plus地址
• npm install element-plus --save

这里是用全局引入

• 详细看这篇博客

main.ts中引入

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus, { size: 'small', zIndex: 3000 });

5. 如何创建新的动态路由和新的菜单

• 基于 前端动态路由已设置成功 增加菜单即自动增加路由和组件

1. 先观察菜单的路径和组件时如何写的
2. 寻找文件夹进行对应
3. 了解模块后进行创建

• 说明：
  • LAYOUT ：页面的基本框架
  • text ：文件夹 src\views\text
  • Lee ：text下的文件 src\views\text\Lee
  • index ：Lee下的vue文件 src\views\text\Lee\index.vue
    
    

6. 如何将本地代码提交

• 基于克隆

  • 更改之后在这里会显示更改的地方

  • 点击 + 号会变成暂存的更改

  • 输入框中一定要写东西 点击 提交和推送 暂存的更改即可同步到gitee

  • 建议这里先用测试文件试错 否则报错/出现障碍后可能更改都不会保留下来。

• gitee本地也可以增删改 效果相同