网站降权查下,设计模板网站都有哪些,网站建设的基本要素,网页视频提取软件src文件夹
src 目录指的是源代码目录#xff0c;存放项目应用的源代码#xff0c;包含项目的逻辑和功能实现#xff0c;实际上线之后在浏览器中跑的代码就是它们 apis - 业务接口 assets - 静态资源 #xff08;图片#xff09; components - 组件 公共组件 constants…
src文件夹
src 目录指的是源代码目录存放项目应用的源代码包含项目的逻辑和功能实现实际上线之后在浏览器中跑的代码就是它们 apis - 业务接口 assets - 静态资源 图片 components - 组件 公共组件 constants - 常量 不需要变动的数据 directive - 全局指令 --- 指令是用于在模板中将 DOM 元素绑定到底层 Vue 实例的数据的一种特殊标记如 v-model、v-for、v-if icons - 图标 png svg 字体图标 Layout - 搭建项目的架子 -- 布局 utils - 工具函数 转化函数 校验函数 请求request views - 页面级组件 路由级别组件 业务组件 包文件 - package.json
可执行命令 项目依赖
开发和生产都需要 仅在开发时需要 应用入口 - main.js 组件树 - App.vue 路由文件 - vueRouter
只有一级路由的配置写法 {path: /workbench,component: Layout,children: [{path: , // 地址为空name: workbench,component: () import(/views/workbench/index),meta: { title: 工作台, icon: el-icon-eleme }}]}
同时拥有一级和二级路由的配置写法
{path: /park,component: Layout,name: park,meta: { title: 园区管理, icon: el-icon-office-building },children: [{path: building,name: building,meta: { title: 楼宇管理 },component: () import(/views/Park/Building/index)},{path: enterprise,name: enterprise,meta: { title: 企业管理 },component: () import(/views/Park/Enterprise/index)}]} 状态管理 - Vuex Vuex 将应用程序的状态集中存储在一个对象中称为状态树store。Vuex 规定只有通过提交 mutation同步操作来更改状态。Mutation 是一种特殊函数用于更改 store 中的状态。虽然 mutation 必须是同步的但可以通过 action 来处理异步操作。Action 类似于 mutation但它负责提交 mutation 而不是直接变更状态这使得你可以在 action 中执行异步操作。为了更好地组织代码Vuex 允许将 store 分割成模块。每个模块拥有自己的 state、mutations、actions 和 getters使得状态管理更加模块化和清晰。 请求模块说明
request.js模块说明 import axios from axios
const service axios.create({baseURL: https://api-hmzs.itheima.net/v1,timeout: 5000 // request timeout
})
// 请求拦截器
service.interceptors.request.use(config {return config},error {return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response {return response.data},error {return Promise.reject(error)}
)export default service 一般项目中多数的接口使用的配置是相似的所以需要统一配置一次 请求拦截器主要做的事情是在请求发送之前针对请求参数对象做一些事情比如添加鉴权Token 响应拦截器主要做的事情是在响应数据返回到业务方之前针对响应对象做一些事情比如简化data错误处理等 apis模块说明 基础封装逻辑
import request from /utils/request// 登录函数
/*** description: 登录函数* param {*} data { mobile,password}* return {*} promise*/
export function login({ mobile, password }) {return request({url: /sys/login, // baseURL urlmethod: POST,data: {mobile,password}})
} apis中的所有业务函数都采用同样的封装逻辑参数格式/返回值格式方便维护 apis中的所有业务函数内部都采用request.js中统一导出的axios实例达到配置一次管控所有接口的目的 路由和菜单的关系
路由表是菜单的数据支撑 路由对象的属性和菜单显示对应 菜单通过遍历路由表来显示路由表作为数据来源 路由对象meta属性中的icon决定了显示的图表title决定了要显示的标题 使用Git管理项目 删除原有的.git文件切断和原本远程仓库的链接 重新执行 git init . 命令, 初始化本地仓库 在gitee上新增远程仓库 关联远程仓库到本地 推送本地到远程 后续日常提交 git add . git commit -m 提交说明
