vue续集3

时间 2019-11-05

标签 vue 续集繁體版

原文原文链接

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.jsjavascript

// 声明入口的组件
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.jscss

// 整个程序的入口

// 引入第三方的库  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.htmlhtml

<!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.jsvue

//自带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.vuejava

<!--  组件结构 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.vuenode

<template>
    <div>

        <h3>{{att}}</h3>
    </div>
</template>

<script>
export default {

  name: 'Header',

  data() {
    return {
        att:"alex"
    };
  },
};
</script>

<style scoped>
h3{
    color: green;
}

</style>

main.jswebpack

import Vue from './vue.js'

import App from './App.vue'

// 导入css
import './main.css'
new Vue({
    el:'#app',
    data(){
        return {

        }
    },
    components:{
        App
    },
    template:`<App />`
});