前端菜鸟一枚，由于公司项目用到了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项目所需的基本配置就好了