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

时间  2019-12-08 标签 vue项目实战 vue 工程 项目 猫眼 移动
这里是仿猫眼移动端。使用 vue-cli 建立项目。
​
本节先介绍并进行项目的初始化，而后把主框架搭起来，熟悉路由和组件，后面在 项目demo 持续贴出完整项目代码。也会更新博客。
​
第二节传送

vue初始化项目

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

npm/cnpm install vue-cli -g

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

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

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

从第四行开始：

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

# 安装依赖
npm install

# 启动开发环境
npm run dev

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

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

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

一些代码描述

webpack.base.conf.js

路径： bulid github

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

路径：srcweb

// 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/>'
})

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

项目开发

准备工做

  1. 修改 index.html 文件vue-cli

    路径： 位于根目录。npm

    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地址

点我进入第二节

联系我们 沪ICP备13005482号-10