sass基于node环境,故需要安装node-sass和sass-loader
获取dom元素:
<div ref="myDiv"></div>
this.$refs.myDiv
vue脚手架
使用及文件
vue create 项目名:创建项目
src目录
- main.js是入口文件
- app.vue是总组件文件
配置ajax
步骤
- 安装axios包 npm i axios -S
- 在src目录下创建requests文件夹,专门用来放ajax的配置文件
- 新建index.js,在里面创建ajax实例,定义并导出处理方法
注1:在main.js的文件里导入requests的方法并挂载到Vue的prototype上,这样就可以在任何一个vue实例里使用this.$http.requests中的方法发送请求import axios from 'axios'; const ajax = axios.create({ baseURL: 'http://jsonplaceholder.typicode.com/' }); //导出方法 export const getTodos = () => { //这里的ajax.get是一个promise,get里面指的是请求的目标网址的路由 return ajax.get('/todos'); }
注2:以上ajax方法即请求返回的数据处理在App.vue的create阶段执行
ajax拦截器interceptors
- 请求拦截器
ajax.interceptors.request.use((config) => {
config.headers.token="asdf";
return config;
})
作用:1.发送请求中设置CSS显示全局的loading状态
2.在请求参数头部加上全局的参数,比如token
- 响应拦截器
ajax.interceptors.response.user(resp => {
if (resp.status === 200){
//如果正确就返回出去的数据即可
return resp.data;
}
//这里统一处理状态错误,必须要后端配合,接口返回的格式必须完全一致
})
作用:1.接收响应后隐藏全局的loading状态
2.全局处理错误
注必须return,否则拦截不会执行
开发环境和真实环境
在开发时后端的数据没有完成,ajax需要请求mock数据,但真实项目上线后就要换成真数据,所以在ajax配置中要判断是开发环境还是生产环境来选择不同的api接口
const isDev = process.env.NODE_ENV === 'development';
const ajax = axios.create({
baseURL: isDev ? 'http://jsonplaceholder.typicode.com/' : '真实项目的api地址'
});
npm run build
将所有目录文件压缩打包到dist文件里,但打包后的文件只能在服务器上运行