项目结构
原创2022年5月8日
项目结构
src
├── apis 接口目录
│ └── api.js
├── assets
│ ├── audio
│ ├── fonts
│ ├── images
│ └── videos
├── autoload 自动加载
│ ├── api.js
│ ├── component.js
│ ├── directive.js
│ ├── filter.js
│ ├── i18n.js
│ ├── index.js
│ ├── mixin.js
│ └── plugin.js
│ └── router.js
├── components 全局组件
├── constants
│ └── urls.js
├── directives 全局指令
├── env 环境变量
│ ├── development.js
│ └── production.js
├── filters 全局过滤器
├── lang 国际化
│ ├── en.js
│ ├── index.js
│ └── zh.js
├── layout 项目布局
│ └── default
│ ├── footer.vue
│ ├── header.vue
│ ├── index.vue
│ └── menu.vue
├── main.js 入口文件
├── mixins 全局混入
│ └── index.js
├── pages 页面目录
│ ├── 404.vue
│ └── index.vue
├── plugins 外部插件
│ └── basil
│ └── index.js
├── router 路由目录
│ └── index.js
├── static 静态文件
│ ├── css
│ ├── images
│ │ └── favicon.png
│ └── js
├── styles 样式文件
│ ├── global.scss
│ ├── index.scss
│ ├── normalize.scss
│ ├── reset.scss
│ └── variable.scss
├── tpls 模板目录
│ └── index.html
├── utils 工具函数
│ └── index.js
├── vuex 全局存储
│ └── index.js
└── App.Vue 挂载模板
## 入口文件
> `src/main.js`
```bash
/**
* 此文件为应用核心入口文件
* 一般情况下,不需要动此文件
* 如果需要添加第三方模块
* 请到plugins目录下操作
*/
// 核心库
import Vue from 'vue';
// 全局路由
import router from '@/router/index.js';
// 全局存储
import vuex from '@/vuex/index.js';
// 插件导入
import '@/autoload/index.js';
// 国际化
import i18n from '@/autoload/i18n.js';
// 全局样式
import '@/styles/index.scss';
// 应用模板
import App from '@/App.vue';
// 实例化
let vm = new Vue({
router: router,
store: vuex,
i18n: i18n,
render: (h) => h(App)
}).$mount('#app');
yicode
的入口文件,非常的简洁明了,如无必要,请不要在此处引入第三方模块和文件。
样式文件
src/styles
├── global.scss 全局样式
├── index.scss 统一引入
├── normalize.scss 常规样式
├── reset.scss 重置样式
└── variable.scss 变量文件
yicode
默认且推荐采用scss
语法,过去,现在,以及将来,也将会支持且仅支持scss
和less
两种预处理语法。(不要问为什么,问就是约定大于配置,为了下一个接手项目的兄弟能开心编码,缩进语法强烈反对者!)
全局样式定义,请在 global.scss
文件中定义,不要在 App.vue
文件中书写!
默认 scss
变量文件为 variable.scss
,请将全局变量定义在此文件。
路由文件
src/router
└── index.js
路由目录有且仅有
index.js
这一个文件,也请不要在此目录下增加其他任何东西!使用yicode new -p 页面名称
创建页面,路由是自动生成,自动加载的!