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项目所需的基本配置就好了

  • 相关阅读:
    findall查找 ^$*+?{ }{m,n}[].[.] w s d  D W
    find查找、split分隔、replace替换
    round四舍五入
    pow求一个数的n次幂
    iter创建一个可以被迭代的对象
    notepad++ gmt中文乱码问题
    matlab eps 字体用AI打开乱码的解决
    [转载]Matlab中使用xlswrite函数时出现服务器出现异常的解决方法
    How to determine which grid cells a line segment passes through?
    matlab给定点生成多边形,多边形掩膜处理
  • 原文地址:https://www.cnblogs.com/leiting/p/7923407.html
Copyright © 2011-2022 走看看