Vue移动端项目知识点

1。项目_创建

1.1创建项目 (建议使用cmd终端)

vue create hmtt

1.2采用自定义方式去创建项目

    上下箭头切换, 回车确认, 空格选中

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features  

1.3手动选择特性

  Babel, Router, Vuex, CSS Pre-processors, Linter

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing  

1.4版本Vue2.x

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview) 

1.5路由是否使用history模式：不采用

1.6css 预处理器: 使用less

1.7 eslint语法风格：Standard (一定)

1.8检查节点：保存时检查，提交时检查 (提交时可以不选)

1.9 存储插件配置位置：单独放在不同的文件中

1.10 接下来，它会问你是否要保存前面的设置作为预设方案，以便后续创建其它项目时直接使用

 如果选择Y, 保存, 以后就可以一键完成以上步骤

2..ESLint在VSCode中使用

2.1  一定要把脚手架工程, 作为vscode根目录, 因为eslint要使用配置文件.eslintrc

2.2 一定要配置插件监测的时机, 修改ESLint插件配置  不用管别的, 把红框的放在{}内即可

"eslint.run": "onType",
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true
}

在.eslintrc.js文件中, 可以调整规则(团队内可以自定义自己一套)

---

 在 src 目录下中补充创建以下目录：

├── node_modules # 安装的包
├── public	# 静态资源托管目录
│   ├── favicon.ico
│   └── index.html
└── src	# 源码
    ├── api	#请求接口封装模块
    	└── index.js #封装请求方法
    ├── assets	#资源目录
    ├── components	#组件目录
    ├── router	#路由模块
    	└── index.js #路由对象
    ├── store	#Vuex容器模块
    	└── index.js #store对象
    ├── styles #样式目录
    ├── utils  #工具模块目录
    ├── views  #视图组件目录
    ├── App.vue	#根组件
    └── main.js	#入口文件
├── .browserslistrc # 浏览器的约定
├── .editorconfig #对本项目要用到编辑器的约定
├── .eslintrc.js #eslint
├── .gitignore # git的忽略设置
├── babel.config.js	#babel配置文件
├── package-lock.json	#npm相关文件
├── package.json	#npm相关文件
└── README.md	#项目说明文件

3.项目_Vant组件库

1. 下载vant组件库

2. 根据文档指引, 配置按需引入

3. 下载插件

npm install babel-plugin-import -D

4. 在babel.config.js-添加如下配置

module.exports = {
    // ...省略了其他
    plugins: [
        ['import', {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
        }, 'vant']
    ]
};

5. 改了src以外的文件, 要重启本地开发服务器

4.项目_移动端适配

适配方案选型

1. PC端一般都是1:1用px还原UI设计图, 靠内容撑开高度

2. 移动端一般都是rem单位进行适配

适配步骤

1. 下载amfe-flexible    

     根据网页宽度, 设置html的font-size

npm install amfe-flexible

2. 到main.js引入 

import "amfe-flexible"

3. 下载postcss和postcss-pxtorem@5.1.1

  

     postcss: 后处理css, 编译翻译css代码

     postcss-pxtorem: 把css代码里所有px计算转换成rem

npm install postcss postcss-pxtorem@5.1.1

4. 根目录下创建postcss.config.js文件      对postcss进行设置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 编码时, 一个元素宽是75px，则换成rem之后就是2rem
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

1. 37.5 是如何得来的?

    UI移动端设计图宽度375px, 而flexible.js会/10, 设置html的font-size为37.5

2. 移动端适配选择哪种?

     rem + flexible.js

3.  flexible.js作用是什么?

     js代码里获取网页宽度 / 10设置html的font-size的值(px单位)

4. 代码里px如何自动转换rem?

     postcss和postcss-pxtorem插件

5.  为何要二次封装axios函数?

   为了让我们的代码更加灵活, 统一管理

6. axios.create作用?

   创建返回一个新的axios函数对象

7. 为何要封装接口方法?

   还是为了方便管理

5.项目_try和catch

1. await用于取代then函数, 等待Promise成功结果提取在原地

2. await无法获取Promise失败的结果, 一旦失败Promise错误直接抛出到控制台

解决方案

使用JS里内置语法, try+catch

语法:

/*
try {
	// 可能会报错的代码(例如await)
} catch (err) {
	// try里代码报错, 捕捉到这里执行
}
*/

具体代码:

import { allChannelListAPI } from '@/api'
async function myFn () {
  try {
    const res = await allChannelListAPI()
    console.log(res) // 后台返回的频道数据
  } catch (err) {
    console.error(err)
  }
}
myFn()

class类名覆盖

运行后, 找到组件标签的类名, 编写相同类名覆盖 

.van-nav-bar{
   background: #007bff;
}

/* /deep/ 就是把data-v-hash值选择器写到类名的前面 */
/deep/ .van-nav-bar__title{
	color: white;
}

6.vant组件定制

方式1

vant组件配置 - less变量配置

1. babel.config.js 修改配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // 指定样式路径
      style: (name) => `${name}/style/less`
    }, 'vant']
  ]
}

2. vue.config.js - 修改配置 (让webpack打包时, less变量被覆盖)

module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 直接覆盖变量
          'nav-bar-background-color': '#007bff',
          'nav-bar-title-text-color': 'white',
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          // hack: `true; @import "your-less-file-path.less";`,
        }
      }
    }
  }
}

3. 一定要重启webpack开发服务器, 然后观察效果

方式2

vant组件配置 - less文件

1. src/styles/cover.less - vant定制less变量统一在这管理

// NavBar导航
@nav-bar-background-color:#007bff;
@nav-bar-title-text-color:white;

2. vue.config.js - 注释变量, 放开引入文件路径

// 不要手动写绝对路径, 用代码来动态获取, 绝对地址
const path = require('path')
// console.log(__dirname) // 当前文件, 所在文件夹, 的绝对路径
// 盘符:/......../工程名字, 后面自己拼接 src/styles/cover.less
module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 直接覆盖变量
          // 'nav-bar-background-color': '#007bff',
          // 'nav-bar-title-text-color': 'white',
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${path.resolve(__dirname, 'src/styles/cover.less')}";`
        }
      }
    }
  }
}