zoukankan      html  css  js  c++  java
  • 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项目所需的基本配置就好了

  • 相关阅读:
    SurfaceView之绘制sin曲线
    双缓冲技术解决方案之二:内容不交叉时,可以增量绘制
    双缓冲技术解决方案之一:保存所有要绘制内容,全屏重绘
    双缓冲技术局部更新原理之派生自View
    双缓冲技术局部更新原理之派生自SurfaceView
    SurfaceView双缓冲技术引入
    SurfaceView动态背景效果实现
    SurfaceView概述和基本使用
    Bitmap添加水印效果
    Bitmap之compress图片压缩
  • 原文地址:https://www.cnblogs.com/leiting/p/7923407.html
Copyright © 2011-2022 走看看