Vue.js学习记录-8-Vue去哪儿网项目实战：首页开发-环境搭建

版权声明：未经博主本人同意，请勿私自转发分享。 https://blog.csdn.net/Nerver_77/article/details/83411361

项目实战

1. 首页开发

• 环境搭建

  开发环境：node.js、Vue-cli脚手架工具

  开发IDE：VScode

  版本控制工具：Git

  检查环境搭建结果：
  

  关于Vue-cli： Vue提供的官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟可创建并启动一个带热加载、保存时静态检查以及可用于生产环境的构件配置的项目：

    # 全局安装 vue-cli
    npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    vue init webpack my-project
    # 进入项目文件夹
    cd my-project
    # 安装依赖 -- 依赖将在项目路径下默认安装到node-modules文件夹下
    npm install xx --save
    # 启动项目
    npm run dev / npm run start
  

  名词解释：

  • 单页应用和多页应用

    • 多页应用：页面跳转请求 - 返回HTML

      • 优点：首屏时间快，SEO效果好
      • 缺点：页面且缓慢

    • 单页应用：判断页面跳转 - 通过JS清空当前加载HTML - DOM元素新的HTML渲染

      • 优点：页面切换快
      • 缺点：首屏时间慢(html + js 请求)，SEO效果差

  • webpack打包工具

    它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

• 项目结构

  在使用vue-cli创建的项目中，我们关注的重点是src目录。

    main.js 入口文件
    App.vue 根组件
    router 路由信息
    components 组件信息
    assets 资源文件
  

  首页开发的准备工作：

    1. 在src目录下创建pages/home文件夹
    2. 在home文件夹下创建components文件夹以及Home.vue文件
    3. components文件夹存放构建首页的各种组件，Home.vue文件统一管理这些子组件。(Home模块父组件)
  

  vue文件结构：

    //模板区域
    <template>
      <div>
    
      </div>
    </template>
    
    //脚本区域
    <script>
    export default {
      //基于组件开发，data必须是函数方法返回形式 
      data() {
        return {
    
        }
      },
      methods: {
    
      },
      components: {
    
      }
    }
    </script>
    
    //样式区域
    <style>
    
    </style>
  

  组件开发须知：由于组件式的UI界面的开发数据是静态的。所以，下文中首先介绍的是基于axios的ajax请求进行在Home.vue数据请求，后续开发基于模拟请求到的数据。此外，组件式的UI界面开发中很多重复步骤，这里不做过多赘述，会在Header组件开发中详细说明，后续组件开发将粗略带过。