前端菜鸟一枚,由于公司项目用到了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(一)---准备工作,基本配置的更多相关文章

  1. vue+node+mongoDB火车票H5(七)-- nodejs 爬12306查票接口

    菜鸟一枚,业余一直想做个火车票查票的H5,前端页面什么的已经写好了,node+mongoDB 也写了一个车站的接口,但 接下来的爬12306获取车次信息数据一直卡住,网上的爬12306的大部分是pyt ...

  2. vue+node+mongoDB 火车票H5(六)---城市列表保存到MongoDB数据库并且启用node.js服务

    把车站列表保存到数据库,并且从本地创建服务 node.js创建httpserver 1.搭建基于express的运行环境 全局安装express-gengerator cnpm install -g ...

  3. vue+node+mongoDB 火车票H5(五)---城市选择

    选择城市,支持搜索,储存选择过城市的历史记录,点击索引能跳到相应位置 1. 父子组件传值,trainCity城市选择组件,选择城市后改变父组件的值 2. 把城市数组按照字母A到Z排序 3.点击字母索引 ...

  4. vue+node+mongoDB 火车票H5(四)---完成静态页面

    各项配置都好了,就可以开始写静态页面了,先别急着写,看一下页面又哪些公用的部分可以提取出来的,统一放到components组件文件夹中 header头部文件夹放一些头部常用组件,如首页的banner切 ...

  5. vue+node+mongoDB 火车票H5(三)---git提交时忽略不想提交的文件

    想要把项目通过git提交到GitHub上,但提交时并不想提交node_modules文件夹,这个文件夹太大 git 提交代码时不提交配置文件夹node_modules 在.gitignore文件中添加 ...

  6. vue+node+mongoDB 火车票H5(二)---vux和less的配置

    vue基本环境配置好之后,就可以开始开发页面了 开发页面之前先了解一下项目结构,原始的目录结构为: config是配置文件,环境配置好了开发阶段可以不再去修改了,node_modules文件夹是打包的 ...

  7. vue+node+mongodb实现的功能

    用vue+node +mongodb实现前后台交互的页面代码,已经上传到github上, 地址是: https://github.com/GainLoss/vue-node-mongodb https ...

  8. 后台管理系统:vue&node&MongoDB(一)

    后台管理系统 使用工具: Vue    Node     Mongodb   Element-ui 一.后台(Node+Mongodb) 前期准备: 需要下载的包: mongooes -------- ...

  9. 一个 Vue + Node + MongoDB 博客系统

    源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...

随机推荐

  1. 有关linux磁盘分区优化

    Linux中几个重要的目录,这几个目录在ubuntu安装的硬盘分区时,可选择性的特别分区,进行挂载./usr 文件系统中一般不改变的文件,如库,程序./var 文件系统包含会改变的文件./home 文 ...

  2. Atitit.sql where条件表达式的原理  attilax概括

    Atitit.sql where条件表达式的原理  attilax概括 1. 数据查询接口sql api标准化1 2. Sql接口的问题2 2.1. 虽然sql是结构化的dsl,但是任然是编程语言类型 ...

  3. 关于.pyc文件

    Python会在执行.py文件的时候,将.py形式的程序编译成中间式文件(byte-compiled)的.pyc文件,这么做的目的就是为了加快下次执行文件的速度. 所以,在我们运行python文件的时 ...

  4. 李洪强iOS开发之iOS技术博客

    李洪强iOS开发之iOS技术博客 注意:访问博客请直接点击博客,不要点击后面的RSS地址 博客地址 RSS地址 南峰子的技术博客   剑尖博客   图拉鼎   Henry Lee   Dev Talk ...

  5. Linux之IO Redirection

    一.引言 前几天使用一个linux下的内存检测工具valgrind,想要把检测的结果重定向到文件,结果总是没有任何内容,最后才发现是重定向的原因,它输出的信息是输出到stderr的,所以我使用 > ...

  6. django模板{%for%}中的forloop的应用

    {% for k, v in data.items %} {{ k }}: {{ v }} {% endfor %} 这里假设data.items这个列表类似:[ [a,b],[c,d],[e,f]. ...

  7. traceroute/tracert--获取网络路由路径

    traceroute 是用来检测发出数据包的主机到目标主机之间所经过的网关数量的工具.traceroute 的原理是试图以最小的TTL发出探测包来跟踪数据包到达目标主机所经过的网关,然后监听一个来自网 ...

  8. Nginx指令概述

    指令概述 配置指令是一个字符串,可以用单引号或者双引号括起来,也可以不括.但是如果配置指令包含空格,一定要引起来. 指令参数 指令的参数使用一个或者多个空格或者TAB字符与指令分开.指令的参数有一个或 ...

  9. ef6 code first with Oracle 试玩记录

    对于oracle 使用code first 这边文章不错: http://www.cnblogs.com/wlflovenet/p/4187455.html 补充一下: 文章中提到machine.co ...

  10. nginx中,$request_uri和$uri的区别

    nginx中,$request_uri和$uri的区别   $request_uri This variable is equal to the *original* request URI as r ...