vue-travel 旅游网站 github

:writing_hand: 项目介绍

该项目是一款实现在线预订旅游度假产品，休闲旅游预订平台，提供国内游、国外游、周边旅游以及旅游攻略等功能的web应用。

项目演示 演示地址

项目功能：

1:用户模块    用户注册(包含ajax方式校验邮箱格式与是否重复)    用户激活(邮件激活)    用户登录    用户退出2:旅游景点模块    景点列表(带分页)    景点详情3:订单模块    确认订单(填写出发日期,人数,出发地等信息)    生成订单(将订单信息保存到数据库)    订单详情展示    订单支付(易宝支付)    扩展功能:    1:用户7天免登录功能(自动登录功能)    2:我的订单列表展示(带分页)

项目初始化

  1. 在任一个文件里，打开git bash,或者cmd来打开命令行窗口，输入命令vue create vue-travel
  2. 接下来，进行选择，上下箭头切换选项，空格选中选项。看到一下的最终结果：
Vue CLI v3.9.3┌────────────────────────────┐│  Update available: 3.11.0  │└────────────────────────────┘? Please pick a preset: Manually select features? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter        ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus? Pick a linter / formatter config: Standard? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json? Save this as a preset for future projects? No

我这里选择了Babel, Router, Vuex, CSS Pre-processors(Stylus), Linter,根据自己的需求进行选择安装相应的插件。

最终使用vue-cli 3.x 初始化一个项目成功的话，会出现一下的内容：

Vue CLI v3.9.3✨  Creating project in F:\Front-end\vue-project\vue-travel.????  Initializing git repository...⚙  Installing CLI plugins. This might take a while...added 77 packages from 80 contributors, updated 2 packages and moved 9 packages in 29.384s⚓  Running completion hooks...�????  Generating README.md...�????  Successfully created project vue-travel.�????  Get started with the following commands: $ cd vue-travel $ npm run serve
  • 接下来在命令行窗口中执行cd vue-travel切换至新建的vue-travel的根目录下，在执行npm run serve打开一个开发时简单的服务器，以便我们在进行项目开发时快速看到我们开发的结果
 DONE  Compiled successfully in 42812ms                                                                                                                                                          16:22:10  App running at:  - Local:   http://localhost:8080/  - Network: http://192.168.155.4:8080/  Note that the development build is not optimized.  To create a production build, run npm run build.

alt+鼠标左键选中Local: http://localhost:8080/快速打开浏览器，并访问该项目的首页。

我们的项目结果：

  1. 查看最终生成的项目文件夹目录如下
vue-travel -- 项目目录├── node_modules -- npm安装的模块目录├── public -- 静态图片资源文件└── src -- 源码目录    ├── assets -- 自身项目引用的静态资源目录    ├── components -- 组件目录    ├── views -- 项目页面目录    ├── App.vue -- 项目根组件    ├── main.js -- 项目入口文件      ├── router.js -- 项目路由配置文件    └── store.js -- Vuex配置文件

项目开发

为项目添加login以及register页面，并配相关路由。

  1. 打开router.js文件，修改路由配置。我们去掉About这个选项，新增加登录login以及注册register选项，为项目新增加登录以及注册页面。具体的配置如下：
export default new Router({  mode: 'history',  base: process.env.BASE_URL,  routes: [    {      path: '/',      name: 'home',      component: Home    },++  {      path: '/login',      name: 'login',      component: () => import(/* webpackChunkName: "about" */ './views/Login.vue')    },++  {      path: '/register',      name: 'register',      component: () => import(/* webpackChunkName: "about" */ './views/Register.vue')    }  ]})
  1. 打开views文件下，删掉About.vue文件，新增加Login.vue以及Register.vue文件
/**Login**/<template>  <div class="login">    <h1>This is an login page</h1>  </div></template>
/**Register**/<template>  <div class="register">    <h1>This is an register page</h1>  </div></template>

打开浏览器：

输入http://localhost:8080/login以及http://localhost:8080/register即可访问对应的页面

开发项目的公用的头部Header组件以及尾部Footer组件

  1. 在components文件夹下新建Header.vue以及Footer.vue文件.具体的代码如下：
/**Header组件**/<template>  <div class="header">    <h3>this is header component</h3>  </div></template>
/**Footer 组件**/<template>  <div class="footer">    <h3>this is footer component</h3>  </div></template>
  1. 在项目中引用这个组件。
  • 第一种方式：通过import局部注册组件方式，在使用Header/Footer组件的那个组件注册头部尾部组件

例如：我在文件夹views/Home.vue，使用Header和Footer这两个组件，具体如下：

/**Home.vue**/<template>  <div class="home">     /**使用我们编写的Header组件**/     <Header/>    <div>      content    </div>     /**使用我们编写的Footer组件**/     <Footer/>  </div></template><script>// @ is an alias to /src//通过import方式引入我们编写的Header/Footer组件import Header from '@/components/Header.vue'import Footer from '@/components/Footer.vue'export default {  name: 'home',  components: {    // 注册我们的引入的组件    Header,    Footer  }}</script>

  • 另一种方式就是全局注册组件方式，不用在每个要使用到Header以及Footer时的组件，都要去import进来再去注册组件这么麻烦。具体实现方式如下：

    • 首先在components文件夹下新建一份index.js用来导出公用组件
    /**/components/index.js**/import Header from './Header.vue'import Footer from './Footer.vue'function commonComponents (Vue) {  // 检查是否已经全局安装了这些组件  if (commonComponents.install) return   Vue.component('Header', Header)  Vue.component('Footer', Footer)}export default commonComponents
    • 在src文件夹下面的main.js文件中去注册这些导出的公用组件。
    import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'+ import commonComponents from './components/index.js'Vue.config.productionTip = false  // 全局挂在组件+ Vue.use(commonComponents)new Vue({  router,  store,  render: h => h(App)}).$mount('#app')
    • 在其他组件中去直接使用导出的这些公用组件。这里我在App.vue中去使用Header以及Footer组件
    /**App.vue**/<template>  <div id="app">    <div id="nav">      <router-link to="/">Home</router-link> |      <router-link to="/login">login</router-link> |      <router-link to="/register">register</router-link> |    </div>    <router-view/>    <div> +    <Header></Header> +    <Footer></Footer>    </div>  </div></template>

项目下载以及运行

> 打开git bash 执行一下命令git clone https://github.com/ZhengMaster2020/vue-travelnpm installnpm run serve

更新中。。。