vue续集3

最新推荐文章于 2024-09-01 09:35:41 发布
最新推荐文章于 2024-09-01 09:35:41 发布
阅读量113 收藏
点赞数
文章标签： webpack javascript 前端 ViewUI
原文链接：http://blog.51cto.com/10983441/2434536
版权

1.axios

1.1安装

cd C:\Users\Administrator\Desktop\myvue
npm init --yes
npm install axios -S

vue续集3
vue续集3

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>

vue续集3

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>

vue续集3

2.webpack

2.1webpack介绍

webpack: 对前端中的资源编译打包、支持模块化es6的module
前端中也是有模块的，导入方式是下面这种用法
  ​ import xxx from './index.js'

1.下载webpack为项目开发依赖
npm install webpack@3.12.0 -D
2.查看
webpack -v

vue续集3

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 />`
});

vue续集3

注意：
进入到你的项目目录执行命令
每次有修改，需要重新执行上面的命令，使其生效

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>

vue续集3
vue续集3

2.3webpack的深入使用

上面我们每次修改js代码，都要重新手动执行webpack命令
下面配置下，不需要每次手动执行

vue续集3
vue续集3

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

}

vue续集3
vue续集3

2.4再次灵活配置

在上面的基础上，再次修改下配置

vue续集3
vue续集3

2.5多个webpack.config.js

vue续集3
vue续集3
vue续集3

2.6css-loader

vue续集3
vue续集3
vue续集3
vue续集3
vue续集3
vue续集3

2.7webpack插件介绍

vue续集3

// 插件
    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',//参照物
        })
    ]
}

vue续集3

npm  install -g http-server
  使用：
  Hs -o -p 8888

vue续集3

2.8 webpack-dev-server

npm install webpack-dev-server@2.9.0 -D

vue续集3
vue续集3
vue续集3
vue续集3
vue续集3

2.9vue-loader和单页组件

npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 -D
npm install vue@2.5.17 -D

vue续集3
vue续集3

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 />`
});

vue续集3
vue续集3

bisounie3680
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前后端分离vue+java+mysql续集
07-26
前后端分离vue+java+mysql续集
vue-e-commerce：Vue出一个电商
03-04
:rocket: 技术前端：Vue，Vue路由器，Element-UI，Axios， 图表后端： Node.js ， 表示， 重量， 的MySql ， 续集，MSSQL，.NET Core Web API 历史 日期 描述 2021/2/24 安装Vue，通过Vue建立专案项目添加Element-...
Vue3学习笔记
Lipn_的博客
09-21 434
Vue3从入门到精通，收藏这一篇文章即可！
vue续集1
bisounie3680的博客
08-31 99
1.vue组件 1.1局部组件的使用 var App = { tempalte:` <div class='app'></div>` }; //2.挂子 <App />单闭合 双闭合都可以 new Vue({ el:"#app", //用子 template:<App /> compon...
vue续集2
bisounie3680的博客
09-01 74
1.前端路由 1.1为什么做单页面应用 （1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 “白屏” 用户体验不好 （2）SPA 单页面应用 ： 锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据,页面不立刻跳转用户体验好 1.2前端路由的原理 <!DOCTYPE html> <...
vue续集4
bisounie3680的博客
09-01 83
1.脚手架 1.1脚手架介绍 前端开发中提到的“脚手架”是一个形象的比喻，比喻各类语言的前期工作环境。 在软件开发上（当然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。 比如vue.js就有个vue-cli脚手架，基于node.js的开发环境，作...
Vue基础知识
csdnidofkdy2138的博客
08-02 1029
可在一个完整项目中使用vue，或某一个功能上使用vue，或某一个html中使用vue的某个功能。基于html的模板语法，是我们能够声明式的将其组件实例的数据绑定到呈现的dom上，所有的vue模板都是语法层面合法的html，可被符合规范的浏览器和html解析器解析。构用户界面的js的渐进式框架，基于htlm、css、js，并提供声明式组件化的编程模型，帮你高效开发用户界面。node.js：是一个开源的，跨平台的javaScript运行环境，简单来说它是一款应用程序，是一款软件，可运行javaScript。
vue实现页面锁屏完美解决（续集）
呵呵的牛
06-06 2488
vue实现页面锁屏完美解决（续集）
vue2+vue3小白零基础教程-vue3篇，全网2021最详细教程
lvyuanxiang的博客
09-23 1374
Vue2+Vue3小白零基础教程—vue3篇 提示：Vue2系列请参考Vue2+Vue3小白零基础教程—vue2篇文章，本文为vue2小白零基础教程续集。 6. Vue3快速上手 6.1 简介 2020年9月18日,uejs发布3.0版本,代号: One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址: https://github.com/vuejs/vue-next/releases/tag/v3.0.0 6.2
Vue的模板语法（续集）
qq_62331938的博客
09-03 100
组件(Component)是Vue最强大的功能之一组件可以扩展HTML元素，封装可重用的代码组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树全局和局部组件全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。局部组件: new Vue({el:'#d1',components:{...}})注册后，我们可以使用以下方式来调用组件：props。
Vue全家桶(一)
luckypian
08-27 1384
今天写了一天的时间，麻烦读者怀一颗感恩的心阅读哈~小编提前感谢大家咯
vue-douyin：基于Vue.js的模仿抖音的Web App
02-03
Vue CLI 3 Vue-socket.io 触控笔 初步技术栈 koa2 续集 伊奥雷迪斯 套接字 项目运行 使用Docker： 自学docker时用这个项目精心实践，不用本地安装数据库啥的，（仅效果预览）推荐使用这种方法！！！ 首先安装，...
Webpack中的 HTTP 压缩
weixin_47342624的博客
08-27 388
http压缩，是指一种内置在服务器和客户端之间改进传输速度和带宽利用率的方式。http 数据在服务器发送前，通过 webpack配置进行压缩；兼容的浏览器在向服务器发送请求时，在请求头中会添加浏览器自身支持的压缩格式，告知服务器；例如：服务器在浏览器支持的的压缩格式下，直接返回对应压缩后的文件，并在响应头中告知浏览器；i 例如。
Webpack打包常见问题及优化策略
最新发布
官方推荐
09-01 2332
Webpack打包常见问题及优化策略
Webpack中的自定义 loader 的简单实现
weixin_47342624的博客
08-28 576
webpack 中 loader是用于对模块的源代码进行转换（处理）的插件。例如 webpack 中常见的loader， css-loader、babel-loader。关于 loader：loader本质上是一个导出为函数的JavaScript模块，即函数；loader runner库会调用这个函数，然后将上一个loader产生的结果或者资源文件传入进去；自定义 loader函数的接收参数有content(资源文件的内容)、map(sourcemap的数据)、meta(一些元数据)；
【webpack】wabpack5 常用配置
zhangankang的博客
08-26 413
loader本质就是一个导出一个函数，这个函数的返回值是可以执行的js代码；以下实现类似 style-loader 功能
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 626
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
前端性能优化
GXY1551705593的博客
08-28 837
是指在用户使用网页或前端应用程序的过程中，通过一系列的策略和方法，使得页面加载速度更快，提升用户的操作反馈速度，从而为用户带来更好的使用体验的过程。
Vue3.x入门：生态与优化分析
"本文档主要介绍了Vue3.x的基本概念和优势，并列举了一些主流的Vue3组件库，强调了Vue3在社区生态、整体优化和市场应用方面的进展。同时，提到了Vue3开发环境的搭建，包括使用vue-cli创建项目。" Vue3.x作为Vue.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值