让每一个人品质就业不再难
天眼ERP 全国咨询电话 13362162602

动态中心

DYNAMIC CENTERING

香喷喷的Vue全家桶

发布时间: 2020-10-17 15:27:04

    提到了Vue全家桶,废话不多说,我们直接开门见山。

1.png



            ue全家桶 实际包含了Vue-cli ,axios,Vue-x 三项技术。

     Vue-cli是什么呢?


2.png3.png


    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。它本身集成了很多的项目模板,但大致上分为三种;

simple

基本没用

webpack

可以使用(大型项目),Eslint检查代码规范,单元测试

webpack-simple

个人推荐使用,没有代码检查

    基本使用流程:

    打开命令窗口

 

    

4.png


    若是没有出现版本号,请先安装 version.

    然后npm install(或者  i ) vue-cli -g 安装Vue命令环境

    验证安装 OK

5.png


     2 生产项目模板

     vue init <模板名字> 本地文件夹名称

     例:vue init webpack-simple demo


6.png


15.png


    3npm run dev    启动项目

    4、在浏览器输入网址即可

    出现


7.png

    

    该页面 代表 脚手架已经安装成功

    5.main.js文件里

    import VueRouter from 'vue-router'(如果没有下载router ,请先停止运行项目。)

    // 引入路由

    import router from 'router.js文件的url'

    // 为每一个实例配置可以使用路由

    Vue.use(VueRouter);

    router.js文件里

    import VueRouter from 'vue-router'

    配置路由Vue Route

8.png


    Vue Router  Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

    · 嵌套的路由/视图表

    · 模块化的、基于组件的路由配置

    · 路由参数、查询、通配符

    · 基于 Vue.js 过渡系统的视图过渡效果

    · 细粒度的导航控制

    · 带有自动激活的 CSS class 的链接

    · HTML5 历史模式或 hash 模式,在 IE9 中自动降级

    · 自定义的滚动条行为

 

9.png


     

    axios(封装好的ajax)是什么?

    Axios 是一个基于 promise HTTP 库,可以用在浏览器和 node.js 中。

    特性:

    1、从浏览器中创建xml http requests 

    2、从 node.js 创建 http 请求

    3、支持 promise API

    4、拦截请求和响应

    5、转换请求数据和响应数据

    6、取消请求

    7、自动转换 JSON 数据

    8、客户端支持防御 XSRF


10.png


    基本使用流程:

    下载   npm install axios -S

    引入 main.js

    import axios from ‘axios’

    Vue.prototype.$http=axios  //为每一个实例配置可以使用axios

       使用

    Get请求  写在 mounthed(){}

    this.$http.get(“数据路径”,{请求的数据(可省略)}).then(function(response){

    console.log(response)//请求返回来的信息

    })

    .cath(function(err){

    console.log(err) //catch代表的是请求失败的情况

    })

    .then(function(){

    //请求完毕以后执行的代码

    });

11.png


    Vuex 是什么?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    通俗点讲就是 一种通信,

    什么情况下我应该使用 Vuex

    Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的store模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

12.png


    至于如何使用Vuex,我们下一章见!

 

 

 

 

 


服务热线

13362162602

微信服务号