项目结构

2021-11-23 大约 2 分钟

# 项目结构


src
├── apis                接口目录
│   └── api.js
├── App.Vue             挂载模板
├── assets
│   ├── audio
│   ├── fonts
│   ├── images
│   └── videos
├── autoload            自动加载
│   ├── api.js
│   ├── component.js
│   ├── directive.js
│   ├── filter.js
│   ├── index.js
│   ├── mixin.js
│   └── plugin.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
│   │   ├── index.vue
│   │   └── route.js
│   └── index
│       ├── index.vue
│       └── route.js
├── 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


## 入口文件

> `src/main.js`

```bash
/**
 * 此文件为应用核心入口文件
 * 一般情况下,不需要动此文件
 * 如果需要添加第三方模块
 * 请到plugins目录下操作
 */
// 核心库
import Vue from 'vue';
// 全局路由
import router from '@src/router/index.js';
// 全局存储
import vuex from '@src/vuex/index.js';
// 国际化
import i18n from '@src/lang/index.js';
// 插件导入
import '@src/plugins/index.js';
// 异步请求
import '@src/request/index.js';
// 接口方法
import '@src/apis/index.js';
// 全局混入
import '@src/mixin/index.js';
// 全局组件
import '@src/components/index.js';
// 全局样式
import '@src/styles/index.scss';
// 应用模板
import App from '@src/App.vue';
// 实例化
let vm = new Vue({
    router: router,
    store: vuex,
    i18n: i18n,
    render: (h) => h(App)
}).$mount('#app');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

yicode的入口文件,非常的简洁明了,如无必要,请不要在此处引入第三方模块和文件。

# 样式文件

src/styles
├── global.scss         全局样式
├── index.scss          统一引入
├── normalize.scss      常规样式
├── reset.scss          重置样式
└── variable.scss       变量文件
1
2
3
4
5
6

yicode 默认且推荐采用 scss 语法,过去,现在,以及将来,也将会支持且仅支持 scssless 两种预处理语法。(不要问为什么,问就是约定大于配置,为了下一个接手项目的兄弟能开心编码,缩进语法强烈反对者!)

全局样式定义,请在 global.scss 文件中定义,不要在 App.vue 文件中书写!

默认 scss 变量文件为 variable.scss ,请将全局变量定义在此文件。

# 路由文件

src/router
└── index.js
1
2

路由目录有且仅有 index.js 这一个文件,也请不要在此目录下增加其他任何东西!使用 yicode new -p 页面名称 创建页面,路由是自动生成,自动加载的!

上次编辑于: 2021年11月25日 08:51
贡献者: chensuiyi