项目准备

  • 通过 Vue CLI 创建项目

    1. vue create lagou-deu-mobile

  • 选项配置

    1. ? Please pick a preset: Manually select features
    2. ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
    3. ? Use history mode for router? (Requires proper server setup for index fallback in production) No
    4. ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
    5. ? Pick a linter / formatter config: Standard
    6. ? Pick additional lint features: Lint on save, Lint and fix on commit
    7. ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
    8. ? Save this as a preset for future projects? No

  • 进入项目并运行

    1. cd lagou-deu-mobile
    2. npm run serve

  • 项目基础结构

    1. lagou-deu-mobile
    2. ├─ .browserslistrc
    3. ├─ .editorconfig
    4. ├─ .eslintrc.js
    5. ├─ .gitignore
    6. ├─ README.md
    7. ├─ babel.config.js
    8. ├─ package-lock.json
    9. ├─ package.json
    10. ├─ public
    11. │  ├─ favicon.ico
    12. │  └─ index.html
    13. └─ src
    14.  ├─ App.vue
    15.  ├─ assets -------------------------------    静态资源文件
    16.  ├─ components --------------------------- 公共组件
    17.  ├─ main.js ------------------------------ 入口文件
    18.  ├─ router ------------------------------- 路由
    19.  │  └─ index.js
    20.  ├─ services ----------------------------- 请求接口
    21.  ├─ store -------------------------------- 状态管理文件
    22.  │  └─ index.js
    23.  ├─ utils -------------------------------- 工具函数
    24.  └─ views -------------------------------- 页面文件

Vant 组件库

文档网站

安装

  1. # Vue 2 项目，安装 Vant 2：
  2. npm i vant -S
  4. # Vue 3 项目，安装 Vant 3：
  5. npm i vant@next -S

通过脚手架安装

  1. # 安装 Vue Cli
  2. npm install -g @vue/cli
  4. # 创建一个项目
  5. vue create hello-world
  7. # 创建完成后，可以通过命令打开图形化界面，如下图所示
  8. vue ui

引入组件

  • src/main.js ```javascript import Vant from ‘vant’ import ‘vant/lib/index.css’

Vue.use(Vant)

  2. <a name="T6HCz"></a>
  3. ## 浏览器适配
  4. <a name="pMd6t"></a>
  5. ### 动态设置 rem 基准值
  6. [lib-flexible](https://github.com/amfe/lib-flexible/)
  8. - 安装
  9. ```powershell
  10. npm i -S amfe-flexible
  • 引入(需要作为第一个插件来引用） ```javascript // src/main.js

// 引入 lib-flexible import ‘amfe-flexible’

  2. <a name="UHuyO"></a>
  3. ### 自动将 px 转换为 rem
  5. - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)
  6. - [postcss中文文档](https://github.com/postcss/postcss/blob/main/docs/README-cn.md)
  7. - 安装
  8. ```powershell
  9. npm install postcss-pxtorem@5.1.1 --save-dev
  • 配置
    1. // .postcssrc
    2. module.exports = {
    3. plugins: {
    4.   // 自动添加 css 浏览器前缀
    5.   'autoprefixer': {
    6.     // 浏览器信息配置 在 .browserslistrc 中进行配置
    7.     // browsers: ['Android >= 4.0', 'iOS >= 8']
    8.   },
    9.   // px/rem 单位转换
    10.   'postcss-pxtorem': {
    11.     rootValue: 37.5,//默认值
    12.     propList: ['*']//被处理的属性列表
    13.   }
    14. }
    15. }

路由处理

  • src/router/index.js ```javascript import Vue from ‘vue’ import VueRouter from ‘vue-router’ import Course from ‘@/views/course’ Vue.use(VueRouter)

const routes = [ // 登陆页 { path: ‘/login’, name: ‘login’, component: () => import(/ webpackChunkName: ‘login’ / ‘@/views/login’) }, // 首页 { path: ‘/‘, name: ‘course’, component: Course }, // 学习页面 { path: ‘/learn’, name: ‘learn’, component: () => import(/ webpackChunkName: ‘learn’ / ‘@/views/learn’), meta: { requiresAuth: true } }, // 用户页 { path: ‘/user’, name: ‘user’, component: () => import(/ webpackChunkName: ‘login’ / ‘@/views/user’) }, // 404 { path: ‘/‘, name: ‘error-page’, component: () => import(/ webpackChunkName: ‘error-page’ */ ‘@/views/error-page’) } ]

const router = new VueRouter({ routes })

export default router

  2. <a name="dt0Qr"></a>
  3. ## 封装请求模块
  5. - [接口文档](http://eduboss.lagou.com/front/doc.html#/home)
  6. - `src/utile/requres.js`
  7. ```javascript
  8. import axios from 'axios'
  10. const request = axios.create({
  11.   baseURL: 'http://edufront.lagou.com'
  12. })
  14. export default request

公共组件-导航

  • src/components/LayoutFooter.vue
    1. <template>
    2. <div class="layout-fotter">
    3.   <van-tabbar router>
    4.     <van-tabbar-item replace to='/' icon='orders-o'>选课</van-tabbar-item>
    5.     <van-tabbar-item replace to='/learn' icon='desktop-o'>学习</van-tabbar-item>
    6.     <van-tabbar-item replace to='/user' icon='user-o'>我</van-tabbar-item>
    7.   </van-tabbar>
    8. </div>
    9. </template>
    10. <script>
    11. export default {
    12. name: 'LayoutFooter'
    13. }
    14. </script>
    15. <style lang="scss" scoped>
    16. </style>