(二)文件配置

已于 2022-06-07 17:55:04 修改
阅读量219 收藏
点赞数
分类专栏： 项目练习 文章标签： vue.js webpack javascript
于 2022-06-07 17:16:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45953482/article/details/125166894
版权

1、项目基本信息

该项目有主要功能：
资讯列表、标签页切换，文章举报，频道管理、文章详情、关注功能、点赞功能、评论功能、搜索功能、登录功能、个人中心、编辑资料、小思同学
生产环境的包

包名概念
vue核心vue
vuex状态管理插件
vue-router路由管理插件
axios网络请求插件
vant移动组件库
socket.io-client即时通讯库
amfe-flexibleflexiblejs适配

开发环境的包

包名概念
babelES语法转换器
lesscss预处理器
vue-clivue项目脚手架包
postcsscss语法转换器(后处理器)
postcss-pxtorem把px自动转rem插件(需要配合webpack用)

项目相关的技术点

  • vuejs中
    • $nextTick使用 (vue更新DOM是异步的)
    • 组件通信 (父, 子传递)
    • async和await用法
    • keep-alive 组件缓存
  • vuex
    • actions中发ajax请求
    • actions的返回值问题
  • vue-router
    • 懒加载 (对打包以后首页加载速度有提高)
  • axios
    • 请求和响应拦截器
    • 封装请求工具方法 (代码分层)
  • vant
    • 对组件使用更熟悉
    • 掌握使用和查阅文档的能力
  • socket.io-client
    • http协议复习 (请求报文和响应报文)
    • 与ajax区别
    • ajax和socket之间的选择
  • amfe-flexible
    • 移动端rem适配

跳过部分
如何创建Vue,不再赘述,使用Vue create就可以创建 另外根据需求,可能需要删除elslint或创建eslint下面总结Eslint经验

2、ESLint配置及介绍

目标

  • 了解ESLint的作用
  • 能判断ESLint的错误

ESLint是什么

ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范

  • 例如: = 的前后必须有一个空格
  • 例如: 函数名后面必须有空格
  • 例如: await必须用用在async修饰的函数内
  • 例如: ==必须转换成3个等
  • …

ESLint的好处

  • 在写代码过程中, 检查你代码是否错误, 给你小黑屋提示

  • ESLint可以约束团队内代码的风格统一

ESLint是法官, Standard是法律

ESLint的规范

规范文档: http://www.verydoc.net/eslint/00003312.html

规范文档2: https://standardjs.com/rules-zhcn.html

规范文档3: http://eslint.cn/docs/rules/

ESLint使用

在代码里随便多写几个回车, ESLint会跳出来刀子嘴, 豆腐心的提示你.

在webpack开发服务器终端 / 浏览器 => 小黑屋

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hri4KEAh-1654588483423)(images/image-20210119223702865.png)]

eslint 是来帮助你的。心态要好，有错，就改。

把第4步规则名字, 复制到上面规范里查找违反了什么规则 / 根据第三步提示修改

小结

  1. 什么是ESLint?

    代码检查工具

  2. 为什么要使用ESLint?

    规范我们写代码的格式, 看着整洁 / 团队内成员风格统一

  3. ESLint在哪里生效?

    webpack开发服务器+ESLint配置检查

5.ESLint在VSCode中使用

目标

  • 每次运行后, 才看到ESLint报错, 很累吧?
  • 边写代码, VSCode就提示ESLint规则?

ESLint插件

  1. 下载这个插件到vscode中

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xN5ZBHMS-1654588483424)(images/image-20210327194440711.png)]

​ 2. 非常非常非常重要

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

  1. 一定要配置插件监测的时机, 修改ESLint插件配置

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aIyLm2Nk-1654588483425)(images/image-20210327195329383.png)]

    不用管别的, 把红框的放在{}内即可

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

更多的规则可以参考这里: https://www.cnblogs.com/jiaoshou/p/12218642.html

ESLint插件修复

  • 随便文件里多敲击几个回车, vscode报错提示, 证明ESLint插件开始工作
  • ctrl + s 报错下是否能自动修复部分问题, 可以, 证明ESLint插件开始工作

如果不工作, 看下面扩展资料

自定义规则

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHRjVBrd-1654588483425)(images/image-20210627220435336.png)]

rules是一个对象，以键值对的格式来约定规则：

  • 键名是规则名
  • 值是这条规则的具体说明。最常见的有off,warn,error

小结

  1. ESLint在哪2个地方分别检查代码?

    VSCode里工作和webpack开发服务器也检查

  2. ESLint插件有什么功能?

    VSCode编码时, 提示, 保存还可以自动修复大部分问题

3、 项目基本结构及配置

  1. 清空src/views/App.vue中的默认内容, 留个框

    <template>
  <div>
      黑马头条移动版
  </div>
</template>

  2. 删除默认生成的文件

    • components/HelloWorld.vue
    • views/Home.vue
    • views/About.vue

  3. 修改一下路由配置 - 留下框

    • src/router/index.js
    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 删除掉
]

const router = new VueRouter({
  routes
})

export default router

新增文件夹

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

  • /api/index.js ： 存储请求函数模块
  • /styles: 样式文件模块
  • /utils: 工具函数模块

项目的完整目录结构

通过mddir自动生成

├── 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	#项目说明文件

主要留意两个新增

  1. api文件夹的作用?
    • 统一管理网络请求方法
  2. utils文件夹的作用?
    • 定义工具方法的地方

有些项目可能会把axios的二次封装文件放在api下,在这里作为独立的工具包引入utilis下,方便统一管理

4、Vant组件库的使用

Vant是一款轻量级的组件库API,相比起适用于管理系统的element-ui,更适合于移动端,在这个项目中学习如何使用
有赞团队推出的Vant组件库

其他移动端组件库

  • vux
  • mint

引入vant组件库

  1. 下载vant组件库

    yarn add vant

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

    https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#yin-ru-zu-jian

    如果上面打不开用这个地址试试: https://youzan.github.io/vant/#/zh-CN/home

  3. 下载插件

    yarn add babel-plugin-import -D

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

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

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

  6. vant组件库这里采用按需引入

    只需要引入某个组件而不是全部, 组件对应样式文件也会自动引入

5、移动端适配

采用postcss和postcss-pxtorem@5.1.1将px转化为rem
利用amfe-flexible> 根据网页宽度, 设置html的font-size,来适应移动端布局

适配方案选型

  1. PC端一般都是1:1用px还原UI设计图, 靠内容撑开高度
  2. 移动端一般都是rem单位进行适配

适配步骤

  1. 下载amfe-flexible

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

    yarn add amfe-flexible

  2. 到main.js引入

    import "amfe-flexible"

  3. 下载postcss和postcss-pxtorem@5.1.1

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

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

    yarn add 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: ['*']
    }
  }
}

    37.5 是如何得来的?

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

小结

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

    rem + flexible.js

  2. flexible.js作用是什么?

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

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

    postcss和postcss-pxtorem插件

6、封装axios函数

  • 基于axios进行二次封装
  • 统一配置, 便于管理

  1. 下载axios

    yarn add axios

  2. 创建utils/request.js

    // 基于 axios 封装的请求模块
import ajax from 'axios'
// 新建一个新的axios实例
const axios = ajax.create({
  baseURL: 'http://123.57.109.30:8000' // 基地址
})

// 导出自定义函数, 参数对象解构赋值
export default ({ url, method = 'GET', params, data, headers }) => {
  return axios({ 
    url: url,
    method: method,
    params: params,
    data: data,
    headers: headers
  })
    
// 以后换库, 只需要改这里, 逻辑页面不用动, 保证代码的复用性和独立性(高内聚低耦合)
//   return $.ajax({
//     url: url,
//     type: method,
//     data: data,
//     header: headers
//   })
}

小结

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

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

  2. axios.create作用?

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

这里的封装方式并不绝对,不同项目会有不同封装结构,这里采用这种

最后总结下我们在这里干了什么

  1. 理清项目技术栈项目需求,确定了项目的主要功能(登录与注册等),并清除自己要写什么
  2. 配置项目,确定是否引入eslint,配置项目结构
  3. 使用Vant组件库,按需导入
  4. 配置移动端布局
  5. 配置axios,并且暴露出去

接下来首先完成登录与注册功能

挖掘机器人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现移动端适配方案 （amfe-flexible和postcss-pxtorem结合）建议收藏
been_ss的博客
10-13 2万+
1.amfe-flexible amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。 2.postcss-pxtorem postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。 3.移动端适配方案 vue实现移动端适配步骤如下： 先安装amfe-flexible和postcss-pxtorem npm install amfe-flexible --save npm install postcss-pxtorem --sa
CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem（适用于 Webpack）
前端技术
06-09 6535
项目对应的webpack以谷歌为例，F12 打开“开发者工具”，页面会出现如上分辨率选择最下一行的 “修改…”打开“修改…”对话框，添加自定义设备… ，注意选择Desktop，最后保存就能切换了。
移动端适配(amfe-flexible)
最新发布
sjkafljask的博客
03-22 236
链接：https://www.jianshu.com/p/64d6292fb607。商业转载请联系作者获得授权，非商业转载请注明出处。在项目根目录中, 新建。
amfe-flexible同时适应pc端和移动端方法
热门推荐
weixin_43825693的博客
05-20 1万+
使用背景 同一个框架下面需要开发PC端和移动端，框架目录如下： 调用amfe-flexible实现了移动端自适应，但是在PC端想实现因为vue.config.js的rootValue只能设置一个，所以PC端自适应会因为移动端的rootValue页面组件变的巨大无比。 require('postcss-pxtorem')({ // 把px单位换算成rem单位 rootValue: 37.5, // 换算的基数(设计图750的根字体为75) // selectorBlackList
总结一下vue移动端适配方案
xixi的博客
09-15 1625
方案一：amfe-flexible+px2rem-loader amfe-flexible：根据设备宽度，修改根元素html的大小，以适配不同终端 px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了 注意：amfe-flexible是lib-flexible的优化，主要区别是amfe-flexible不会改变视口大小 安装 + 配置 1. 安装amfe-flexible和px2rem-loader npm install -s amfe-flexible npm i
vue3-vite使用lib-flexible（amfe-flexible）总结/vue3 px转rem工具方法
程小博衍的博客
03-08 3028
vue3-vite使用lib-flexible（amfe-flexible）
MySQL优化之配置文件
12-14
通常默认的 my.cnf 配置文件无法发挥出 MySQL 最高的性能，所以需要根据不同的硬件进行优化，配置文件的优化也是重点，下面是物理内存为 32G 的数据库优化参数，具体从全局、二进制日志、主从、innodb、myisam 几个...
Labview打开二进制配置文件
02-07
使用Labview打开二进制文件，在配置部分会设置当前VI的运行环境，以区分文件的路径。
如何写python的配置文件
09-16
二、读取配置文件 要读取配置文件，首先需要导入`ConfigParser`模块： ```python import configparser cf = configparser.ConfigParser() cf.read('path_to_config_file.ini') ``` `read()`方法读取配置文件，并...
Spring读取配置文件属性实现方法
08-19
二、使用 @PropertySource 注解读取配置文件 使用 `@PropertySource` 注解可以读取外部配置文件属性。下面是一个示例代码： ``` @Configuration @PropertySource(value = {"classpath:zszxz.properties"}, ...
CentOS8 网卡配置文件
01-20
二、 配置 网卡配置文件：/etc/sysconfig/network-scripts/ifcfg-ens33 [root@localhost ~]# cd /etc/sysconfig/network-scripts/ [root@localhost network-scripts]# ls #就会看到一个配置网卡的配置文件
vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案
铁锤妹妹的博客
03-18 5772
1.介绍amfe-flexible amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。 2.介绍postcss-pxtorem postcss-pxtorem是postcss的插件，用于将像素（px）单元生成rem单位。 具体步骤： 1. 安装两个插件 npm install amfe-flexible --save npm install postcss-pxtorem --save 2. 在main.js导入amfe-flexible import 'a.
前端移动端适配使用amfe-flexible和postcss-px2rem
weixin_50367873的博客
08-23 2173
一、安装 npm install amfe-flexible -S npm install postcss-px2rem -S postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值 二、第二步引入 lib-flexible 在入口main.js中 引入 lib-flexible import "amfe-flexible"; 注意事项（important）: 由于flexible会动态
面适配 - 基本说明
weixin_44871058的博客
05-16 106
全局 less 变量 - 配置 在 style 中导入其它样式文件： @import url('xxx'); 有了设计规范之后，我们就可以根据规范中的内容抽取less全局变量啦,把颜色抽取一波,同时配合自动化导入让代码中可以使用 预处理器 自动化导入 style-resources-loader 实现步骤： 定义一个保存全局变量的文件 /src/style/var.less 装包 vue add style-resources-loader 注意: 报上面错误就执行 npm i vue-cl
使用amfe-flexible实现自适应布局
Littlegirlha的博客
01-08 2005
amfe-flexible
VUE_vue 移动端完美适配方案 amfe-flexible + postcss-pxtorem
小歪博客
09-16 3435
前言：根据最近做的一个医疗手机端项目总结在移动端，vue怎么在不同屏幕上做根据不同屏幕大小适配 1.适配方案 在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合）的方式。 首先介绍一下amfe-flexible amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10。 然后就是这个库 postcss-pxtorem postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。 2.
关于amfe-flexible同时适应pc端和移动端
Zkaaa1的博客
11-08 1078
关于amfe-flexible同时适应pc端和移动端
vue 实现响应式布局，移动pc端通用：amfe-flexible和postcss-pxtorem结合使用
yawhom的博客
03-03 2166
在vue.config.js添加配置postcss-pxtorem；（注意：可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置。对于需要特殊元素需要设置的字体自适应，如echarts字体，可以在utils封装一个字体自适应的方法。2.postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。在main.js引入amfe-flexible。
使用amfe-flexible以及px2rem-loader解决VUE移动端适配
jayccx的专栏
05-25 472
由于 layout viewport的宽度是远大于浏览器宽度的，因此我们需要一个新的viewport来代表浏览器的可视区域宽度，这个视图则被成为visual viewport我们可以使用window.innerWidth来获取。由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。vant组件库的设计稿是按照375px来开发的。至此，我们的viewport的适配就做好了，只需要按照设计稿的比例进行开发就可以了。
二进制安装mysql配置systemctl文件
04-28
可以按照以下步骤进行二进制安装mysql并配置systemctl文件： 1. 下载并解压缩MySQL二进制安装包： ``` $ wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.25-linux-glibc2.17-x86_64.tar.xz $ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值