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

posted @ 2017-11-29 23:54  c-137Summer  阅读(669)  评论(0编辑  收藏  举报