vue+node+mongoDB 火车票H5(一)---准备工作,基本配置
前端菜鸟一枚,由于公司项目用到了vue,我虽然参与了,但是很多环境配置和流程还不是特别清楚,就想自己个人业余做个webapp看看,
对于完全新手而言,很多坑会纠结很久,所以想借此机会自己做的同时记录各种坑,网上的vue项目搜的的大都是仿饿了么,由于公司项目做的是火车票,
所以我就找了找火车票相关app,界面上我更喜欢飞猪的橙色基调,所以决定仿飞猪的火车票部分,从最基本的开始,先让项目运行起来:
项目地址:https://github.com/leitingting08/train
已完成一些静态页面,可运行如下git命令,打开localhost:8080查看效果
git clone https://github.com/leitingting08/train.git npm install npm run dev
vue的基本环境配置好之后,让项目运行起来,一般是localhost:8080,如果是移动端,想在手机上查看效果,可以用电脑ip连接访问
1.打开控制台查看本机ip,输入命令:ipconfig
2.修改项目config文件夹下的index.js
host: 'localhost'
port: 8080,
这两项修改,localhost替换为本机ip地址,端口随意,最好不用8080
配置不用localhost用ip是因为用局域网便于用手机访问查看效果
3.npm run dev 让项目跑起来,运行成功就可以查看了
如: Your application is running here: http://192.168.1.110:8686
复制后面的地址在浏览器打开,发现后面多了http://192.168.1.110:8686/#/
4. 如果想去掉#/
打开src/router/index.js,加上mode: 'history' ,地址栏有/#/是因为这种单页面路由应用用的是hash模式,如果要设置成为history模式的话需要后端配合改动才能生效。故一般还是使用哈希模式。
export default new Router({
mode: 'history', // 去掉地址栏后面的 #/
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
vue项目所需的基本配置就好了
vue+node+mongoDB 火车票H5(一)---准备工作,基本配置的更多相关文章
- vue+node+mongoDB火车票H5(七)-- nodejs 爬12306查票接口
菜鸟一枚,业余一直想做个火车票查票的H5,前端页面什么的已经写好了,node+mongoDB 也写了一个车站的接口,但 接下来的爬12306获取车次信息数据一直卡住,网上的爬12306的大部分是pyt ...
- vue+node+mongoDB 火车票H5(六)---城市列表保存到MongoDB数据库并且启用node.js服务
把车站列表保存到数据库,并且从本地创建服务 node.js创建httpserver 1.搭建基于express的运行环境 全局安装express-gengerator cnpm install -g ...
- vue+node+mongoDB 火车票H5(五)---城市选择
选择城市,支持搜索,储存选择过城市的历史记录,点击索引能跳到相应位置 1. 父子组件传值,trainCity城市选择组件,选择城市后改变父组件的值 2. 把城市数组按照字母A到Z排序 3.点击字母索引 ...
- vue+node+mongoDB 火车票H5(四)---完成静态页面
各项配置都好了,就可以开始写静态页面了,先别急着写,看一下页面又哪些公用的部分可以提取出来的,统一放到components组件文件夹中 header头部文件夹放一些头部常用组件,如首页的banner切 ...
- vue+node+mongoDB 火车票H5(三)---git提交时忽略不想提交的文件
想要把项目通过git提交到GitHub上,但提交时并不想提交node_modules文件夹,这个文件夹太大 git 提交代码时不提交配置文件夹node_modules 在.gitignore文件中添加 ...
- vue+node+mongoDB 火车票H5(二)---vux和less的配置
vue基本环境配置好之后,就可以开始开发页面了 开发页面之前先了解一下项目结构,原始的目录结构为: config是配置文件,环境配置好了开发阶段可以不再去修改了,node_modules文件夹是打包的 ...
- vue+node+mongodb实现的功能
用vue+node +mongodb实现前后台交互的页面代码,已经上传到github上, 地址是: https://github.com/GainLoss/vue-node-mongodb https ...
- 后台管理系统:vue&node&MongoDB(一)
后台管理系统 使用工具: Vue Node Mongodb Element-ui 一.后台(Node+Mongodb) 前期准备: 需要下载的包: mongooes -------- ...
- 一个 Vue + Node + MongoDB 博客系统
源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...
随机推荐
- js - 关于this、new、原型
1.this误区 # 第三方学习 http://www.cnblogs.com/wangfupeng1988/p/3988422.html - this不是函数自身的引用,this实际上是在函数被调用 ...
- django学习笔记【002】创建第一个django app
2.3.3 1.创建一个名叫polls的app python3. manage.py startapp polls tree mysite/ mysite/ ├── db.sqlite3 ├── ma ...
- 在Visual Studio 2013顯示SCSS詳細錯誤訊息
在WebEssentials套件加持之下,Visual Studio 2013可以直接編修SCSS,每次存檔自動編譯出css.min.css及.map,非常方便.但初心者如我,寫錯語法在所難免,一旦造 ...
- 打败 IE 的葵花宝典:CSS Bug Table
博主说:本博客文章来源包括转载,翻译,原创,且在文章内均有标明.鼓励原创,支持创作共享,请勿用于商业用途,转载请注明文章链接.本文链接:http://www.kein.pw/?p=35 原文发表于:A ...
- 蓝牙(CoreBluetooth)-中心设备(客户端)
蓝牙(CoreBluetooth)-中心设备(客户端) 蓝牙客户端-中心设备 主要内容 1. 创建`中央管理器` 2. 发现并且连接外设 3. 寻找连接上的外设数据 4. 发送读或写`特征值`的请求 ...
- python socket 多人聊天室
参考来源(其实我从上面复制了一点):Python 的 Socket 编程教程 http://www.oschina.net/question/12_76126Python线程指南 http://ww ...
- 凑成整数x----二进制枚举
给n个数,给定x. 用这n个数求和凑成x,问有多少种凑法. #include<bits/stdc++.h> using namespace std; int main() { int n, ...
- Retrofit--官网2.1.0
Retrofit--官网2.1.0 android Retrofit 介绍 API 描述 请求方法 URL 处理 请求体 表单的 ENCODED 和 MULTIPART HEADER 处理 同步 VS ...
- MapReduce实战(四)倒排索引的实现
需求: 以上三个文件,用MapReduce进行处理,最终输出以下格式: hello c.txt-->2 b.txt-->2 a.txt-->3jerry c.txt-->1 b ...
- Shell面试题8:筛选符合长度的单词案例
企业Shell面试题8:筛选符合长度的单词案例 利用bash for循环打印下面这句话中字母数不大于6的单词(某企业面试真题). I am oldboy teacher welcome to oldb ...