前端菜鸟一枚,由于公司项目用到了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. convertView与ViewHolder有什么区别,好处在哪里

        convertView 在API中的解释是The old view to reuse, if possible, 第一次getView时还没有convertView,这时你便创建了一个新的vi ...

  2. Hibernate 操作 oracle数据库,报错总结

    1.ORA-00957: 重复的列名 错误信息如下: Hibernate: insert into T_RESOURCE (NAME, NUM, PARENT_FLAG, PARENT_ID, id, ...

  3. 任务调度Cron表达式及Quartz代码详解

    在线Cron表达式生成器 http://cron.qqe2.com/ cron表达式详解 http://www.cnblogs.com/linjiqin/archive/2013/07/08/3178 ...

  4. mysql主从复制之mysql-proxy实现读写分离

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lansgg.blog.51cto.com/5675165/1242674 本文系 ...

  5. Angularjs promise-$q服务详解

    var ngApp=angular.module('ngApp',[]); /************************************************************* ...

  6. 编译JDK1.7

    1. 背景 想要一探JDK内部的实现机制,最便捷的路径之一就是自己编译一套JDK. 2. 获取JDK源码 从http://openjdk.java.net/下载源码,如 openjdk-6-src-b ...

  7. 反射学习2-通过反射机制动态获取属性的值模拟Struts的自动赋值

    一.准备知识:   Java反射机制   处理事务的JavaBean   String的操作常用方法 二.模拟步骤   这里我们通过反射机制动态获取属性的值模拟Struts中的自动赋值. 1.首先创建 ...

  8. poj 1821 Fence(单调队列)

    题目链接:http://poj.org/problem?id=1821 题目分析来自:http://blog.csdn.net/tmeteorj/article/details/8684453 连续的 ...

  9. 简单说一下 servlet的生命周期?

    1.servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由 javax.servlet.Servlet接口的  init,service和   destroy ...

  10. C1编译器的实现

    总览 词法.语法分析 分析方案 词法 语法 符号表 类型系统 AST 语义检查 EIR代码生成器 MIPS代码生成器 寄存器分配 体系结构相关特性优化 使用说明 编译 运行 总览 C1语言编译器及流程 ...