首页 > 技术文章 > Vue全家桶

sunqiaozhen 2020-11-12 14:55 原文

 Vue全家桶:vue + vue - router + vuex +axios

 Vue是一套用于构建用户界面的渐进式框架,和React,都自称自己只关注视图层

 在文件中引入vue

   如: <script  src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js"></script>

    可在 https://www.bootcdn.cn/vue 中找到相关版本的 js

 看一个Demo:

 

 

 

 

 

 此时,如果页面显示了 Hello Vue!,说明是正常运行。

 Vue - router:

    功能:

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

 

  Vuex:

  如同React有Redux一样,Vuex是一个专为Vue.js应用程序开发的状态管理模式,适合开发大型单页应用。

 

 

 

 axios:

 axios是一个基于Promise用于浏览器和node.js的HTTP客户端,它可以帮你:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF
在创建项目时,要把axios安装上,安装命令  cnpm init axios --save
 1.在main.js 进行全局配置

 

 

 2.在vue中的操作

 

 

 
 
 

 

推荐阅读