旅游网站（携程旅行网页学习 vue3+element）

旅游网站

1. 创建项目

1. 在你要创建项目的路径下打开vscode，新建终端，然后输入vue ui,进入Vue项目管理器。
2. 选择“创建”，确定项目路径，并点击“在此创建新项目”。
3. 在项目文件夹中输入项目名称，点击下一步；
4. 选择“手动配置项目”，然后点击下一步；
5. 增加选择“router”和“css”两个配置项，然后点击下一步；
6. 选择 CSS 预处理器。node-sass 是自动编译实时的，dart-sass 需要保存后才会生效，此处建议选择 Sass/SCSS(with dart-sass)；pick a linter / formatter config可以选择第一个，只检查错误。选择完成后就可以创建项目。
7. 提示创建成功后可以用vscode打开新建的项目。

2. 新建首页

注意：App.vue是整个项目的入口文件，这个文件保持干净，后续内容多了，结构才不出错，所以新建一个首页index.vue

1. 为避免系统提示要组合词命名文件的错误，在package.json文件中修改“rules”的值：

   "rules": {
        
         "vue/multi-word-component-names": "off"
       }
   

2. 在src文件夹下的views文件夹中新建index.vue。在index.vue文件中，先设置一个简单页面，输入如下代码：（安装了插件就可以输入vue，然后选择默认vue结构，会自动补全vue结构）

   <template>
     <h1>首页</h1>
   </template>
   
   <script>
   export default {
          
   
   }
   </script>
   
   <style>
   
   </style>
   

3. 按照路由的配置方法，在router文件下设置index.js文件，把不需要的路由删除或者注释。两步走，1引入子页面，2设置路由。

   代码如下

   import {
         createRouter, createWebHashHistory } from 'vue-router'
   // 1.引入
   import Index from '../views/index.vue'
   
   const routes = [
     // 2.设置路由
     {
        
       path: '/',
       name: 'home',
       component: Index
     } 
   ]
   
   const router = createRouter({
        
     history: createWebHashHistory(),
     routes
   })
   
   export default router
   

   如果显示index出错
   error Component name "index" should always be multi-word
   解决方式：
   在vue.config.js中添加代码lintOnSave:false
   后重启项目即可

4. 修改App.vue文件为如下代码，在这个页面中引入需要的页

   <template>
     <router-view/>
   </template>
   

效果图：

3. 引入ElementPlus组件

1. 用vscode打开项目，然后在终端中，项目路径下运行命令：npm install element-plus --save

2. 在main.js文件中配置elementplus和ico图标库，导入方法见element官网，
   https://element-plus.org/zh-CN/，修改main.js为如下代码：

   import {
         createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   // ElementPlus 相关库的导入
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import zhCn from 'element-plus/es/locale/lang/zh-cn'
   // 导入icon图标库
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   // 导入暗黑模式主题，在index.html文件中：需在 html 上添加一个名为 dark 的类 
   import 'element-plus/theme-chalk/dark/css-vars.css'
   
   // 创建一个应用
   const app = createApp(App)
   // 注册elementplus
   app.use(ElementPlus, {
        
     locale: zhCn,
   })
   // 注册elementplus图标
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        
     app.component(key, component)
   }
   // 注册路由后挂载
   app.use(router).mount('#app')
   

4. 高仿携程旅游页面，制作index.vue

https://hotels.ctrip.com/?allianceid=4897&sid=799747&ouid=xiecheng370&bd_creative=27771225887&bd_vid=11944392447257964181&keywordid=137481675338【携程旅游】

1. 首页布局。进入element官网，https://element-plus.org/zh-CN/，选择组件，然后选择Basic 基础组件中的Container 布局容器。根据上面的图，选择左上下结构，复制代码。
   

2. 粘贴到index.vue中里面并进行修改。此时也可以启动服务器查看布局结果
   代码如下：

   <template>
     <!-- <h1>首页</h1> -->
     <div class="common-layout">
       <el-container>
         <el-aside width="200px" class="test1">Aside</el-aside>
         <el-container>
           <el-header class="test2">Header</el-header>
           <el-main class="test3">Main</el-main>
         </el-container>
       </el-container>
     </div>
   </template>
   
   <script>
   export default {
          
   
   }
   </script>
   
   <style lang="scss">
   .test1{
          
       background-color: rgb(177, 208, 255);
       height: 100vh;
   }
   .test2{
          
       background-color: rgb(110, 160, 235);
   }
   .test3{
          
       background-color: rgb(187, 239, 255);
   }
   
   </style>
   

   效果图：
   

3. 将index.vue页面中的三个组成部分拆分成menu.vue、logo.vue和main.vue三个页
   (1)在views文件夹中新建menu.vue、logo.vue和main.vue三个页面，然后将这三个组成部分的代码分别输入到对应的页面中。具体如下：

menu.vue代码：
<template>
   <el-aside width="200px">Aside</el-aside>
</template>

<script>
export default {
     

}
</script>

<style lang="scss">
.el-aside{
     
    background-color: rgb(177, 208, 255);
    height: 100vw;
}
</style>

logo.vue代码：
<template>
  <el-header>Header</el-header>
</template>

<script>
export default {
     

}
</script>

<style lang="scss">

.el-header{
     
  background-color: rgb(110, 160, 235);
}
</style>

main.vue代码：
<template>
  <el-main>Main</el-main>
</template>

<script>
export default {
     

}
</script>

<style lang="scss">

.el-main{
     
  background-color: rgb(187, 239, 255);
}

</style>

(2)修改index.vue,将三个组件页面引入到index.vue中，然后设置组件标签，代码如下：

<template>
  <!-- <h1>首页</h1> -->
  <div class="common-layout">
    <el-container>
      <MenuView></MenuView>
      <el-container>
        <el-header><LogoView>