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

这里是仿猫眼移动端。使用 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

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

看下图及注释

项目开发

准备工作

1. 修改 index.html 文件

   路径： 位于根目录。

   index.html文件需要更改和添加的只有title和meta

   对新添加的meta标签不理解的，看 这里

2. 修改 App.vue 文件

   路径：src

   删除 和

3. 路由的引入、定义

   路径： 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路由
      }
    ]
   })

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

   路径： src

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

1. 组件化开发

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

     // hoting.vue
     
        
     
     
     

     // comming.vue
     
        
     
     
     

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

     // index.vue 路径：src/pages
     
        
     
     
     

     现在点击相应的按钮就会跳到相应的界面

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

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

     
     // ...

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

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

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

     
     // ...

     $router.push() 属于 编程式路由

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

点这里查看完整demo地址

点我进入第二节