.
├── public // 项目 html 模板
│ ├── favicon.ico
│ └── index.html
├── src // 源代码
│ ├── api // 接口请求
│ ├── assets // 公共静态资源
│ │ ├── commom // 公共图片
│ │ │ └── original // 未压缩图片
│ │ ├── h5 // h5图片
│ │ │ └── original // 未压缩图片
│ │ └── web // web图片
│ │ │ └── original // 未压缩图片
│ ├── components // 公共组件
│ │ └── _global // 组件全局注册
│ ├── extend // 扩展文件
│ ├── plugins // 第三方库或者组件统一入口
│ │ └── axios // http请求封装（axios）及请求错误处理
│ ├── router // Vue Router路由配置文件
│ ├── store // Vuex 数据状态管理
│ ├── utils // 公共工具函数
│ ├── views // 业务组件（这里需要进一步描述业务模块）
│ ├── App.vue // 根组件
│ └── main.js // 入口 js
├── .env.production // 环境变量：线上开发环境
├── .env.development // 环境变量：本地开发环境
├── .eslintrc.js // eslint 配置文件
├── .gitignore // git 忽略文件
├── babel.config.js // Babel 配置文件
├── package.json // 依赖管理
├── README.md // 项目文档
└── vue.config.js // Vue CLI 3 配置- Project setup
npm install
- Compiles and hot-reloads for development
npm run serve
- Compiles and minifies for production
npm run build
- Lints and fixes files
npm run lint
-
取名小写，使用
_隔开 例如：layout_top -
src路径使用
@/例如：@/assets/commom/logo.png @commom/logo.png
-
components中全局注册组件的文件_global.js -
main.js引入@/components/_global.js -
页面中使用,无需引入组件，直接使用
<HelloWorld /> -
ps:
组件名称不可重复
-
apis文件夹里面创建文件home.js
-
引入
import axios from '../plugins/axios/index -
在
home.js添加接口: 传两个参数params(传值)otherParams(headers),不传则默认{}
export function heros(params={},otherParams={}) {
return axios({
url: '/api/admin/checkip/',
method: 'get',
params,
...otherParams
})
}
ps: `参数自定义，可传多个`
- 页面使用
async function(){
// 调用接口heros并传值
const res =await heros({
name:'nameName',
type:0
},{
headers:{"x-requested-with": "XMLHttpRequest"}
})
// 下面是需要做的操作
this.total = res.body.total
}