说明:本人也是刚接触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. 项目集成Hudson+SonarQube出现的一个问题

    [ERROR] No plugin found for prefix 'sonar' in the current project and in the plugin groups [org.mort ...

  2. nginx php No input file specified 怎样处理?

    配置nginx支持php 出现了No input file specified ? 仅仅要改动下安装文件夹下的  nginx.conf下的 location ~ \.php$ {           ...

  3. mysql-增删改数据

    一.增加操作 INSERT用来插入或添加行到数据库表的.插入用以下几种方式: 1.插入完整的行 insert into customers values(null,'Pep E,LaPew','100 ...

  4. CSS透明度设置支持IE,Chrome,Firefox浏览器

    CSS文件里设置例如以下就可以 filter:alpha(opacity=60); //支持IE opacity:0.6; //支持Chrome.Firefox

  5. node04---fs文件操作、静态服务器

    08fs.js var http = require("http"); var fs = require("fs"); var server = http.cr ...

  6. cpc,tank

    先保存一段错误的代码 #include<iostream> #include<cstdio> #include<cstring> #include<algor ...

  7. ubuntu SDK 安装

    纯净sdk安装1.地址-http://gmirror.org/#android-sdk-tools-only(国内镜像)2.下载到本地目录 ~/下载3.进入下载,解压 tar -zxvf androi ...

  8. thinkphp命名空间

    thinkphp命名空间 总结 1.只对函数,类,及const定义的常量有效,对define定义的常量无效 2.如果函数不是为了使用,那有什么意义呢 3.ThinkPHP将命名空间转化为了路径,比如n ...

  9. 最简单的UDP程序

    最简单的UDP程序,一个负责发送消息,一个接收消息. 发送类: import java.io.IOException; import java.net.DatagramPacket; import j ...

  10. 维生素C主要生理功能

    维C是:维生素C又叫抗坏血酸,是一种水溶性维生素. 维生素C主要生理功能 1. 促进骨胶原的生物合成.利于组织创伤口的更快愈合: 维生素C在体内参与多种反应,如参与氧化还原过程,在生物氧化和还原作用以 ...