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

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