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

  • 相关阅读:
    git 项目代码打包
    jira查看字段
    jmeter压力测试报错:java.net.BindException: Address already in use: connect解决办法
    python 破解验证码
    mysql授权远程登录
    豆瓣api
    利用python开发财务工具
    钉钉发送消息通知
    git使用命令行自动登录
    后宫
  • 原文地址:https://www.cnblogs.com/leiting/p/7923407.html
Copyright © 2020-2023  润新知