# 前端文档
### 运行步骤
1. npm install
2. npm run dev
### 部署步骤
1. 修改constants.ts中的BASE_URL
2. vite build
3. 将dist部署到nginx
### 开发步骤
共分三步:开发接口、开发view、开发路由
第一步:开发接口
在api文件夹下,新建请求文件,然后写入api请求代码,如下
```
import { get, post } from '/@/utils/http/axios';
enum URL {
list = '/myapp/admin/notice/list',
create = '/myapp/admin/notice/create',
update = '/myapp/admin/notice/update',
delete = '/myapp/admin/notice/delete',
}
const listApi = async (params: any) => get<any>({ url: URL.list, params: params, data: {}, headers: {} });
const createApi = async (data: any) =>
post<any>({
url: URL.create,
params: {},
data: data,
headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' },
});
const updateApi = async (params: any, data: any) =>
post<any>({
url: URL.update,
params: params,
data: data,
headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' },
});
const deleteApi = async (params: any) => post<any>({ url: URL.delete, params: params, headers: {} });
export { listApi, createApi, updateApi, deleteApi };
```
第二步:开发view页面
在view文件夹下,新增页面vue文件,然后写入页面代码,比如user.vue
第三步:设置路由
在router的root.js文件里面配置路由地址。如下
```
{ path: 'overview', name: 'overview', component: () => import('/@/views/overview.vue') },
{ path: 'repair', name: 'repair', component: () => import('/@/views/repair.vue') },
{ path: 'asset', name: 'asset', component: () => import('/@/views/asset.vue') },
{ path: 'park', name: 'park', component: () => import('/@/views/park.vue') },
{ path: 'thing', name: 'thing', component: () => import('/@/views/thing.vue') },
{ path: 'comment', name: 'comment', component: () => import('/@/views/comment.vue') },
{ path: 'user', name: 'user', component: () => import('/@/views/user.vue') },
```
即可
### 配置解释
1. env.development 开发环境配置
2. eslintrc.js 代码规范化提示
3. vite.config.js vite 开发服务器配置
### 常见问题
#### 变量
https://blog.csdn.net/qq_41636947/article/details/117907448
#### antd的css引入方式
在index.html里面引入的cdn
#### cdn
https://cdn.jsdelivr.net/npm/ant-design-vue@3.2.20/dist/
https://cdn.staticfile.org/ant-design-vue/3.2.20/antd.min.css
### public文件夹内容在build后会自动打到dist中
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
基于python的社区养老管理系统 (177个子文件)
.eslintignore 100B
.gitignore 328B
.gitignore 205B
index.html 1KB
favicon.ico 15KB
1673963977440.jpeg 784KB
1674045282581.jpeg 784KB
1674045324510.jpeg 784KB
1674045266113.jpeg 784KB
1684565863904.jpeg 77KB
1684565423182.jpeg 30KB
1.jpeg 28KB
admin-login-bg.jpg 72KB
demo.jpg 40KB
1.jpg 40KB
bg2.jpg 38KB
qunerweima.jpg 19KB
avatar.jpg 6KB
stylelint.config.js 2KB
.eslintrc.js 2KB
root.js 1KB
index.js 1KB
bootstrap.js 707B
constants.js 420B
main.js 389B
index.js 328B
prettier.config.js 215B
postcss.config.js 62B
package-lock.json 1.03MB
package.json 1KB
tsconfig.json 1KB
reset.less 330B
index.less 39B
base.less 0B
yarn.lock 135KB
doc.md 32KB
readme-doc.md 8KB
README.md 2KB
Readme.md 2KB
readme.md 2KB
login.png 1.95MB
login-banner.png 62KB
logo.png 23KB
k-logo.png 2KB
logo.png 2KB
Play.png 2KB
1674045308177.png 901B
1684565876995.png 388B
models.py 8KB
user.py 6KB
serializers.py 4KB
settings.py 4KB
overview.py 3KB
urls.py 3KB
classification.py 3KB
tag.py 2KB
medical.py 2KB
family.py 2KB
banner.py 2KB
worker.py 2KB
notice.py 2KB
utils.py 2KB
loginLog.py 2KB
LogMiddleware.py 1KB
urls.py 936B
authentication.py 768B
manage.py 662B
__init__.py 515B
handler.py 514B
errorLog.py 475B
opLog.py 462B
wsgi.py 389B
asgi.py 389B
permission.py 361B
admin.py 236B
apps.py 142B
__init__.py 98B
tests.py 60B
__init__.py 32B
__init__.py 0B
__init__.py 0B
__init__.py 0B
__init__.py 0B
.stylelintignore 27B
logo.svg 10KB
setting-push-icon.svg 4KB
banner2.svg 3KB
wb-share.svg 2KB
setting-card-icon.svg 2KB
recommend-hover.svg 2KB
ts.svg 2KB
cart-icon.svg 2KB
setting-icon.svg 2KB
setting-safe-icon.svg 2KB
pwd-hidden.svg 1KB
order-icon.svg 1KB
want-read-hover.svg 1KB
wx-pay-icon.svg 1KB
order-thing-icon.svg 1KB
ali-pay-icon.svg 1KB
共 177 条
- 1
- 2
资源评论
西门吹雪1998
- 粉丝: 2752
- 资源: 99
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功