vue脚手架里面内容的介绍
1.项目依赖 node-modules 每次接到新的脚手架文件时 首先要看有没有这个文件 没有的话就需要安装 输入
npm i 或 yarn 或yarn install
2.public文件基本上不动 里面保存的是 图标 和根HTML页面
3.src比较重要是我们操作的目录
assets:资源文件 里面保存的是项目图片 音乐 视频 字体 css这些
components: 组件文件 放的是功能级组件
router:路由文件 简单理解就是每次点击后页面更换
store:状态管理, 对数据的操作
view:页面级组件写在这里
App.vue:跟页面。展示就靠这个页面了 是个大佬级的“人物”
main.js 入口文件(一个程序只能有一个入口文件)
.browserslistrc:浏览器兼容
.gitignore 类似多人协同在GitHub上
package-lock:项目依赖的内容都在这里面 可以查看得到。
README:项目介绍
脚手架里面网络请求
1.在项目文件里面右键 集成终端打开 输入 npm i axios
2.在入口文件main.js中配置axios 用于在整个工程中都可以发起网络请求
输入 import axiosapp from 'axios'(axiosapp自己起的名字 默认导出的是个函数)
3.配置给vue的原型对象
Vue.prototype.$request=axiosapp 和第二步保持一致 request是一个函数 用来发送网络请求,名字随意起
4.之后在需要网络请求的vue文件夹下进行请求
例子:
<script>
exportdefault{
asynccreated() {
letres=awaitthis.$request({//request要和第三步保持一致
url:`/dy/api/v1/getColumnList`,
method:"get",
});
this.lists=res.data.data;
console.log(this.lists);
},
</script>
直接进行网络请求的话会出现跨域问题,这里用代理服务器进行解决
1.在脚手架文件里找 vue.config.js文件
对网址进行编辑
2.在module.exports={}里面添加上下面这句话(根据实际网址进行修改代码)
devServer: {
// port:8081,
open: true,
// proxy 代理
proxy: {
// 配置一个标识
"/dy": {
target: "http://capi.douyucdn.cn",
changeOrign: true,// 是否要切换源头 一定要为true 否则http://local host:8081/api/v1/getColumnList,
pathRewrite: {
"^/dy": ""
}
},
}
}
3.网络请求的地址可以用配置的标识进行替代