tduck-front

说明

该仓库是为统一 Vue 项目初期配置而设立，方便快速进行业务开发，基于 Vue CLI 3 。

使用

方法 1

适用于初学者快速上手，项目里包含演示文件，方便学习

拉取该项目到本地，安装依赖包后运行即可。

运行后，可以看到功能演示，同时项目目录里带有 example 的目录均为演示代码。

依赖

• vue-router
• vuex
• axios
• lodash
• dayjs
• vue-cookies
• vue-meta
• node-sass
• sass-loader
• sass-resources-loader
• svg-sprite-loader
• webpack-spritesmith

全局 SCSS 资源

全局 SCSS 资源通过 sass-resources-loader 实现

注意！并不是全局样式，而是 SCSS 资源，是变量、@mixin 、@function 这些东西

在 assets/styles/resources/ 目录下存放全局的 scss 资源，也就是说在这个目录里的文件，无需在页面上引用即可生效并使用。

例子中默认存放了 utils.scss 文件，里面有几个 @mixin 和 % ，你可以尝试在页面中使用它们看看效果。

同样， assets/sprites/ 目录下生成的 scss 文件也是默认全局。

全局组件

全局组件会自动注册，可直接使用。

在 components/global/ 目录下存放全局组件，需要注意各个组件按文件夹区分，文件夹名称与组件名无关联。

每个组件的文件夹内至少保留一个文件名为 index 的组件入口，例如 index.vue 。

普通组件必须设置 name 并保证其唯一，自动注册会将组件的 name 设为组件名，可参考 SvgIcon 组件写法。

如果组件是通过 js 进行调用，则确保组件入口文件为 index.js，可参考 ExampleNotice 组件。

路由

路由也实现自动注册，但因为有优先级的概念，先定义的会先匹配，所以同一模块下的路由必须放在一个路由配置文件里，具体可参考 router/modules/example.js 文件。

Vuex

Vuex 同样实现了自动注册，开发只需关注 store/modules/ 文件夹里的文件即可，同样也按照模块区分文件。