前端框架vue基础

于 2021-06-19 11:44:32 发布
阅读量1.9k 收藏 14
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lyyibaobao/article/details/118051603
版权
本文介绍了前端开发的三要素：HTML、CSS和JavaScript，并详细探讨了CSS预处理器如SASS和LESS。接着讲解了JavaScript框架，重点在于Vue.js，包括Vue的基础、MVVM模式、Vue的组件和生命周期，以及如何通过Vue-cli和Webpack构建项目。同时，文章提到了Axios在异步通信中的应用和Vue-router的路由管理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

typora-copy-images-to: E:\md文件\图片

前端三要素

  • HTML（结构）：超文本标记语言（Hyper Text Markup Language）决定网页的结构和内容
  • CSS（表现）：层叠样式表（Cascading Style Sheets ）设定网页表现样式
  • JavaScript（行为）：是一种弱类型脚本语言，启源代码不需要编译，而是由浏览器解析运行，用于控制行为

结构层（HTML）

表现层（CSS）

css层叠样式表是一门标记语言，并不是编程语言，因此不可以定义变量，可以引用，换句话说就是不具有任何语法支持，他主要缺陷如下：

  1. ​ 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多的重复选择器
  2. 没有变量和合理的样式重复机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护

导致无端添加了许多工作量，解决问题，前端开发人员会使用一中称为**【CSS预处理器】**的工具，提供缺失的样式层复用机制，减少冗余代码，提高代码的可维护性，提高开发效率

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者只要使用这种语言，进行css编码工作，用一种专门的编程语言，进行Web页面样式设计，在通过编译器转化为正常的CSS文件，以供项目使用

常见的CSS预处理器：
  • SASS：基于Ruby，通过服务器端处理，功能强大，解析效率高，需要学习Ruby语言，上手难度高于LESS
  • LESS：基于NodeJS，通过客户端处理，使用点单，功能SASS简单，解析效率低于SASS，实际开发中足够用，后端人员建议学习LESS

行为层（JavaScript）

javaScript 一门弱类型的脚本语言，启源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器有浏览器解析运行

Notive 原生JS开发

原生JS开发，也就是按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持

  • ES3
  • ES4(内部，未正式发布)
  • ES5（全浏览器都支持）
  • ES6（常用，主流版本：webpack打包成为ES5支持！）
  • ES7
  • ES8
  • ES9（草案阶段）

JavaScript 框架

  • jQuery：简化了DOM操作，缺点：Dom操作太频繁，影响前端性能，在前段眼里使用它仅仅为了兼容IE6、7、8
  • Angular：Google收购的前端框架，有一群java程序员开发，特点是将后台的MVC模式搬到了前端并增加了模块化开发概念，与微软合作，采用TypeScript语法开发，对后台程序员友好，对前端程序眼不友好
  • React：FaceBook出品，一款高性能的JS前端框架，特点提出了心的概念，**【虚拟DOM】用于减少真是的DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率，缺点是使用复杂，需要而外学习一门【JSX】**语言
  • Vue和Axios

image-20210117131635852

UI框架：

  • Ant-Design：阿里巴巴出品，基于React的UI框架
  • ElementUI i：iview、ice：饿了么出品，基于Vue的UI框架
  • Bootstrap：Twitter推出的一个用于前端开发的开源工具包
  • AmezeUI：“妹子UI”，一款HTML5跨屏前端框架

JavaScript 构建工具

  • Babel：JS编译工具，主要用于浏览器不支持ES新特性
  • WebPack：模块打包器，主要作用是打包、压缩、合并以及按序加载

三端统一

混合开发

​ 主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）能够调用设备底层赢件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

  • 云打包：Hbuild ——>HBuildX,DCloud吹牛；API Cloud
  • 本地打包：Cordova（前身是 PhoneGap）

微信小程序

UI开发的框架：WeUI

后端技术

image-20210117135130392

前端发展史

后端为主的MVC时代

为了降低开发复杂度，以后端为出发点，比如：Struts、SpringMVC等框架的使用，就是后端的MVC时代

image-20210117140554710

  • 发起请求到前端控制器（DispatcherServlet）
  • 前端控制器请求HandlerMapping查找Hander，可以根据xml配置、注解进行查找
  • 处理器映射器HnandlerMapping向前端控制器返回Handler
  • 前端控制器调用处理器适配器去执行Handler
  • Handler执行完成给适配器返回ModelAndView
  • 处理器适配器向前端控制器返回ModelAndView，ModelAndView是SpringMVC框架的一个底层对象，包括Model和View
  • 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图JSP
  • 视图解析器向前端控制器返回View
  • 前端控制器进行视图渲染，视图渲染将模型数据（在ModelAndView对象中）填充到request域
  • 前端控制器向用户响应结果
优点：

image-20210117142059055

缺点：

image-20210117142155382

基于AJAX带来的SPA时代

image-20210117142639669

image-20210117142700206

优点：

image-20210117142819573
image-20210117142832253

缺点：

image-20210117142937246

前端为主的MV* 时代

此处MV*模式下：

  • MVC（同步通向为主）：Model、View、Controller
  • MVP（异步通信为主）：Model、View、Presenter
  • MVVM（异步通信位置）：Model、View、ViewModel

为了降低复杂度，涌现出大量的前端框架，比如：AngularJS（提现了前端的mvc模式）、React（虚拟DOM）、Vue.js（把前两者结合起来了）、EmberJS等，这些框架的原则是按类型分层，比如Templates、Controller、Models，然后再从内层做切分

image-20210117144010689

优点：

image-20210117144132761

缺点：

image-20210117144252190

ModeJS带来的全栈时代

前端为主MV* 模式解决了很多问题，但是还存在不足的地方，随着NodeJS的兴起，JavaScript开始有能力运行服务端，意味着可以有一种新的开发模式：
image-20210117144836405

这种研发模式下，前后端的职责很清晰，对前端来说，两个UI层各司其职：

  • Front-end UI layer处理浏览器蹭的展现逻辑，通过css渲染样式，通过JavaScript添加交互功能，HTML的生成也可以放在这层，具体看应用场景
  • Back-end UI layer 处理器路由、模板、数据获取、Cookie等通过路由，前端终于可以自主把控URL Design，这样无论是单页应用还是多页应用，前端都可以自由调控，后端终于可以摆脱展现的强关注，转而可以专心与业务逻辑层的开发

​ 通过NodeJS，Web Server 层也是JavaScript代码，这意味着部分代码前后可以复用，需要SEO的场景可以再服务端同步渲染，由于一步请求太多导致的性能问题也可以通过服务端来缓解，前一种模式的不足，可以通过这种模式几乎能够完美解决

​ 与JSP模式相比，全栈模式是一种会，也的却是一种原始开发模式回归，不过是一种螺旋上升式的回归

基于NodeJS的全栈模式，依旧勉励很多挑战：

image-20210117145819950

Vue ：前端体系、前后端分离

​ 是一套用于构建用户的渐进式框架，发布于2014.2与其他的大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的和辛苦只关注视图层，不紧易于上手，还便于第三方库（vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合

Vue.js的API是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js

开发商：优雨溪

Soc （Separation of concerns）原则关注点分离 ：

HTML + CSS +JS : 视图：给用户看,刷新后台的数据
网络通信：axios

什么是MVVM

MVVM （Model-View -ViewModel） 是一种软件架构设计模式，有微软WPF（用于替代WinForm，以前就是这个技术开发桌面应用程序的）和Silverligth（类似与Java Applet，简单点就是浏览器上运行的WPF）的架构师Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式 由 John Gossman （同样也是WPF 和 Silverlight的架构师）于2005年在博客上发表

image-20210503175952681

Data Bindings 数据绑定 ViewModel把这些数据绑定在Vue（DOM）里面 ，ViewModel通过解析Model更新到View页面上 直接就是把Model里面定义的数据给他绑定到真实的DOM里面 ViewModel会监听View界面上的响应，然后回调到我们Model里面的定义的函数，然后就可以在这个Model的函数里面做更多的操作了

image-20210503181843226

MVVM源自于经典MVC（Model-View-Contrller）模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

image-20210117155337150

MVVM已经相当成熟，主要运用不仅仅在网络应用陈程序中开发中，当下流行的MVVM框架有Vue.js、Angular.js等

为什么使用MVVM

image-20210117155842348

MVVM 的组成部分

image-20210117145954655

View

image-20210117160143376

Model

image-20210117160158674

ViewModel

image-20210117160329091

MVVM 模式的实现者

  • Model：模型层，在这里表示javaScript对象
  • View：视图层，在这里表示DOM（HTML的操作元素）
  • ViewModel：连接视图和数据的中间件，Vue.js就是MVVM 中的ViewModel层实现者

在MVVM架构中，是不允许 数据 和 视图 直接通信的，只能通过ViewModel来通信，二ViewModel就是定义了一个Observer观察者

  • ViewModel能够观察导数据的变化，并对视图对应的内容进行更新
  • ViewModel能够监听到视图变化，并能能够通知数据发生改变

至此，我们就明白了，Vue.js就是一个MVVM的实现着，他的核心就是实现Dom监听与数据绑定

为什么使用Vue.js

image-20210117150702471

IDEA插件

Cdn引入Vue.js

第一种方式，下面引入的是2.5.16版本，开发环境的cdn版本(开发环境版本，包含了有帮助的命令行警告，这里可以查阅2.6.10版本：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

下面引入生产环境的cdn版本(生产环境版本，优化了尺寸和速度，这里可以查阅2.6.10版本：https://cdn.jsdelivr.net/npm/vue

Vue基本语法

v-bind

​ v-bind等被称为指令，指令带有前缀v-，以表示它们是提供的特殊特性，他们会在渲染DOM上应用特殊的响应式行为，在这里表示：“将这个元素节点的title特性和Vue实例的message属性保持一致”

当你打开浏览器的JavaScript控制台，输入app.message=“新消息”，就会再一次看到这个绑定了title特性的HTML已经进行了更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒看看此处东热爱绑定的提示消息！
    </span>
    {{message}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello vue!"
        }
    });
</script>

</body>
</html>

v-if，v-else

什么是条件判断语句，以下两个属性

  • v-if
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <!--view层，  模板-->
    <div id="app">
        <h1 v-if="type==='A'">A</h1>
        <h1 v-else-if="type==='B'">B</h1>
        <h1 v-else-if="type==='D'">D</h1>
        <h1 v-else-if="type==='C'">C</h1>
        <h1 v-else>G</h1>

    </div>
    <script>
        var vm = new Vue({
           el:"#app",
            data:{
               type: 'A'
            }
        });
    </script>
</body>
</html>
  • v-else
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <!--view层，  模板-->
    <div id="app">
        <li v-for="item in items">
            {{item.message}}
        </li>
    </div>
    <script>
        var vm = new Vue({
           el:"#app",
            data: {
               items: [
                   {message:'狂神说java'},
                   {message: '我学前端'},
                   {message: '我爱中华'}
               ]
            }
        });
    </script>
</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <button v-on:click="sayHi">click Me</button>
</div>
<script>
    var vm = new Vue({
       el: "#app",
       data: {
           message: "狂神说Java"
       },
       methods:{//方法必须定义在Vue的methods对象中,v-on：事件
           sayHi:function () {
               alert(this.message);
           }
       }
    });
</script>
</body>
</html>

Vue:表单双绑、组件

什么是双向数据绑定：

​ Vue.js是一个MVVM框架，及数据双向绑定，即当数据发生变化的时候，视图也发生变化，真就是Vue.js的精髓之处

数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定，单项数据绑定是使用状态管理工具的前提，如果我们使用Vuex，那么数据也是单项的，这时就会和双向数据绑定有冲突

为什么要实现数据的双向绑定

在vue.js中，如果使用vuex，实际上数据还是单项的，之说以说是数据双向绑定这是用的UI控件来说，对于我们处理表单，vue.js的双向数据绑定用起来就特别的舒服，及两者不互斥，在全局型数据流使用单项，方便跟踪；局部型数据流使用双向，简单易操作

在表单中使用双向数据绑定

你可以使用v-model指令在表单<input> <textarea> 及 <select>元素上创建双向数据绑定，他会根据控件类型自动选取正确的方法来更新元素，尽管有些神奇，但v-model本质上不过时语法，负责监听用户的输入时间以及更新数据，并对一些极端场景进行一些特殊的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
<body>
<div id="app">
  <!-- 输入文本：<input type="text" v-model="message">{{message}}-->
   <!-- 输入文本：<textarea  v-model="message" ></textarea>{{message}}-->
   <!-- 性别：
    <input type="radio" name="sex" value="男" v-model="shuxing">男
    <input type="radio" name="sex" value="女" v-model="shuxing">女
    <p>
        选中了谁：{{shuxing}}
    </p>-->
    下拉框：
    <select v-model="shuxing">
        <option disabled value="">---请选择---</option>
        <option>A</option>
        <option >C</option>
        <option>D</option>
    </select>
    <span>value:{{shuxing}}</span>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        data: {
           /*message: "123",*/
            shuxing: ''
        }
    });
</script>
</body>
</html>

Vue组件

实际开发中，我们通常采用vue-cli创建，.vue模板文件的方式开发，

什么是组件：组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的 th：fragment等框架由衷的异曲同工之妙，通常一个应用会以一颗嵌套的组件树形式来组织：

image-20210117200559373

假如，你可能有页头、侧边栏、内容区等组件，每个组件由包含其他的想导航栏连接、博文之类的组件

  • Vue.component()：注册组件
  • my-component-li: 自定义组件的名字
  • template：组件的模板

使用props属性传递参数

image-20210117202958896

v-for="item in items" :遍历Vue实例中定义的名为items的组件，并创建同等数量的组件

v-bind：item="item" ：将遍历的item项绑定到组件中props定义的名为item属性上； =号左边的item为props定义的属性名，右边的的为item in items 中遍历的item项的值

Axios异步通信

什么是Axios：是一个开源的可以用在浏览端和NodeJS 的异步通信框架，他主要作用就是实现Axios异步通信，特点如下：

  • 从浏览器中创建XMLHttpRequests
  • 从Node.js创建http请求
  • 支持Promise API【JS中链式编程】
  • 拦截请求和相应
  • 转换请求数据和相应数据
  • 取消请求
  • 自动转化JSON数据
  • 客户端支持防御XSRF（跨站请求伪造）

image-20210117220504943

为什么要使用Axios

由于Vue.js是一个视图框架 并且作者（优雨溪）严格准守Soc（关注度隔离原则），所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过咋进入2.0版本以后停止了对插件的维护并推荐了Axious框架，少用jQuery，因为他的操作Dom太频繁了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <div>{{info.links}}</div>
</div>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#vue',
            data(){
                return{
                    info:{
                   //请求的返回参数合适，必须和json字符串一样
                        name: null,
                        address: {
                            street:null,
                            city: null,
                            country: null
                        },
                       links:[
                        {
                            name: null,
                            url: null
                        },
                        {
                            name: null,
                            url:null
                        },
                        {
                            name: null,
                            url: null
                        }
                    ]
                    }
                }
            },
            mounted(){
                //钩子函数 链式编程，es6新特性  get().then() 拿到数据并响应数据
                axios.get("../data.json").then(response=>(this.info=(response.data)));
            }
        });
    </script>
</body>
</html>

计算属性

为什么要计算属性

​ 计算属性的重点突出在属性两个字上（属性属于名词），首先他是一个属性其次这个属性有计算的能力（计算是动词），这里的计算就是这个函数，简单点来说买个他就是一个能力够件计算结果缓存起来的属性（建新为转化成静态的属性），仅此而已，可以想象成缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--调方法必须通过括号去调用-->
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello kuangshen"
        },
        //methods 方法 所有的方法都写在里面
        methods: {
            currentTime1 :function () {
                return Date.now();//返回一个时间戳
            }
        },
        //区别 methods通过方法名来调用  computed通过属性来调用 是内存里面的
        computed: { //计算属性  methods ,computed 方法可以不能重名 重名之后只会调用methods方法
            currentTime2: function () {
                return Date.now();
            }
        }
    });
</script>
</body>
</html>
methods 和computed区别：
  • methods：定义方法，调用方法使用currentTime1（），需要带括号
  • computed：定义属性，调用属性使用currentTime2，不需要括号；this.message是为了能够让currentTime2观察到变化
  • 如何在方法中的值发生了变化，则缓存的刷新！可以在控制台使用，vm.currentTiem2改变下的数值，再测试观察结果
结论：

调用方法时，每次都要进行计算，既然有计算过程则必定产生系统开销，如果不经意变化，此时可以考虑缓存把这个结果存起来，采用计算属性computed可以很方便做到，计算属性的主要特性是为了将不经常发生变化的计算结果进行缓存，可以节约系统开销

插槽slot

在Vue中我们使用<slot> 元素作为承载分发内容的出口，作者称其为 插槽可以应用在组合组件的场景中

image-20210118105540093

自定义事件内容分发

image-20210118182559160

image-20210118183038697

Vue生命周期

生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染——>更新——>渲染、卸载等一系列过程，我们成这就是Vue的生命周期，通俗的说就是Vue实例从创建到销毁的过程，就是生命周期

​ 在Vue的整个生命周期中，他提供了一系列的事件，可以让我们从事件触发时注册JS方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例

image-20210117231718296
image-20210117231853447
image-20210117232044780

什么是 Vue-cli

​ Vue-cli官方提供了一个脚手架。用于快速生成一个Vue的项目模板；预先定义好的目录结构以及基础代码，就好比创建maven项目可以选择一个顾家目录，这个骨架目录就是脚手架，开发更加快速

主要功能：

  • 同一目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 继承打包上线

什么是Webpack

​ 本质上，webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）当webpack处理应用程序时，他会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每一个模块，然后将所有这些模块打包成一个或者多个bundle

​ Webpack是当下最热门的前端资源模块化管理和打包工具，他可以将许多松散偶尔的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分离，等到实际需要实在一部加载，通过Loader 转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、CSS、JSON、ConffeeScript、LESS等

​ 伴随着移动互联网的大潮，当今越来越多的的网站已经从网页模式进化到了WebApp模式，他们运行在现代浏览器里，使用HTML5、CSS3、ES6等新技术来开发丰富功能，网页已经不仅仅是完整浏览器的基本需求；WebApp 通常是一个SPA（单页面应用），每一个视图通过异步的方式加载，这导致叶明的初始化和使用过程中会加载越来越多的JS代码，真的给前端流程和资源组织带来了巨大挑战，

​ 前端开发和其他的开发工作的主要区别，首先前端基于多语言，多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，并且保证他们的浏览器快速、优雅的加载和更新，就需要以和模块化系统，这个理想中的模块化系统是前段工程师多年来一直探索的难题

image-20210118221038926

image-20210118221052265

image-20210118221147778
image-20210118221241575

image-20210118221307010
image-20210118221404195
image-20210118221434945
image-20210118221654309
image-20210118221731244
image-20210118221756889

image-20210118230251315

image-20210118231500557

image-20210118231513838

vue-router路由

Vue Router 是Vue.js官方的路由管理器，他和Vue.js的核心深度集成，让构建单页面应用变得易如反掌包含以下的功能有：

  • 嵌套的路由/视图表
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue.js通过过度系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的连接
  • HTML5的历史模式或者hash模式，在IE9中自动降级
  • 自定义的滚动条行为
安装

基于第一个vue-cli进行测试学习；先查看node_modules中是否存在vue-router

vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装，打开命令行工具，进入你的目录，输入下面命令：

npm install vue-router --save-dev

如果在一个模块化工程使用它，必须通过Vue.use()明确安装路由功能：

import Vue from ‘vue’
import VueRouter from 'vue-router'

Vue.use(VueRouter);

安装Vue-axios

image-20210122154303793
image-20210122154340802

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值