2021-05-13

最新推荐文章于 2024-03-19 22:38:41 发布

weixin_53869204

最新推荐文章于 2024-03-19 22:38:41 发布

阅读量470

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_53869204/article/details/116764482

版权

<Hmtt>

1.在项目初始化阶段,我们要做哪些事情?

1. Git管理

2.使用VueCLI创建项目

3.调整初始目录结果

4.导入图标素材

5.引入Vant组件库

6.REM适配

7.封装请求模块

2.使用VueCLI创建项目命令? 需要手动选择哪些特性?

1 vue create toutiao-m

2 .babel/vue-router/vuex/less/eslint

? Please pick a preset: Manually select features

? Check the features needed for your project:

 (*) Babel

 ( ) TypeScript

 ( ) Progressive Web App (PWA) Support

 (*) Router

 (*) Vuex

 (*) CSS Pre-processors

>(*) Linter / Formatter

 ( ) Unit Testing

 ( ) E2E Testing

3.使用寿命平台来管理项目中的图标

1.iconfont - 阿里

4.Vant组件库有几种引入方式? 使用组件比较多的项目使用哪种引入方式?

1.共4种: 自动按需引入 / 手动按需引入 / 全局引入 / CDN引入

2.使用全局引入的方式

5.使用第三方包做rem适配 > 这两个包的作用分别是?

1.amfe-flexible - 动态设置rem基准值 (html标签的font-size)

2.postcss-pxtorem - 将px转换为rem

6.Vant是按多少px设计的？我们常见的设计稿尺寸是多少？

1.375px

2.750px

7.rootValue是什么？如何动态的设置rootValue？

1.基准值(设计稿尺寸的十分之一)

2.变成函数 :

rootValue({ file }) {
// { file } 参数结构语法，file是被处理的文件路径
// 如果被处理文件路径中包含vant那么就为37.5，否则为75
// return file.indexOf('vant') !== -1 ? 37.5 : 75
return file.includes('vant') ? 37.5 : 75
}

8.项目初始化做了些什么？

1.vue create toutiao-m

2.手动选择哪些特性 : babel . vue-router . vuex . less . eslint

3.引入vant组件库 (一次性引入)

4.使用amfe-flexble和postcss-pxtorem来做REM适配

5.使用iconfont管理项目使用到的图标

6.请求模块封装的基本准备

9.登陆注册有哪些要做的

1.创建组件并配置路由

2.布局结构 / 样式

3.实现登录基本功能

4.登录状态提示

5.表单验证

6.验证码处理

10.如何配置懒加载方式的路由?

1.将component选项的值改成函数,并配置import函数

{ ..., component: () => import('@/views/login') }

补充说明：

import函数也是ES6一种导入模块的方式（动态导入），之前学的导入方式都属于静态导入（会被JS引擎静态分析，先于模块内的其他代码执行），只能写在模块文件的最上面，而动态导入可以写在任何可执行的地方，从而实现按需加载
import函数返回值是Promise对象

11.用到了哪些Vant组件?

1.VanNavBar . VanForm . VanField . VanButton

12.登录注册_准备_布局样式

导航栏样式类定义在哪里？
1. 全局样式文件中（src/styles/index.less）
如何在表单输入框前插入图标？
1. 使用#left-icon具名插槽插入我们在iconfont中导入的图标
  
  补充说明：<i slot="left-icon" class="toutiao toutiao-shouji">属于Vue v2.6之前的旧版语法，等价于新版语法：<template #left-icon><i class="toutiao toutiao-shouji"></template>
如何在输入框后面插入按钮？并重置VanButton样式？
1. 使用#button具名插槽
2. 添加自定义类名（套路）

13登录注册_实现基本登录功能

如何监听表单的提交事件？如何获取到表单数据？
1. 给VanFrom添加@submit事件
2. 给VanField绑定v-model指令关联数据
如何捕获请求失败？
1. 通过try...catch...
```
try {
    const res = await login(user)
    console.log('登录成功', res)
} catch (err) {
    console.log('登录失败', err)
}
```
  补充说明：若响应状态码为2xx，axios会返回一个状态为fulfilled的Promise对象，否则返回一个状态为rejected的Promise对象