项目的流程（去哪）-CSDN博客

本文链接：https://blog.csdn.net/weixin_54534151/article/details/117460885

首先确定项目开发的技术栈

vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack

搭建项目

使用 npm(cnpm) yarn 包管理工具安装依赖文件或下载插件
全局安装axios 两种方式： 1. cnpm install axios -S
2.yarn add axios -S
-S 是：–save-dev 生产环境依赖（dependencies）
-D 是 -dev 开发环境依赖（devDependencies）

开始搭建

指令

vue create 项目名称
…
cd 项目名称
yarn install 或者 cnpm i 安装依赖文件
启动 cnpm run serve

UI可视化界面安装、配置、安装插件、启动项目

vue ui

使用模板

好处：快便捷基本的插件或文件准备好了
包含以下

1.多环境变量的配置
2.axios请求拦截响应拦截（API统一管理）
3.scss（预编译）
4.rem 移动端适配方案
5.vant-ui 或者 Element-ui 引入
6.本地跨域请求
7.vuex
8.300毫秒延迟问题（有些旧设备点击事件300毫秒延迟问题）
9.1px边框像素问题
10.初始化样式（(reset.css引入项目)）
11.js工具文件（防抖、节流、日期处理、数据类型检测）
12.字体图标引入

300毫秒延迟问题的解决
安装 fastclick 在全局main.js中引入

yarn add fastclick -S

//main.js

import fastclick from "fastclick";

fastclick.attach(document.body);

1px边框像素问题
解决方案：在assets文件下创建css文件在吃文件中创建border.css
写入下面代码最后再main.js中引入

// aseets/css/border.css
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
------------------------------------
// main.js
import './aseets/css/border.css'