说明:本人也是刚接触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. ASP.NET-缓存基本知识点

    asp.net cache是一种缓存技术,然而,我们在asp.net程序中还可以使用其他的缓存技术,这些不同的缓存也各有所长.由于asp.net cache不能提供对外访问能力,因此,它不可能取代以m ...

  2. 使用Openfire和Asmack实现IM功能,常常出现“Thread already started”的错误

    近期使用Openfire和Asmack实现Android端的IM功能,可是实际使用的过程中,常常出现"java.lang.IllegalThreadStateException:Thread ...

  3. [React] React.PureComponent

    React.PureComponent is similar to React.Component. The difference between them is that React.Compone ...

  4. 【转】Android ClearEditText:输入用户名、密码错误时整体删除及输入为空时候晃动提示

    1 package com.lixu.clearedittext; 2 3 4 import android.app.Activity; 5 import android.os.Bundle; 6 i ...

  5. PostgreSQL Replication之第七章 理解Linux高可用(3)

    7.3 高可用软件的历史 有大量的专有的和开源的高可用性软件.专有的例子有:Solaris Cluster (有时称为Sun 集群 or SunCluster), SteelEye LifeKeepe ...

  6. ELK到底是什么?那么多公司用!__转载

    Sina.饿了么.携程.华为.美团.freewheel.畅捷通 .新浪微博.大讲台.魅族.IBM...... 这些公司都在使用ELK!ELK!ELK! ELK竟然重复了三遍,是个什么?   一.ELK ...

  7. hdu 2647 Reward(拓扑排序+优先队列)

    Problem Description Dandelion's uncle is a boss of a factory. As the spring festival is coming , he ...

  8. MD5工具类-详细

    public class MD5Code { /* * 下面这些S11-S44实际上是一个4*4的矩阵,在原始的C实现中是用#define 实现的, 这里把它们实现成为static * final是表 ...

  9. 使用 validate 进行输入验证

    validate 官方教程网址: http://www.runoob.com/jquery/jquery-plugin-validate.html 在表单页面引入两个核心 js 文件 #官方的两个文件 ...

  10. HDU-1069 Monkey and Banana DAG上的动态规划

    题目链接:https://cn.vjudge.net/problem/HDU-1069 题意 给出n种箱子的长宽高 现要搭出最高的箱子塔,使每个箱子的长宽严格小于底下的箱子的长宽,每种箱子数量不限 问 ...