广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >vue-automation是什么
  • 443
分享到

vue-automation是什么

vue 2022-10-19 12:10:39 443人浏览 独家记忆
摘要

本篇内容主要讲解“Vue-automation是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue-automation是什么”吧!这是什么vue-aut

本篇内容主要讲解“Vue-automation是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue-automation是什么”吧!

这是什么

vue-automation 是一款开箱即用的 Vue 项目模版,它基于 Vue CLI 4

众所周知,虽然 Vue CLI 提供了脚手架的功能,但由于官方的脚手架过于简单,运用在实际项目开发上的时候,我们还需要做很多事情,而 vue-automation 就是来解决这一痛点,让你的开发效率至少提升 50% 以上。

特点

  • 默认集成 vue-router 、vuex 和 axiOS

  • 全局 SCSS 资源自动引入

  • 全局组件自动注册

  • 支持 SVG 图标,CSS 精灵图自动合成

  • 支持 mock 数据,可摆脱后端束缚独立开发

  • 支持 GZip 和 CDN 优化项目体积/加载速度

  • 结合 IDE 插件、ESlint 、stylelint 、git 钩子,轻松实现团队代码规范

功能介绍

配置

默认提供开发环境和生产环境两套配置,分别在根目录下 .env.development 和 .env.production 文件里,可配置项有网站标题、接口请求地址和是否开启CDN支持。

开发者可根据实际业务需求进行扩展,如果对这块不熟悉,可阅读 Vue CLI 环境变量和模式 章节。

全局 SCSS 资源

全局 SCSS 资源并不是全局样式,是变量、@mixin 、@function 这些东西

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

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

同样,精灵图目录下生成的 SCSS 资源也是全局可调用的。

精灵图

又称雪碧图,原理是将多张小图合并到一张大图上,以便减少 Http 请求,提高网站访问速度。

精灵图原始图片的存放位置位于 assets/sprites/ 目录下,注意按文件夹区分。

项目运行前会根据文件夹生成对应的精灵图文件(精灵图图片和 .scss 文件),多个文件夹则会生成多个精灵图文件。需要注意的是,在项目运行时,修改文件夹里的图片,会重新生成相关精灵图文件,但如果新建文件夹,则需要重新运行项目才会生成对应精灵图文件。

在 .vue 文件中可通过 @include 直接使用精灵图,无需手动引入 .scss 文件:

// 方法 1 // @include [文件夹名称]-sprite([文件名称]); .icon {     @include example-sprite(address); }  // 方法 2 // @include all-[文件夹名称]-sprites; @include all-example-sprites;

最终输出如下:

 .icon {     background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);     background-position: 0px 0px;     background-size: 210px 210px;     width: 100px;     height: 100px; }   .example-address-sprites {   background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);   background-position: 0 0;   background-size: 210px 210px;   width: 100px;   height: 100px; } .example-feedback-sprites {   background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);   background-position: -110px 0;   background-size: 210px 210px;   width: 100px;   height: 100px; } .example-payment-sprites {   background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);   background-position: 0 -110px;   background-size: 210px 210px;   width: 100px;   height: 100px; }

如果是小型项目,静态图标不多,可全部放在一个文件夹内;如果是中大型项目,文件夹可按模块来划分,这样不同的模块最终会生成各自的精灵图文件。

SVG 图标

现在越来越多项目开始使用 SVG 图标做为精灵图的替代品,本框架也提供了 SVG 图标支持,方便使用。推荐去 阿里巴巴矢量图标库 下载高质量 SVG 图标

首先将 svg 文件放到 src/assets/icons/ 目录下,然后在页面中就可以使用了, name 就是 svg 文件名

<svg-icon name="example" />

<svg-icon /> 组件为全局组件,所以无需注册即可使用

全局组件

全局组件存放在 components/global/ 目录下,需要注意各个组件按文件夹区分。

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

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

虽然文件夹名称和 name 无关联,但建议与 name 保持一致。

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

Vue-router

路由也实现了自动注册,但因为有优先级的概念,先定义的会先匹配,所以同一模块下的路由需要放在一个路由配置文件里。

开发者只需关心 router/modules/ 目录下的文件,一个模块对应一个 .js 文件,可参考 router/modules/example.js 文件。

Vuex

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

新建模版:

// example.js const state = {} const getters = {} const actions = {} const mutations = {} export default {     namespaced: true,     state,     actions,     getters,     mutations }

文件默认开启命名空间,文件名会默认注册为模块名。

使用方法:

this.$store.state.example.xxx; this.$store.getters['example/xxx']; this.$store.dispatch('example/xxx'); this.$store.commit('example/xxx');

Axios 拦截器

拦截器的用处就是拦截每一次的请求和响应,然后做一些全局的处理。

例如接口响应报错,可以在拦截器里用统一的报错提示来展示,方便业务开发。

本框架提供了一份拦截器参考代码 src/api/index.js ,因为每个公司提供的接口标准不同,所以该文件需要开发者根据各自公司的接口去定制对应的拦截器。

代码很简单,首先初始化 axios 对象,然后 axios.interceptors.request.use() 和 axios.interceptors.response.use() 就分别是请求和响应的拦截代码了。

参考代码里只做了简单的拦截处理,例如请求的时候会自动带上 token ,响应的时候会根据错误信息判断是登录失效还是接口报错。

快速创建文件

该功能基于 plop 实现。

开发过程中,避免不了手动去频繁创建页面、组件等文件,并且还要在文件里写一些必要的代码,是不是觉得很麻烦?现在你可以用更简洁的方式来处理这一切。

vue-automation是什么

模版默认提供了 page(页面/布局) 、component(组件) 、store(全局状态) 三个模版文件,通过 yarn new 指令可以自行选择。

在实际项目开发中,建议根据项目定制适合项目的模版文件,可以大大提高开发效率,当多人协作开发时,也能统一部分标准。

模版目录为 ./plop-templates/ ,如果是新建模版,记得在项目根目录 plopfile.js 里引用一下。

代码规范:IDE 编辑器

为保证代码风格统一,统一使用 VS Code 做为开发 IDE ,并安装以下扩展:

  • EditorConfig for VS Code

  • ESLint

  • Vetur

  • Prettier - Code fORMatter

  • stylelint

安装完后在 settings.JSON 中增加如下配置:

"editor.codeActionsOnSave": {     "source.fixAll.eslint": true,     "source.fixAll.stylelint": true }

最终效果为,在保存时,会自动对当前文件进行代码格式化操作。

代码规范:Git 钩子

上述操作仅对代码的写法规范进行格式化,例如缩进、空格、结尾的分号等。

而在提交代码时, Git 的钩子会检查代码中是否有错误,这些错误是 IDE 无法自动修复的,例如出现未使用过的变量。如果有错误,则会取消此次提交,直到开发者修复完所有错误后才允许提交成功,确保仓库里的代码绝对正确。

可通过修改 .eslintignore 和 .stylelintignore 忽略无需做代码规范的文件,例如在项目中引用了一些第三方的插件或组件,我们就可以将其忽略

如果 git init 仓库初始化是在依赖包安装之后执行的,则无法初始化 Git 钩子,建议在 git init 之后再执行一遍 yarn 或者 npm i ,重新安装一遍依赖包。

代码规范:配置代码规范

配置文件主要有 3 处,分别为 IDE 配置( .editorconfig )、ESLint 配置( .eslintrc.js 和 .eslintignore )、StyleLint 配置( .stylelintrc 和 .stylelintignore )。

以代码缩进举例,本模版默认是以 4 空格进行缩进,如果要调整为 2 空格,则需要在 .editorconfig 里修改:

indent_size = 2

在 .eslintrc.js 里修改:

'indent': [2, 2, {     'SwitchCase': 1 }],  ...  'vue/html-indent': [2, 2],  ...  'vue/script-indent': [2, 2, {     'switchCase': 1 }]

在 .stylelintrc 里修改:

"indentation": 2

修改完毕后,再分别执行下面两句命令:

yarn run lint yarn run stylelint

该操作会将代码进行一次格式校验,如果规则支持自动修复,则会将不符合规则的代码自动进行格式化。

以上面的例子,当缩进规则调整后,我们无需手动去每个文件调整,通过命令可以自动应用新的缩进规则。

扩展功能

除了以上常用功能介绍外, vue-automation 还支持 mock 、CDN 、GZip 和移动端等相关配置,方便适应任何开发场景,真正做到了开箱即用。

生态

在我目前所在的公司里, vue-automation 已经稳定用于数十个真实项目上,覆盖企业官网、商城、数字大屏、微信公众号等多个不同领域。

同时在其基础上,扩展开发出了一套独立的 中后台系统框架 : Fantastic-admin ,在易用的基础上保证了功能全面,超越市面上大部分同类框架。

到此,相信大家对“vue-automation是什么”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: vue-automation是什么

本文链接: https://www.lsjlt.com/news/84103.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue-automation是什么
    本篇内容主要讲解“vue-automation是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue-automation是什么”吧!这是什么vue-aut...
    99+
    2022-10-19
    vue
  • automation服务器不能创建对象指的是什么意思
    这篇文章主要介绍automation服务器不能创建对象指的是什么意思,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!automation服务器不能创建对象是因为有些网站的脚本处理和相关认证不是很规范,导致当前浏览器的安...
    99+
    2023-06-20
  • vue vw是什么
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,...
    99+
    2023-05-14
    vue.js vue3
  • vue的key是什么
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。1. key是什么key在Vue是DOM对象的标识;key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode...
    99+
    2023-05-14
    Vue
  • vue钩子是什么
    这篇文章主要讲解了“vue钩子是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue钩子是什么”吧!在vue中,钩子指的是“hook”,是一种事件劫持机制,可以比事件更早进行执行处理;钩...
    99+
    2023-06-29
  • 什么是Vue 进阶
    这期内容当中小编将会给大家带来有关什么是Vue 进阶,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。现在我们有一个需求,变量 firstName = "hello...
    99+
    2022-10-19
    vue 进阶
  • vue是什么软件
    vue是一款视频剪辑软件,能够设置拍摄时候的色调滤镜,拍摄的时长,这些拍摄的视频,可以直接用到我们要制作的剪辑小视屏当中,而目前vue还代表了一块火热的JavaScript框架,它是一套构建用户界面的渐进式的,采用自底向上增量开发的设计,易...
    99+
    2022-10-11
    vue
  • Vue中options是什么
    小编给大家分享一下Vue中options是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1. options 是什么无论是 jQuery.js 还是 Vue....
    99+
    2023-06-15
  • 什么是vue框架
    Vue框架,也称为Vue.js,Vue框架是一个轻量级、高效、灵活和易用的JavaScript框架,它在构建用户界面方面提供了丰富的功能和工具。无论是小型应用还是大型应用,无论是个人项目还是企业级项目,Vue都是一个非常适合的选择。Vue框...
    99+
    2023-08-09
  • vue的生态是什么
    Vue.js是一种流行的JavaScript前端框架,已成为以Web前端开发为主的最佳选择之一。vue提供了非常完善的生态和工具,在vue的生态圈中已经有了很多优秀的支持库和服务,下面我们来仔细研究一下vue的生态系统。一、vue-cliV...
    99+
    2023-05-14
  • 什么是Vue-Router路由
    这篇文章给大家介绍什么是Vue-Router路由,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发...
    99+
    2023-06-22
  • vue中vue-full-calendar的作用是什么
    vue-full-calendar是一个基于Vue.js的全功能日历插件,可以用于展示、创建、编辑和删除事件。它提供了丰富的配置选项...
    99+
    2023-09-22
    vue
  • 解析VUE中nextTick是什么
    1、nextTick是Vue提供的一个全局API,由于Vue的异步更新策略导致我们对数据的修改不会立刻体现,在DOM变化上,此时如果想要立即获取更新后的DOM状态,就需要使用这个方法...
    99+
    2022-11-13
    vue中nexttick vue中nexttick是什么
  • vue的watch是做什么的
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。watch是用来做什么的?Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。wat...
    99+
    2023-05-14
    Vue watch
  • vue的options选项是什么
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。Vue中options的作用options是什么options 顾名思义就是“选项”的意思, 或称为构造选项. 是在创建Vue实例时传入的参数, 是一个对象.const ...
    99+
    2023-05-14
    Vue
  • vue中watch是什么属性
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。vue监视属性在开发中,我们会遇到这样一种情况,我们需要一个属性变化的时候,然后做出一些操作。而检测这个变化的属性,在vue中叫做监视属性。1.监视属性是什么在vue中,...
    99+
    2023-05-14
    watch Vue
  • vue中什么是模块化
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。什么是模块化我们说Vue项目是按照模块进行划分的,那么什么是模块呢?模块化,就相当于我们网站的导航栏,那么每一个导航项就可以看作是如下图片中提到的模块化,就好比是一个大的...
    99+
    2023-05-14
    Vue 模块化
  • vue中vm指的是什么
    本篇内容介绍了“vue中vm指的是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在vue中,vm是ViewModel的缩写,是视图模型的...
    99+
    2023-06-29
  • Vue计算属性是什么
    这篇文章主要为大家展示了“Vue计算属性是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue计算属性是什么”这篇文章吧。具体内容如下①模板内的表达式实际上...
    99+
    2022-10-19
    vue
  • vue生命周期是什么
    本篇内容介绍了“vue生命周期是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
    vue
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作