vue学习第三天 ------ 临时笔记

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

说明：之前两天属于入门，文章可能存在片段信息

vue2.x+webpack快速搭建前端项目框架详解
http://www.jb51.net/article/129463.htm
Vue cli + Webpack-simple 怎么修改生产环境下运行的端口？
https://segmentfault.com/q/1010000012994924

webpack和webpack-simple区别（如何引入css文件）
https://www.cnblogs.com/xuange306/p/7114945.html

Vue2.0小白入门教程
https://ke.qq.com/course/256052#term_id=100301895https://www.cnblogs.com/grimm/p/5767945.html

1.镜像

在使用npm之前，最好把镜像换成淘宝的,长久使用，跑一下命令：
npm config set registry https://registry.npm.taobao.org
替换成功后跑命令：
npm config get registry
显示淘宝镜像路径的话就代表替换成功

安装依赖npm install

三、添加相应的框架以及依赖

1.引入sass预编译工具加快编码速度，跑命令npm install node-sass --save-dev, npm install sass-loader --save-dev,如果node-sass比较难装的话可以换成cnpm来下载依赖，具体可百度下做法。

操作：

在components目录下新建一个header的目录，新建两个文件header.vue header.scss，然后引入到app.vue中使用，因为vue讲的是模块化开发，所以我喜欢把样式跟组件放到一个文件夹里跟其他模块区分，

App.vue:

header.scss:

这样就证明sass 是安装成功了。

2.引入axios接口请求框架，跑命令npm install axios --save-dev,npm install qs;

然后在src目录下新建一个http.js文件进行接口请求的相关配置，

import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs';var instance = axios.create({
//baseURL: 'https://some-domain.com/api/',
timeout: timeout,
responseType: 'json', // default,
//headers: {'apikey': 'foobar'},
transformRequest:function(data,headers){
//为了避免qs格式化时对内层对象的格式化先把内层的对象转为
//由于使用的form-data传数据所以要格式化
if (typeof data == 'string') { headers.post['Content-Type'] = "application/json; charset=utf-8"; }
else if(!(data instanceof FormData)){
headers.post['Content-Type'] = "application/x-www-form-urlencoded"; for(let key in data){
if(data[key]===undefined){
data[key]=null;
}
}
data = Qs.stringify(data);
} return data;
}
});
export default instance; Vue.prototype.$http=instance;