这里是仿猫眼移动端。使用 vue-cli 创建项目。
本节先介绍并进行项目的初始化，然后把主框架搭起来，熟悉路由和组件，后面在 项目demo 持续贴出完整项目代码。也会更新博客。
第二节传送
-02-20 ：目前已更新 猫眼升级版 技术栈：vue-cli3 + typescript + axios
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项目下各文件夹和各文件的功能描述
一些代码描述
webpack.base.conf.js
路径：bulid
// webpack.base.conf.jsmodule.exports = {...resolve: {//设置扩展名，如果配置了这个，name在import导入的时候，就不用再写后缀名了//使用scss的时候，还可以加上 .css 和 .scssextensions: ['.js', '.vue', '.json'，'.css','.scss'],//别名配置alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}}...}
这里的
@指的是路径../src，在webpack.base.conf.js里被封装了。
main.js
路径：src
// main.jsimport 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/>'})
看下图及注释
项目开发
准备工作
修改 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标签不理解的，看这里
修改 App.vue 文件
路径：src
删除
<img src="./assets/logo.png">和<style>标签内的样式
新建pages文件夹
在src目录下新建，这个目录模拟单页面开发当中的路由
开发演示
在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>
路由的引入、定义
路径：router
// index.jsimport Vue from 'vue'import Router from 'vue-router'// 引入路由import index from '@/pages/index'Vue.use(Router)export default new Router({// routes用来定义路由对象，里面的每一个对象都是一个路由routes: [{path: '/', // 碰到这个路径跳转路由至indexname: 'index', // 给这个路由取的一个别名component: index // 代表在当前路径下，加载index路由}]})
在需要加载路由的地方，使用Vue组件router-view去加载
路径：src
<!-- App.vue --><template><div id="app"><router-view/></div></template><script>export default {name: 'App'}</script><style></style>
此时页面就已经自动刷新成以下界面：
组件化开发
在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>
现在点击相应的按钮就会跳到相应的界面
路由跳转（通过路由添加电影详情页）
在路由文件夹pages下新建文件movieDetail.vue作为要跳转的详情页
<template><div><h3>欢迎来到电影详情页</h3></div></template>// ...
将详情页路由加入到路由对象中
// index.js 路由：src/routerimport 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项目实战】Vue工程化项目--猫眼电影移动端》对你有帮助，请点赞、收藏，并留下你的观点哦！
