程序员经验分享-hwhale

Vue 下的文件夹分类和文件作用等

2023-11-18

src

  • assets
    • css
      • base.css : 项目基础的 css
      • normalize.css: githut 上一个很多企业都会引入的 css 用来规定一些基础空间的外貌的样式
    • images
  • common: 放一些 share 的 js 文件，默认文件名为 utils.js
  • components : 只放 share 的 components
    • common : 放所有项目都能 share 的组件
    • content: 放本项目中 share 的组件
  • store : 仓库 - 可以存 vuex 全局状态
    • index.js
    • mutations-type.js 用于存储、管理 mutations 中的方法名
    • getters.js 单独的 getters
    • mutations.js 单独的 mutations
    • actions.js 单独的 actions
    • modules
      • moduleA.js //单独的模块js
      • moduleB.js //单独的模块js
  • network ： //网络请求相关的文件
    - request.js //封装网络请求
    - home.js //所有home page 的网络请求
  • router
  • views
    • 一个页面创建一个文件夹，每个页面有自己的 components 文件夹
    • home ：首页文件夹
      • components或者childComps ： Home 页面中只有自己使用的组件
      • Home.vue: 文件名字大写，folder 名字小写
        methods 中 注意 “事件监听相关方法” 和 “网络请求相关方法” 区分开来，写好注释，其中网络请求相关方法具体的接口等信息都写 network 中的 home.js 里，这里只调用即可
    • profile : 个人中心文件夹
    • cart : 购物车文件夹
  • editorconfig.js: 项目文本相关配置，从旧的项目中复用过来即可
  • vue.config.js:脚手架3用来手动设置自定义配置，这里设置下各个路径的别名

路径中的 @

代表 src ,是因为脚手架中给 src 文件夹设置了别名

  • 在 script import : import Footer from “@/index/components/footer/Footer”;
  • 在 style 标签里引用 css 需要加 ~ 号: @import “~@/index/assets/common/layout.css”;
  • 在 data 里写 icon: require("@/assets/img/tabbar/cart.png")

Css 文件引入

  • base.css 引入 normalize.css：
    @import “./normalize.css”
  • App.vue 中引入 base.css
    @import “./assets/css/base.css”

相关链接

https://github.com/
https://necolas.github.io/normalize.css/latest/normalize.css

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

vuejs

nodejs

css

Vue 下的文件夹分类和文件作用等 的相关文章

随机推荐

  • C++的sort函数对于vector排序

    对于vector

  • llvm 介绍有用的网站

    LLVM笔记 7 指令的side effect LLVM笔记 7 指令的side effect Five100Miles 博客园 LLVM每日谈之十八 GEP Instruction的几点总结 LLVM每日谈之十八 GEP Instruct

  • 用docker搭建公司内部的gitlab 和 wiki

    docker run name gitlab d link gitlab postgresql postgresql link gitlab redis redisio publish 10022 22 publish 10080 80 e

  • 使用jasypt为springboot配置文件加密

    使用jasypt为配置文件加密 配置项明文可能出现的问题 先看一份典型的配置文件 配置MySQL数据库连接 spring datasource driver class name com mysql jdbc Driver spring d

  • 【为什么】C++中的#pragma once是干什么，和#include guard区别

    一 pragma once是C和C 编程语言中的一个非标准但广泛支持的预处理指令 用于使当前源文件在单次编译中只被包含一次 它与 include guards有相同的作用 但有一些优点 如 代码更少 避免名称冲突 有时可以提高编译速度 代码

  • Nim游戏

    Nim游戏 一共有N堆石子 编号从1到N 第i堆中有a i 个石子 有A和B两个人 依次拿石子 每次可以从任意堆中拿任意数量的石子 至少拿一颗 至多拿着一堆剩下的所有石子 两个人轮流行动 取光所有石子的一方获胜 最后一次拿石子的那一人获胜

  • Go语言切片详解

    文章一 Go语言切片基础 文章二 Go语言切片详解 文章三 Go Go 语言切片 Slice 文章四 Go基础 数组和切片 一个固定长度一个可变长度 文章五 Go语言自学系列 golang切片的初始化 文章六 go语言切片详解 初始化 扩容

  • 通用技术 关于线上监控的思考总结

    前言 近期和大佬们对规划 梳理新财年要做的事情 有非常重要的一项就是线上监控 对于线上监控 大家都最熟悉不过 凡是在生产环境上运行的系统 或多或少都会有监控 但是否有思考过哪些监控是有效的 监控的目的是什么 监控告警出来之后又是怎么的一轮操

  • C实现Unix时间戳和本地时间转化

    我们平常说时间都说的几点几分几秒 星期几 但是在计算机里面并不是直接使用我们所说的时间 而是使用Unix时间戳 这样不管是哪个平台 哪个系统 都可以根据自己对时间的定义进行转换 像Java PHP等都提供了接口来进行转化 C库里面也有这样的

  • MQ如何保证消息不丢失？

    MQ如何保证消息不丢失要从三个方面来考虑 1 生产者 生产者要确保消息投递到MQ服务端 可以使用手动ACK 消息确认机制 认为消息持久化到硬盘 才能够认为生产者投递成功 2 MQ服务端 需要将消息持久化到硬盘 3 消费者 消费者要确保消息消

  • 报错解决：A server error occurred. Please contact the administrator /gbk 9737

    简介 HTML网页显示如题报错 对应python终端显示的是如下错误 解决办法 1 打开报错显示的views debug py 找到如下代码 我这个是已经修改过的 只要找到这段就行 在open 中加入encoding utf 8 如下图 编

  • Linux 下Qt应用程序打包发布方法及踩过的坑

    写这篇文章主要是记录一下自己遇到的问题及解决办法 希望对遇到相同问题的你有所帮助 目的 我需要编写一份可以在服务器上运行的Qt代码 即需要在linux环境下将Qt应用程序打包将其放在服务器上运行 环境 服务器上ubantu版本20 04 1

  • C++中的Date类（日期类）

    C 中Date类用的比较多 所以通过查找参考 自己写了一个比较全面的Date类 直接上代码 头文件 h ifndef DATE H INCLUDED define DATE H INCLUDED include

  • Acticiti中startProcessInstanceByKey方法在variable表中的如何存储

    Acticiti中startProcessInstanceByKey方法在variable表中的如何存储 已知 在使用runtimeService startProcessInstanceByKey String processDefini

  • STM32 进阶教程 14 - 程序加密之FLASH读写保护

    前言 在嵌入式应用开发中 应用开发完成后往往需要对芯片中的程序进行加密处理 用以保护程序安全 不至被竞争对手从芯片把程序固件考走 本节将给大学介绍一个如何实现程序自动给芯片加密功能 学完本节内容 你也可以开发不容易初别人破解的程序了 示例详

  • html 横屏内容显示不全_为什么我的文本显示不全？

    在实际工作中 经常会遇到文本显示不全的情况 比如表格里的文本显示不全等情况 你一般是怎么操作呢 本期与大家分享几种常见的原因 1 Word表格文本显示不全 如下图所示 表格里面的文本显示不全 这时该怎么处理 很多人会进行以下操作 选中表格

  • windows10 使用python（pyhive,impala）连接hive  遇到的问题

    1 socket gaierror Errno 11001 getaddrinfo failed 解决方法 一定不要输入http 另外不要输入密码 conn hive Connection host 12 34 5 20 port 1000

  • 小程序-uni.previewImage实现点击图片放大的预览功能

    uni previewImage是uniapp提供的预览图片的方法 第一种点击盒子图片预览放大效果 1 准备结构

  • How to reduce the number of bugs when coding ?

    写设计文档能帮助自己理清设计思路 如果设计到修改原有代码 一定要关注到原有代码的逻辑闭合 否则造成的后果是加功能引入了BUG 作设计的时候要考虑到各种场景和约束 单元测试一定要做到位 程序员自己测试可以做到白盒测试去覆盖每一个分支 程序员有

  • Vue 下的文件夹分类和文件作用等

    src assets css base css 项目基础的 css normalize css githut 上一个很多企业都会引入的 css 用来规定一些基础空间的外貌的样式 images common 放一些 share 的 js 文件

热门标签