axios & webpack

脚手架

https://cli.vuejs.org/

全局安装

npm install -g @vue/cli

安装完，会在全局有vue命令

vue -V

创建项目

vue create weibo

定位到该文件夹

cd weibo

启动服务器

npm run serve

axios

//axios的post请求：

import axios from 'axios';
import qs from "qs";
axios.post(
    "http://39.105.178.245:3000/users/login",
    qs.stringify({
        username: this.usernamevlu,
        password: this.passwordvlu
    })
).then((res) => {
	console.log(res)
}, (err)=>{
    console.log(err)
});

//axios的get请求

import axios from 'axios';
axios.get("http://39.105.178.245:3000/users/login", {
    params: {
        name: "刘德华",
        age: "18"
    },
}).then((data) => {
    console.log(data);
}, (err) => {
    console.log(err);
})

webpack

webpack其实是require.js和gulp的后端实现方案

webpack = require.js + gulp

webpack想做模块化和资源整理处理压缩

定义模块

define()       //require.js
module.exports //ES5
export

引入模块

require()
require()
import

安装

npm install webpack webpack-cli -g

全局里面会有一个命令webpack

全局安装，cmd会有webpack命令

npm install webpack -g
npm install webpack-cli -g

本地再装一次

npm install webpack

配置文件

新建一份webpack.config.js配置文件

四大概念

• 入口(entry)
• 出口(output)
• loader // 专门处理各种类型文件的插件
• 插件(plugins) //专门帮你压缩重命名合并的插件

// 内置模块
const path = require('path');

// 自定义模块
module.exports = {
    // 输入
    entry: './src/index.js',
    // 输出
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    }
};

entry和output是我们webpack的必选项

运行

在命令行了里面执行webpack，然后在dist文件夹新建一份index.html去执行bundle.js文件

webpack的原理