大家好，又见面了，我是你们的朋友全栈君。
一、确定项目技术栈
vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack
二、搭建
推荐使用yarn
yarn，npm(cnpm) 包管理工具
yarn add axios -S
cnpm install axios -S
-S: --save-dev 生产环境的依赖 （dependencies）
-D: --dev 开发环境的依赖 （devDependencies）
- 从0开始搭建
首先我们要创建一个项目，使用以下：
指令：
vue create demo
.....
cd demo
yarn install
npm run serve //项目启动
或者我们可以使用可视化安装、配置、安装插件、启动项目。
在命令窗口中使用vue ui，弹出页面
- 使用模块
- 多环境变量配置（开发、测试、生产）
- axios 请求拦截，响应拦截 (API统一管理)
- sass 预编译
- rem移动端适配方案
- vant-ui 按需导入
- 本地跨域
- vuex
- 300毫秒延迟问题 （较老设备点击事件有300ms延迟问题）
- 1px 边框像素问题
- 初始化样式问题 (reset.css引入项目)
- js工具文件 （防抖、节流、日期处理、数据类型检测）
- 字体图标引入
1.多环境变量首先配置我们的开发环境下的，生产环境下的，测试环境下的，再运行 npm run build ,或者是test
2.配置axios时，我们写入请求拦截和响应拦截，进行API的统一管理，请求分两种形式：分别为get , post 形式进行传参
3.sass预解析：意思就是说将浏览器不能识别的css代码转换成浏览器能识别的
4.rem：针对于移动端的适配问题，是根据手机屏幕进行适配的–也就是响应式的
5.vue ui 的按需引入
6.本地跨域– 通常我们使用jsonp跨域
7.vuex–vuex是vue的状态管理工具，我们可以存放公共数据
8.300毫秒延迟问题 –我们可以下载插件，如下↓
yarn add fastclick -S
//main.js
import fastclick from "fastclick";
fastclick.attach(document.body);
9.1px像素问题 –屏幕的占比不同像素也不同
// 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'
10.初始化样式问题 —我们可以在(reset.css中引入项目) 例如 box-sizing:border-box
三、路由
我们经常用的有
- 路由嵌套
- 路由传参
- 路由守卫
- keep-alive
四、组件化开发
1.组件拆分问题：我们可以封装公共组件、功能性组件
2.组件开发：父传子、子传父、兄弟传值
五、webpack配置的打包优化（vue.config.js）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/152736.html原文链接：https://javaforall.net
