2021-06-04创建一个vue项目

hmtt项目初始

技术选型

vue.js： 核心vue

vuex： 状态管理插件(数据集中管理)

vue-router： 路由插件

axios： ajax请求

json-bigint： 最大安全数值处理

socket.io-client： 即时通讯库

vant： 移动组件库

amfe-flexible： rem适配

vue-lazyload： 图片懒加载

打包App：DCLOUD 打包

1.创建项目(使用vuecli)

1.1vue create hmtt

1.2选用自定义特性

需要选中： Babel, Router,Vuex,CSS Pre-processors, Linter

选用版本

路由是否采用history模式

css的预处理器

代码风格

ESLint检查

存储插件配置位置

是否保存本次设置

等待创建完毕

1. 进入项目： cd hmtt-tj-3
2. 启动项目： npm run serve

如果npm 下载比较慢，可以用npm config set registry https://registry.npm.taobao.org
但是我不设置 我下载的时候出现过问题 所以 我翻墙(手动狗头)

创建完成
cd 项目
code . 打开

2. 认识并调整目录

├── node_modules      # 安装的包
├── public	          # 静态资源
│   ├── favicon.ico
│   └── index.html
└── src
    ├── api	          # 请求接口封装模块
    ├── assets	      # 资源目录
    ├── components	  # 组件目录
    ├── router	      # 路由模块
    ├── store	      # Vuex容器模块
    ├── styles        # 样式目录
    ├── utils         # 工具模块目录
    ├── views         # 视图组件目录
        └──home       # 首页模块
        |	    ├── home.vue
        ├─video       # 视频模块
        |	    ├── video.vue
        ├─question    # 问答模块
        |	    ├── question.vue
        ├─search      # 搜索模块
        |	    ├── search.vue
        ├─user        # 用户模块
        |     ├── user.vue
        └─Layout.vue  # 公用布局组件
    ├── App.vue	      # 根组件
    └── main.js	      # 入口文件
├── .browserslistrc   # 浏览器的约定
├── .editorconfig     # 对本项目要用到编辑器的约定
├── .eslintrc.js      # eslint 配置
├── .gitignore        # git的忽略设置，哪些文件不需要git托管
├── babel.config.js	  # babel配置文件
├── package-lock.json	# npm相关文件
├── package.json	    # npm相关文件
└── README.md	        # 项目说明文件

删除不需要的文件和代码 创建需要的文件和文件夹
删除 略…(懒得截图了)

2.1 新增

3.引入vant组件库

vue.js移动端组件库介绍 官网
使用步骤:
安装 => 引入 => 使用

3.1安装vant

npm i vant  # 完整安装的格式是： npm install vant --save

3.2 引入

1. 完整引入
   好处：使用方便（不需要每次使用组件都import ）
   缺点：打包体积大
2. 按需引入
   好处：打包体积小
   缺点：相对于全部引入要稍微麻烦一些：每次使用都要import组件

结论： 在开发项目时直接使用完整引入方式，在项目打包时再去做调整。

import Vue from 'vue'
import Vant from 'vant' // 组件库
import 'vant/lib/index.css' // 样式

Vue.use(Vant) // 引入

3.3使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

4.rem适配

工具:postcss-pxtorem lib-flexible
项目上线不用 所以是生产依赖

1. 把所有px单位改成rem ， 用postcss-pxtorem 来实现，它是一款 postcss 插件，用于将px转化为 rem。
2. 根据不同的手机屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。用lib-flexible 来实现，用于设置 rem 基准值 。

4.1安装

# 后处理器 开发阶段使用
# -D： 表示开发依赖， 项目上线之后就不需这个包了（只需要在开发阶段把px->rem就行了）
# 作用：把px单位自动转成rem单位
npm i postcss-pxtorem@5.1.1 -D

# 修改rem基准值的js插件   需要在打包后需要使用
# 作用: 根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
#      它的默认计算方式是屏幕宽度的1/10，默认值是37.5
npm i amfe-flexible

4.2设置postcss

创建配置文件 postcss.config.js

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

4.3引入flexible

// 它会根据的手机尺寸来调整rem的基准值：html标签上的font-size。
import 'amfe-flexible'

适配完成

5 axios封装

下载 => 封装

npm i axios

5.1封装基地址

5.2封装请求功能

一次设置多次调用

6.end