一.针对Vue初始项目的整理和配置

查看vue-cli为我们生成的项目目录

针对Vue初始项目的整理和配置
1.找到最外层的配置文件,里面的配置用来控制是否每次保存时是否启用eslint检查代码,根据自身情况选择 devServer可以将没有匹配到静态文件的请求都代理到这个URL从而满足跨域的请求
针对Vue初始项目的整理和配置
针对Vue初始项目的整理和配置
2.package.json文件定义了如项目名称、项目版本、项目依赖等项目描述
针对Vue初始项目的整理和配置针对Vue初始项目的整理和配置
3.public文件夹内存放公共文件,index.html文件为模版文件,webpack在运行或者打包项目是使用这个文件作为模版生成最后的文件
针对Vue初始项目的整理和配置

二.针对src文件夹的整理和配置

src文件夹为主文件夹
assets用来放静态资源,如图标、字体
components中存放组件
views中存放组件
App.vue为基础文件
main,js是项目入口文件,项目在开发运行和编译时都以该文件开始
router.js为路由文件
store.js为状态管理文件
针对Vue初始项目的整理和配置

在src文件夹下新建api文件夹 用来存放项目的接口
在assets文件夹下创建img、font文件夹用来存放图片和字体
在src文件夹下新建config文件夹 用来存放项目配置
在src文件夹下新建directive文件夹 用来存放vue的自定义指令
在src文件夹下新建lib文件夹并在该文件夹下创建util.js 和tool.js分别用来存放与业务有关系的工具(函数)已经单纯的工具方法

对rooter文件夹进行配置整理

针对项目中可能出现复杂的路由拦截
在rooter文件夹中新建rooter.js,抽出index.js中的路由列表放置到建好的rooter.js中,并使用es6的模块系统进行导出

针对Vue初始项目的整理和配置针对Vue初始项目的整理和配置
针对Vue初始项目的整理和配置针对Vue初始项目的整理和配置

对store文件夹进行配置整理

查看项目初始中的基础状态,为这些状态创建单独文件,并通过import xxx from xxx引入index.js

针对Vue初始项目的整理和配置针对Vue初始项目的整理和配置
创建module板块文件夹,并创建user.js文件
针对Vue初始项目的整理和配置
针对Vue初始项目的整理和配置
在store文件夹下的index.js文件中引入,如图
针对Vue初始项目的整理和配置

配置Mock文件夹

在vscode中启动终端,执行npm install mockjs -D
在src文件夹下创建mock文件夹并配置文件
针对Vue初始项目的整理和配置针对Vue初始项目的整理和配置
src整理如图
针对Vue初始项目的整理和配置

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-18
  • 2021-07-18
  • 2021-11-16
  • 2022-01-14
猜你喜欢
  • 2022-01-05
  • 2022-12-23
  • 2022-02-22
  • 2022-12-23
  • 2021-04-19
  • 2021-08-30
  • 2021-12-06
相关资源
相似解决方案