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

  • 相关阅读:
    安卓给DatePicker设置选择日期后的监听
    Linux端口相关一些命令
    安卓使用Zxing创建二维码
    vue中this.$router.push()路由跳转和传参
    C# 获取请求头中包含指定元素的值
    各种JSON格式数据
    SQL 中 char、nchar、varchar、nvarchar 的区别
    vue中表单修饰符
    vue 中的export 、 export default 和 new Vue({})
    String or binary data would be truncated.
  • 原文地址:https://www.cnblogs.com/leiting/p/7923407.html
Copyright © 2011-2022 走看看