使用Vue技术栈手把手从零开发开发旅游网站（一）

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-travel

npm install

npm run serve

更新中。。。