说明:本人也是刚接触VUE.js,作为一个学习笔记,旨在与初学者共同学习。其中编程语法错误或者写作水平刺眼,还望轻喷。

使用工具:Visual Studio Code。技术栈为vue2+vuex+axios+vue-router+mintUI

备注:Vue.js开发环境的搭建,参见window下搭建Vue.Js开发环境

一,构建项目脚手架

在我的工作区下输入vue init webpack Lottery,会自动构建项目脚手架

进入项目Lottery中输入cnpm install进行库安装

此外,本项目还需单独引入

cnpm i mint-ui --save

cnpm i axios --save

cnpm i vuex --save

/config/index.js中找到proxyTable加入。代理一个“数据”的接口,我们取彩票数据从这个第三方接口获取。♣此代理解决跨域只能在开发环境有效

 '/myapi': {
target: 'http://f.apiplus.net/',
changeOrigin: true,
pathRewrite: {
'^/myapi': ''
}
}

运行npm run dev,项目可以跑起来

Vuejs2.0构建一个彩票查询WebAPP(1)

Vuejs2.0构建一个彩票查询WebAPP(2)

Vuejs2.0构建一个彩票查询WebAPP(3)

Vuejs2.0构建一个彩票查询WebAPP(1)的更多相关文章

  1. Vuejs2.0构建一个彩票查询WebAPP(2)

    一,Vuex的使用 import Vue from 'vue' import Vuex from 'vuex' import MsgModules from './MsgModules' Vue.us ...

  2. Vuejs2.0构建一个彩票查询WebAPP(3)

    整个工程的目录及截图如下,源码下载    使用心得: 1.了解Vue的生命周期很有必要,详情参见博文Vue2.0 探索之路——生命周期和钩子函数的一些理解 2.Vuex全局状态管理真是美味不可言 st ...

  3. 开源低代码平台开发实践二:从 0 构建一个基于 ER 图的低代码后端

    前后端分离了! 第一次知道这个事情的时候,内心是困惑的. 前端都出去搞 SPA,SEO 们同意吗? 后来,SSR 来了. 他说:"SEO 们同意了!" 任何人的反对,都没用了,时代 ...

  4. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  5. vuejs2.0实现一个简单的分页

    用js实现的分页结果如图所示: css .page-bar{ margin:40px; } ul,li{ margin: 0px; padding: 0px; } li{ list-style: no ...

  6. Blazor入门笔记(1)-从0构建一个组件

    1.环境 VS2019 16.5.1 .NET Core SDK 3.1.200 Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.创建项目 ...

  7. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  8. 使用TensorFlow v2.0构建多层感知器

    使用TensorFlow v2.0构建一个两层隐藏层完全连接的神经网络(多层感知器). 这个例子使用低级方法来更好地理解构建神经网络和训练过程背后的所有机制. 神经网络概述 MNIST 数据集概述 此 ...

  9. 使用vuejs2.0和element-ui 搭建的一个后台管理界面

    说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面. 相关技术: vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用.灵活.高效. element-ui: ...

随机推荐

  1. ORACLE数据库字符集处理

    简介: ORACLE数据库字符集,即Oracle全球化支持(Globalization Support),或即国家语言支持(NLS)其作用是用本国语言和格式来存储.处理和检索数据.利用全球化支持,OR ...

  2. filezilla server配置为 passive mode

    首先要配置filezilla的setting里面的Passive mode setting选项 (2)关键部分,打开win8.1下的防火墙,新建入站规则 注意,要打开80,443端口.已经passiv ...

  3. [Servlet&JSP] HttpSession会话管理

    我们能够将会话期间必须共享的资料保存在HttpSession中,使之成为属性.假设用户关掉浏览器接受Cookie的功能.HttpSession也能够改用URL重写的方式继续其会话管理功能. HttpS ...

  4. Linux之我最常用的20条命令

    Linux之我最常用的20条命令 玩过 Linux的人都会知道, Linux中的命令的确是非常多,但是玩过 Linux的人也从来不会因为 Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的 ...

  5. springboot 测试类,项目使用shiro时报错UnavailableSecurityManagerException

    大概的问题就是,正常运行项目是没有问题的 使用测试类是,加载不了shiro的securityManager,主要导致不是很清楚,望告知, 解决方法 @Resource org.apache.shiro ...

  6. Codeforces 667C Reberland Linguistics 记忆化搜索

    链接 Codeforces 667C Reberland Linguistics 题意 给你一个字符串,除去前5个字符串后,使剩下的串有长度为2或3的词根组成,相邻的词根不能重复.找到所有的词根 思路 ...

  7. 当fastJson邂逅大写字段时

    在项目中遇到了一件令人头疼的事.使用fastJson反序列化时下面的Json时,得到对象属性总为null(如下图),可能细心的朋友一看就知道问题出在哪里,没错!问题就出在返回的字段首字母给大写了.fa ...

  8. jqueryEasyui重新渲染

    转载: jQuery EasyUI parser 的使用场景 | WebUI框架使用参考+http://www.easyui.info/archives/216.html parser,故名意思,就是 ...

  9. CSS W3SCHOOLS

    https://www.w3schools.com/csS/css3_buttons.asp

  10. vuejs v-model

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...