【vue项目实战】Vue工程化项目--猫眼电影移动端

头像
艾欢欢
    阅读 6 分钟
    3
    这里是仿猫眼移动端。使用 vue-cli 创建项目。
    ​
    本节先介绍并进行项目的初始化，然后把主框架搭起来，熟悉路由和组件，后面在 项目demo 持续贴出完整项目代码。也会更新博客。
    ​
    第二节传送

    vue初始化项目

    首先全局安装Vue脚手架——vue-cli

    npm/cnpm install vue-cli -g

    新建一个文件夹vue-demo，在该文件夹下打开命令窗口，并输入以下命令：

    vue init webpack vuedemo-maoyan    //使用脚手架初始化项目，vueDemo是项目名

    然后回车并进行设置
    项目初始化

    从第四行开始：

    这个时候会在文件夹下产生一个名为 vuedemo-maoyan 的项目文件夹
    初始化后项目文件夹
    在该项目文件夹下，打开命令窗口，安装所有依赖包。然后启动开发环境

    # 安装依赖
npm install

# 启动开发环境
npm run dev

    启动开发环境
    编译完成，访问 http://localhost:8080 ，出现以下界面，则demo初始化成功。
    启动成功界面

    vue项目下各文件夹和各文件的功能描述

    vue项目下各文件夹和各文件的功能描述

    一些代码描述

    webpack.base.conf.js

    路径： bulid 

    // webpack.base.conf.js
module.exports = {
    ...
    resolve: {
        //设置扩展名，如果配置了这个，name在import导入的时候，就不用再写后缀名了
        //使用scss的时候，还可以加上 .css 和 .scss
        extensions: ['.js', '.vue', '.json'，'.css','.scss'],

        //别名配置
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
    }
    ...
}

    在这里插入图片描述在这里插入图片描述

    这里的@指的是路径 ../src，在webpack.base.conf.js里被封装了。

    main.js

    路径：src

    // main.js
import Vue from 'vue'
import App from './App'
import router from './router'
/**
 * 其实就是：import router from './router/index.js'
 * 在使用webpack项目中，如果导入index.js，则可以省略
 * 这里是相当于导入了一个路由
 */

// 在生产环境下把注释全部去掉
Vue.config.productionTip = false

// 是否启动代码质量检查，不要删除
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

    看下图及注释
    在这里插入图片描述

    项目开发

    准备工作

    1. 修改 index.html 文件

      路径： 位于根目录。

      index.html文件需要更改和添加的只有title和meta
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!-- 添加的内容 -->
        <meta name="renderer" content="webkit">
        <title>vue工程化-猫眼</title>
    </head>
    <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>
      对新添加的meta标签不理解的，看这里

    2. 修改 App.vue 文件

      路径：src

      删除<img src="./assets/logo.png"> 和<style>标签内的样式
    3. 新建pages文件夹

      在src目录下新建，这个目录模拟单页面开发当中的路由

    开发演示

    1. 在pages文件夹下新建文件 index.vue 并进行简单的编辑

      <template>
  <div>
    <h2>{{pageTitle}}</h2>
    <div>This is a simple page</div>
  </div>
</template>
   
<script>
export default {
  name: "index",
  data() {
    return {
      pageTitle:'测试主页'
    };
  }
};
</script>

<style scoped>

</style>

    2. 路由的引入、定义

      路径： router

      // index.js
import Vue from 'vue'
import Router from 'vue-router'
// 引入路由
import index from '@/pages/index'

Vue.use(Router)

export default new Router({
   // routes用来定义路由对象，里面的每一个对象都是一个路由
 routes: [
   {
     path: '/', // 碰到这个路径跳转路由至index
     name: 'index',  // 给这个路由取的一个别名
     component: index // 代表在当前路径下，加载index路由
   }
 ]
})

    3. 在需要加载路由的地方，使用Vue组件 router-view 去加载

      路径： src

      <!-- App.vue -->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

      此时页面就已经自动刷新成以下界面：

    演示界面

    1. 组件化开发

      • 在components下新建文件hoting.vue 和comming.vue

        // hoting.vue
<template>
   <div class="hoting"></div>
</template>
   
<script>
// 导出组件
export default {
   name:'hoting'
}
</script>

<style scoped>
</style>
        // comming.vue
<template>
   <div class="comming"></div>
</template>
   
<script>
// 导出组件
export default {
   name:'comming'
}
</script>

<style scoped>
</style>

      • 在需要使用组件的地方引入并注册组件

        // index.vue 路径：src/pages
<template>
  <div>
    <div class="pageTitle">猫眼电影</div>
    <ul class="topNav">
      <li :class="[showHot==1?'active':'']" @click="showHot=1">正在热映</li>
      <li :class="[showHot==0?'active':'']" @click="showHot=0">即将上映</li>
    </ul>
    <div class="main">
      <hoting v-show="showHot==1"></hoting>
      <comming v-show="showHot==0"></comming>
    </div>
    
  </div>
</template>
   
<script>
import hoting from '@/components/hoting'
import comming from '@/components/comming'

export default {
  name: "index",
  components: {
    hoting,comming
  },
  data() {
    return {
      showHot:1
    }
  }
};
</script>

<style scoped>
/** 其他样式代码已注释，demo有完整代码 **/
.active{
  color: rgb(229, 72, 71);
  border-bottom: 2px solid rgb(229, 72, 71);
}
</style>

        现在点击相应的按钮就会跳到相应的界面在这里插入图片描述

    2. 路由跳转（通过路由添加电影详情页）

      • 在路由文件夹pages下新建文件 movieDetail.vue 作为要跳转的详情页

        <template>
    <div>
        <h3>欢迎来到电影详情页</h3>
    </div>
</template>
// ...

      • 将详情页路由加入到路由对象中

        // index.js  路由：src/router
import Vue from 'vue'
import Router from 'vue-router'
// 引入
import index from '@/pages/index'
import movieDetail from '@/pages/movieDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',  
      component: index
    },
    {
        path:'/movieDetail',
        name: 'movieDetail',
        component: movieDetail
    }
  ]
})

      • 在热映和即将上映的页面，添加进入详情页的按钮

        <template>
  <div class="hoting">
    <h3>正在热映的电影</h3>
    <button @click='$router.push({name:"movieDetail"})'>点击进入电影详情页</button>
  </div>
</template>
// ...
        $router.push() 属于编程式路由

        现在点击按钮 点击进入电影详情页 即可通过路由进入详情页页面（地址栏已经跳到了详情页路由） 路由跳转

    点这里查看完整demo地址

    点我进入第二节

    项目管理猫眼项目开发vue-clivue.js前端工程化
    艾欢欢
    410 声望20 粉丝
    « 上一篇
    vue-router 前端路由之路由传值
    下一篇 »
    在线使用iconfont字体图标

    引用和评论

    推荐阅读
    头像
    canvas绘图模糊处理（高分屏下的canvas绘制）

    艾欢欢赞 4阅读 7.5k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 464评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 854

    0 条评论
    得票最新