1.axios
1.1安装
cd C:\Users\Administrator\Desktop\myvue
npm init --yes
npm install axios -S
1.2axios的get请求与post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data(){
return {
msg:''
}
},
template:`
<div>
<button @click = 'sendAjax'>发Get</button>
<div v-html = 'msg'></div>
<button @click = 'sendAjaxByPost'>发post请求</button>
</div>
`,
methods:{
sendAjax(){
// 发送get请求
axios.get('http://127.0.0.1:8800/')
.then(res=>{
console.log("get----res.data--------------------",res.data);
console.log("get----typeof res.data--------------------",typeof res.data);
this.msg = res.data;
})
.catch(err=>{
console.log(err);
})
},
sendAjaxByPost(){
var params = new URLSearchParams();
params.append('name','vita');
axios.post('http://127.0.0.1:8800/create',params).then(function(res) {
console.log("post----res--------------------",res);
}).catch(err=>{
console.log("post----err--------------------",err);
})
}
}
}
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App
},
template:`<App />`
})
</script>
</body>
</html>
1.3axios的默认配置,this的箭头指向
// 挂载 Vue.prototype.$axios = axios; 使用插件
Vue.prototype.$axios = axios;
// Vue.use(axios); 这个不要记了 删掉,相当于上面一行
// 配置公共的url
axios.defaults.baseURL = 'http://127.0.0.1:8800';
sendAjaxByPost(){
// var _this = this;
var params = new URLSearchParams();
params.append('name','alex');
this.$axios.post('/create',params).then( (res)=>{
// 解决this的指向问题,在vue中用函数 建议使用箭头函数
//不使用箭头函数,this是window对象
console.log("post--this---------------",this);
console.log("post--res---------------",res);
// 初学者容易犯的错
// _this.datas = res;
this.datas = res;
}).catch(err=>{
console.log(err);
})
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<!-- vue和axios都是全局的对象 未来 axios会成为局部作用域-->
<script type="text/javascript">
// 挂载 Vue.prototype.$axios = axios; 使用插件
Vue.prototype.$axios = axios;
// Vue.use(axios); 这个不要记了 删掉,相当于上面一行
// 配置公共的url
axios.defaults.baseURL = 'http://127.0.0.1:8800';
var App = {
data(){
return {
msg:'',
datas:[]
}
},
template:`
<div>
<button @click = 'sendAjax'>发Get</button>
<div v-html = 'msg'></div>
<button @click = 'sendAjaxByPost'>发post请求</button>
{{datas}}
</div>
`,
methods:{
sendAjax(){
// 发送get请求
this.$axios.get('/')
.then(res=>{
console.log(res.data);
console.log(typeof res.data);
this.msg = res.data;
})
.catch(err=>{
console.log(err);
})
},
sendAjaxByPost(){
// var _this = this;
var params = new URLSearchParams();
params.append('name','alex');
this.$axios.post('/create',params).then( (res)=>{
// 解决this的指向问题,在vue中用函数 建议使用箭头函数
//不使用箭头函数,this是window对象
console.log("post--this---------------",this);
console.log("post--res---------------",res);
// 初学者容易犯的错
// _this.datas = res;
this.datas = res;
}).catch(err=>{
console.log(err);
})
}
}
}
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App
},
template:`<App />`
})
</script>
</body>
</html>
2.webpack
2.1webpack介绍
webpack: 对前端中的资源编译打包、支持模块化es6的module
前端中也是有模块的,导入方式是下面这种用法
import xxx from './index.js'
1.下载webpack为项目开发依赖
npm install webpack@3.12.0 -D
2.查看
webpack -v
2.2webpack基本使用
App.js
// 声明入口的组件
var App = {
template:`<div>我是入口组件</div>`
};
// 声明并导出
export var num = 2; //作为一整个对象的key抛出
// 声明在导出
var num2 = 4;
export {num2}
// 抛出一个函数
export function add(x,y) {
return console.log(x+y);
}
// 先抛出
export default App;
main.js
// 整个程序的入口
// 引入第三方的库 es6Module模块导入方法
import Vue from './vue.js'
//再导入
// import App from './App.js'
// 对象的解构
// import {num,num2,add} from './App.js'
import * as object from './App.js'
console.log("object--------------", object);
console.log("object.num--------------", object.num);
// console.log(num);
// console.log(num2);
// add(3,5)
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App:object.default
},
template:`<App />`
});
注意:
进入到你的项目目录执行命令
每次有修改,需要重新执行上面的命令,使其生效
module.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<!-- bundle.js是通过webpack编译打包输出的js文件 -->
<script type="text/javascript" src="./bundle.js"></script>
<!-- webpack ./main.js ./bundle.js -->
<!-- 这种语法浏览器不兼容 -->
<!-- <script type="text/javascript">
import Vue from './vue.js'
</script>
-->
</body>
</html>
2.3webpack的深入使用
上面我们每次修改js代码,都要重新手动执行webpack命令
下面配置下,不需要每次手动执行
./webpack.config.js 文件名只能是这个
//自带nodejs环境 cmd规范
// module.exports = {}
// var a = require('./webpack.config.js')
// 如果在项目中配置了webpack.config.js 那么在终端中直接输入webpack,默认识别webpack.config.js项目配置文件
module.exports = {
// 入口
entry:{
"main":'./main.js'
},
// 出口
output:{
filename:'./bundle.js'
},
watch:true
}
2.4再次灵活配置
在上面的基础上,再次修改下配置
2.5多个webpack.config.js
2.6css-loader
2.7webpack插件介绍
// 插件
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',//参照物
})
]
webpack.prod.config.js
//自带nodejs环境 cmd规范
// module.exports = {}
// var a = require('./webpack.config.js')
// nodejs中内容模块
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// html-webpack-plugin
// 如果在项目中配置了webpack.config.js 那么在终端中直接输入webpack,默认识别webpack.config.js项目配置文件
module.exports = {
// 入口
entry:{
"main":'./src/main.js'
},
// 出口
output:{
path:path.resolve('./dist'),//相对转绝对
filename:'./bundle.js'
},
// 模块中的loader loader加载器 它能对css、json png jpg mp3 mp4 es6的js代码
module:{
loaders:[
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
},
// 插件
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',//参照物
})
]
}
npm install -g http-server
使用:
Hs -o -p 8888
2.8 webpack-dev-server
npm install webpack-dev-server@2.9.0 -D
2.9vue-loader和单页组件
npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 -D
npm install vue@2.5.17 -D
App.vue
<!-- 组件结构 html
业务逻辑 js
组件样式 css
-->
<template>
<!-- 一定是闭合标签 -->
<div class="app">
<h3>{{msg}}</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<Header />
</div>
</template>
<script>
import Header from './Header.vue'
export default{
data(){
return {
msg:'学习单页组件'
}
},
methods:{
},
computed:{
},
components:{
Header
}
}
</script>
<!-- scoped 它表示只对当前组件的样式起作用 -->
<style scoped>
/*全局的*/
h3{
color: yellow;
}
</style>
Header.vue
<template>
<div>
<h3>{{att}}</h3>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
att:"alex"
};
},
};
</script>
<style scoped>
h3{
color: green;
}
</style>
main.js
import Vue from './vue.js'
import App from './App.vue'
// 导入css
import './main.css'
new Vue({
el:'#app',
data(){
return {
}
},
components:{
App
},
template:`<App />`
});