使用Vue CLI 3快速搭建一个结构清晰的VUE项目
使用Vue CLI 3快速搭建一个结构清晰的VUE项目
JavaScript Vue.js相关
访问GitHub主页
共2Star
详细介绍
fed-vue-init 初始化一个结构清晰的vue项目,适用初学者,从0到1的vue项目
css 命名规则
布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
模块(module)(.m-{模块名}):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!
元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!
状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{}),具体详见命名规则的扩展相关项。
JS (.js-):为js绑定加入前缀,统一标识,方便识别,她只能用于绑定js相关内容,不做任务样式绑定!
目录结构
- public
- index.html
- src // vue主目录
- api // api
- index.js // api map
- assets // 主静态资源目录
- iconfont // iconfont
- images // images
- style // less、scss、css
- index.less // 主入口
- components // 全局通用组件
- x-empty // 命名规则:以单字母或者3字母内开头,使用`-`代替驼峰命名;例:x-null
- index.js // 导出所有全局组件
- router // 路由
- store // vuex
- modules // 新vuex modules
- app.js // 对modules进行分类,namespaced: true;调用方式store.dispatch('app/setLoading', true)
- index.js // 导出modules
- getters.js // 选择性导出业务所需 state
- index.js // 导出
- utils // 工具目录
- filters.js // 全局过滤器
- request.js // 全局http请求,this.$http({})
- views // views
- layout // 业务页面主框架
- components // 业务私有组件,组件命名规则:以单字母或者3字母内开头,带上业务名称,使用`-`代替驼峰命名;例:x-layout-header
README.md // 项目概述
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your tests
npm run test
Lints and fixes files
npm run lint
Customize configuration
推荐源码
-
817 Star
-
304 Star
-
26303 Star
-
9 Star
-
573 Star
-
33 Star
-
4 Star
-
1 Star
-
81 Star