vue项目实战之猫眼网(项目搭建)

最近简单的学习了一下vue框架,所以想用vue的一些知识搭建一个网页,让自己熟悉一下vue的一些知识,挑中了猫眼这个网页,只是打算实现里面的部分功能.

因为时间问题,只打按照每天写的,贴出代码,并对代码做出一些简单的解释,最后做一个总结,想要更加详细解释的可以自行百度或询问.

这篇博客的目的是记录怎么搭建一个项目,并下载一些搭建项目过程中需要用到的组件

1vue框架的下载需要node环境,大家可在http://nodejs.cn/download/自行下载,并且按照https://www.runoob.com/nodejs/nodejs-install-setup.html链接进行配置

2安装vue cli脚手架

    2.1全局安装 npm install -g @vue/cli

    2.2检查版本vue -V

         vue是2.X版本 cli是4.0X版本

    2.3创建项目vue create myproject

 

 

    2.4选择Manually select features进行一些配置    使用 空格 确定和取消

    

 

      按照上图选中需要的部分

              TypeScript 支持使用 TypeScript 书写源码

              Progressive Web App (PWA) Support PWA 支持。

              Router 支持 vue-router 。

              Vuex 支持 vuex 。

             CSS Pre-processors 支持 CSS 预处理器。

             Linter / Formatter 支持代码风格检查和格式化。

             Unit Testing 支持单元测试。

             E2E Testing 支持 E2E 测试。

    2.5选择n,不保留配置

    2.6选第一个,如果选择严格模式,有时会使自己 寸步难行

     2.7 选择语法检查方式,选择第一个保存及检查

     2.8选择配置文件 in package.json

 

    2.9选择是否保存配置  选n,不保存

    然后一路回车走到底等待安装完成

    2.10

        cd 进入目录

        npm run serve 启动项目

        npm build serve 编译发布项目

         

    2.11 点击打开 链接http://localhost:8080/,说明vue cli配置成功

 

 

3下面配置所需要的环境

 

    3.1sass(不会使用的可以根据https://www.sass.hk/文档进行学习,不想使用sass的可以直接使用css) 

        npm install sass-loader --save-dev

        npm install node-sass --save-dev

 

 

     使用的时候在style 加入语言指定lang就可以了 sass的写法就可以正常使用了 如果是局部样式加入 scope 也可以如图直接选定

<style lang="scss">全局

 

    3.2解决页面适配

           安装lib-flexible：　　npm i lib-flexible --save

　　          在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'

 

            使用postcss-px2rem自动将css中的px转换成rem

　　     安装postcss-px2rem ：npm install postcss-px2re

      新建vue.config.js文件,并在文件中加入配置项

module.exports = {
ave: false,

  css: {
      loaderOptions: {
          css: {
              // options here will be passed to css-loader
          },
          postcss: {
              // options here will be passed to postcss-loader
              plugins: [require('postcss-px2rem')({
                  remUnit: 75, //设计稿的 十分之一
                  "exclude": /node_modules/i
              })]
          }
      }
  },
  
}

 

      3.3配置axios

          1：安装axios

               npm install axios --save

          在main.js中引入

               import axios from "axios";

               Vue.prototype.$axios = axios;

          并且将引入的axios对象挂载到原型对象中 在其他的地方就都可以调用了

          在其他页面就可以调用了 但是有巨坑 如果调用数据调试 使用console 请加上window.console.log

 

 

    3.4 引入vant UI库   https://youzan.github.io/vant/#/zh-CN/quickstart

         安装  npm i vant -S 

         自行按照文档中的引入组件的方法引入组件

        我是

    

环境基本配置完成

进行一些最基本配置,效果如下

目录如下

APP.vue页面

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">电影</router-link>
      <router-link to="/Cinema">影院</router-link>
      <router-link to="/Mine">我的</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 Home.vue页面

<template>
  <div class="home">
    我是首页
  </div>
</template>

<script>

export default {
  name: 'home',
  components: {
  
  }
}
</script>

Cinema.vue页面

<template>
  <div>
    我是影院
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Mine.vue页面

<template>
  <div>
    我是个人中心
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

配置路由

router文件夹下的index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Cinema from '../views/Cinema.vue'
import Mine from '../views/Mine.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta:{
      title:"影院票房"
    },
  },
  {
    path: '/Cinema',
    name: 'cinema',
    component:Cinema,
    meta:{
      title:"影院票房"
    },
  },
  {
    path: '/Mine',
    name: 'mine',
    component: Mine,
    meta:{
      title:"我的"
    },
  },
]

const router = new VueRouter({
  mode:"hash",
  routes
})

export default router

保存 npm run serve