创建vue3项目所需要的插件

Posted 2023-04-03

参考技术A 1.VScode 安装 Volar
2.Chrome 安装vue3_devtools
浏览器地址栏输入 chrome://extensions

3.安装vant
1.npm i vant

4.安装axios npm i axios

5.mock npm i mockjs
还要安装 语法包 npm i --save-dev @types/mockjs 因为开了非常严格的模式

去哪儿项目的流程

项目流程

• 一、确定项目所需要的插件
• 二、创建vue脚手架
• 三、使用模块？
• 四、路由
• 五、开始书写代码
• 六、webpack配置打包优化 （vue.config.js）

一、确定项目所需要的插件

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

二、创建vue脚手架

yarn，npm(cnpm) 包管理工具
yarn add axios -S
cnpm install axios -S
-S: --save-dev 生产环境的依赖 （dependencies）
-D: --dev 开发环境的依赖 （devDependencies）

三、使用模块？

1. 多环境变量配置（开发、测试、生产）
2. axios 请求拦截，响应拦截 (API统一管理)
3. sass 预编译
4. rem移动端适配方案
5. vant-ui 按需导入
6. 本地跨域
7. vuex 300毫秒延迟问题 （较老设备点击事件有300ms延迟问题）
8. 1px 边框像素问题
9. 初始化样式问题 (reset.css引入项目) js工具文件
10. （防抖、节流、日期处理、数据类型检测） 字体图标引入

四、路由

• 路由嵌套
• 路由传参
• 路由守卫
• keep-alive

五、开始书写代码

在Vue中完成此项目

六、webpack配置打包优化 （vue.config.js）

详情可看
webpack打包优化