Vue4-VantUI项目基础模板

该模板使用了Vant作为UI框架。

• 需要技术栈：vuex + router + less

前端开发规范

请查看 https://shimo.im/docs/RcdHTXKwWk96WjD3/

配置

请查看：./my-config.js

目录结构

以下目录均在src文件夹下。

• assets 用于存放一些图标的小图片，该文件夹中所有资源会被打包，图片被转换为base64，如果图片过大会显著增加打包时间
• components 只存放共用组件，以功能或组件类型来分类
• config 包含vue原生钩子和一些自定义钩子，以及一些其他项目全局都要用到的文件。以下是每个文件的作用

> beforeCreate、created：vue原生钩子

> beforeInit：自定义钩子，在创建vue根实例之前执行，注意：这里完全无法访问到当前vue实例，因为还没有创建

> alertMounted：自定义钩子，在自定义通知方法(this.$alert)绑定后执行，此时 window._api 也已经绑定完成

> directives：添加vue自定义指令

> filters：添加vue过滤器

> globalVars：设置全局变量，挂载于window._GLOBAL

> methods：向Vue的原型链添加方法(也就是向vue实例添加方法)，请以$开头，并确保方法名没有被占用

> request：请求器实例，用于配置请求和响应拦截器，自定义请求头等，请求器使用axios

> api：封装项目中的全部请求，并包括自动控制loading、错误提示等功能，所有请求方法挂载于 window._api

> vuxAlert：自定义的弹窗通知方法库

• router 管理路由
• store 管理vuex全局状态
• styles 全局样式，详见下表

> page文件夹：根据目录层级存放多个页面(不是全局)需要引入的样式

> common：全局样式，其中声明的class在全局都可以使用，class命名以 com- 开头

> self： 项目自身样式，其中声明的class在全局都可以使用

• utils 一些工具函数
• views 页面，其中的common文件中存放了一些常用页面，这些页面一般以子路由形式使用
• api 管理项目的所有api方法，所有请求方法挂载于 window._api

关于目录安排

引用组件、共用样式、工具函数等一律使用别名，以绝对路径引用。以下是默认的别名列表(在my-config.js中配置)：

• @: src
• @c: src/components
• @v: src/views
• @u: src/utils
• @img: src/assets/images
• @icon: src/assets/icon

如果某些样式表和组件，只在某一模块内使用，则将其放在对应文件夹下，按类型放在不同文件夹中，以相对路径引用。

例如有如下几个文件：

login
  > style.less 登录模块的共用样式
  > TextInput.vue 输入栏
  > Login.vue 登录
  > Register.vue 注册

则应这样安排目录结构：

login
  > styles
    > style.less
  > components
    > TextInput.vue
  > Login.vue
  > Register.vue

配置编辑器的别名跳转

编辑器在项目配置了路径别名后，会导致快捷跳转失效，以下是解决方法。

推荐在引用文件时不要省略文件名后缀，这样可以保证jsconfig.json在VS Code的正常工作(路径别名跳转等)

在my-config.js修改或添加别名后，请同时修改jsconfig.json和webstorm.alias.js两个文件，以确保在VsCode和WebStorm上快捷跳转的工作。

WebStorm

维护webstorm.alias.js文件。

需要在webStorm中设置项目的配置文件，选择webstorm.alias.js。具体操作：

按下ctrl + alt + s 会打开设置，再搜索“Webpack”，在右侧会有个选择文件的输入框，点击输入框的右侧按钮，会弹出选择文件的菜单，选择本项目中的webstorm.alias.js文件，在右下角点击“OK”即可。