src
- assets
- css
- base.css : 项目基础的 css
- normalize.css: githut 上一个很多企业都会引入的 css 用来规定一些基础空间的外貌的样式
- images
- css
- 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