Skip to content
陈随易陈随易
我的博客
    • 基本简介
      • 快速入门
        • 项目结构
          • 样式文件
            • 路由文件
            • 核心思想
              • 常用指令

              项目结构

              陈随易原创2022年5月8日
              • 开源项目
              • yicode-cli
              • 入门指引
              大约 2 分钟

              此页内容
              • 样式文件
              • 路由文件

              # 项目结构

              
              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');
              
              
              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

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

              # 样式文件

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

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

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

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

              # 路由文件

              src/router
              └── index.js
              
              1
              2

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

              上次编辑于: 2022/5/16 上午8:47:35
              贡献者: chensuiyi
              上一页
              快速入门
              下一页
              核心思想
              何以解忧,唯有代码
              Copyright © 2022 陈随易

              该应用可以安装在你的 PC 或移动设备上。这将使该 Web 应用程序外观和行为与其他应用程序相同。它将在出现在应用程序列表中,并可以固定到主屏幕,开始菜单或任务栏。此 Web 应用程序还将能够与其他应用程序和你的操作系统安全地进行交互。

              详情