如何使用vue 及相关技术栈快速构建前端
在本文中,我将给大家介绍一些 vue 的基础知识、相关工具、生态等内容。相信通过该文章你会对 vue 有大概的认识,并且可以快速地找到入门的方向。 一起来学习吧! 首先介绍一下本次系分项目前端使用的技术栈: vue-cli vuex element-ui vue-router axios webpack yarn 我将一一简单介绍: vue 一开始学 vue, 主要熟悉一些组件的概念,数据,生命周期。 写的时候主要也就是 data, mounted, methods 这几项。 布局方面使用 v-for/v-if/v-show 。 还有学一些路由之间的跳转,传递参数这些内容。 基本够用了… 还有可以学一下怎么父子组件的相关概念。 其他的还有computed/watch 等,但是简单的项目也可以不用。 vuex 用来做状态管理,简单来说,可以维护一些全局变量。 vue-cli 使用 vue-cli 你可以快速构建一个 vue 项目。目前的版本是 3.0。不同先前版本,构建完项目后需要自己创建配置文件,文件名为 vue.config.js 创建: vue create project-name element-ui UI 框架。算是 vue 生态中最常用的UI框架了。其他还有Muse-UI 等等。 我用 element-ui 比较多,就介绍一下我常用的组件: 布局方面,使用 <el-container> <el-header> <el-main> 将页面分成几大部分。然后使用 el-row el-col 进行布局,设置好 offset 和 span 属性就行 使用 message 来弹出消息,主要有 success/error/warning 几类。 使用 el-menu 设置导航 此外,我喜欢用 el-card 将页面卡片化,布局也很方便。 我常用的还有 form/button/icon/divider 在系分项目中我使用 Upload 来实现头像上传。 新版的 element-ui 也引入了一些非常方便的组件,包括: avatar,loading。我在系分项目中也用到了。...