vue+webpack+axios 入门教程
文章平均质量分 60
vue 的入门教程很多,但是质量参差不齐。我2016年写的教程点击量平均每篇已经超过2万。可见大家求知若渴。因此,本人决定,重写这个系列的博文,力求以简明、清晰、准确的图文以及代码描述,配合 github 的项目开源代码,给各位 VUE 新手提供一个高质量的入门文案。
FungLeo
键鼠轻游戏人间 风流谈笑傲江湖
展开
-
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述前言2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。本来写这一系列的博文只是为了给自己看的,但没想到的是,这系列博文的点击量超过了2万以上,搜索引擎的排名也是非常理想,这让我诚惶诚恐,生怕我写的博文有所纰漏,原创 2017-08-25 15:45:04 · 55523 阅读 · 36 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述》中,我简要的说明了我为什么要写这个系列的博文,以及我们需要了解的一些基础知识。希望你已经认真阅读,并查阅了一定量的相关资料。对我们要做的原创 2017-08-25 17:49:49 · 47476 阅读 · 32 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件在《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目》中,我们通过安装 nodejs 系统环境,以及 vue-cli 脚手架工具,在执行完命令后,我们就已经将一个初始项目跑起来了。但是,我们的原创 2017-08-25 18:58:45 · 49280 阅读 · 32 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由前情回顾在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件》,我们已经重新整理了我们的目录结构,如果你已经忘记了,可以先去看一下。如果你按照我的结构框架去调整了之后,那么,现在你的项目应该是出错,并原创 2017-08-26 13:34:21 · 46837 阅读 · 114 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件前情回顾在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由》,我们通过配置基本的信息,已经让我们的项目能够正常的跑起来了。但是,这里还没有涉及到 AJAX 请求接口的内容。vu原创 2017-08-26 14:42:06 · 42703 阅读 · 38 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地前情回顾在上一篇博文《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件》中,我们已经非常顺利的调用到了 cnodejs.org 的接口了。但是,我们可以注意到我们的 src/api/index原创 2017-08-26 15:27:41 · 30564 阅读 · 84 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件前情回顾在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地》中,我们顺利的将接口代理到了本地。需要说明的是, cnodejs.org 的这套接口是没有跨域问题的,也就是说,本来我们是不需要代理到本原创 2017-08-26 16:14:00 · 23364 阅读 · 18 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先前情回顾在上一篇博文《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件》中,我们队 vue 组件应该有了一个简单的认识。如果你去看了官方文档的话,再看这篇博文会比较简单。如果你没去看,呵呵,恭喜你,我喜欢你这样的人。好,这章开原创 2017-08-26 17:08:53 · 23206 阅读 · 62 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来前情回顾在上一篇博文《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先》中,我们已经成功的把一个列表给渲染出来了。我们从文章中留下的引子 <router-link :to="'/content/' + i.id"> 应该知道,我原创 2017-08-26 18:02:44 · 19624 阅读 · 66 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录前情回顾通过上一章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来》的学习,我们其实已经完成了我们设想的项目的开发。但是,我们做好的这套东西,是基于 nodejs 开发的。而我们最终希望,我们开发的项目,生成好一堆文件,然原创 2017-08-26 19:11:54 · 20698 阅读 · 53 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结前情回顾去年写的那一套东西,虽然我也写得非常的认真,但是其中还是有点绕了。当时水平不行。现在我重新整理出来的博文如下,希望对各位有所帮助。Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述Vue2+VueRouter2+Webpack+Ax原创 2017-08-26 19:30:48 · 17456 阅读 · 53 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理前情回顾在《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录》章节中,我们讲解了项目打包,默认,是打包在根目录下面的。当然,我们可以通过设置,打包到任意子目录中去。但是,我们之前的项目是没有引入资源的。比如,引入图片资原创 2017-09-02 10:03:57 · 11639 阅读 · 17 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器前情回顾通过前面系统的学习,我相信大家都能够对 vue 项目有了一个基本的认知。现在是不是已经开始上手做自己的项目了呢?呵呵,当然这是极好的。但是我们一般用 vue 来制作管理后台,在制作管理后台的时候,不可避免的,我们需要用到富文本编辑器。我尝试过 github 上的原创 2017-09-06 15:57:21 · 12265 阅读 · 27 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery前情回顾在上一篇博文中,我们讲到了,如何在 vue 项目中 使用百度的 UEditor 富文本编辑器,详情点击《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器》。相信大家对引用这种非 npm 的包原创 2017-09-07 11:32:37 · 9809 阅读 · 35 评论 -
JavaScript Standard Style(JS Standard 代码风格规则详解)
JavaScript Standard Style翻译: Português, Spanish, 繁體中文, 简体中文standard 规则列表,太多不必阅读。了解 standard 的最好方式是安装它,然后写代码尝试。规则缩进使用两个空格。eslint: indentfunction hello (name) { console.log('hi', name)}字符串使用单引号,除非是为转载 2017-09-11 16:17:01 · 4576 阅读 · 8 评论 -
动态生成 uniapp 配置文件 pages.json 的解决方案
动态生成 uniapp 配置文件 pages.json 的解决方案最近接手了一个基于 uniapp 的开发项目,我个人对于它能够使用同一套代码就能够开发 h5\app\小程序 的强大功能表示非常钦佩。但是其配置文件 pages.json 也让我十分郁闷,原因无他,只因其是写死 JSON 文件,在管理的时候是十分不便的。在搜索了一些资料,期望可以用 pages.js 文件来替代 pages.js...原创 2020-03-28 18:16:49 · 10388 阅读 · 12 评论 -
DeepinLinux 运行 React 项目出现 Error: watch ENOSPC 的解决方案
DeepinLinux 运行 React 项目出现 Error: watch ENOSPC 的解决方案今天给新来的前端同事安装了 DeepinLinux,然后在运行 React 项目的时候出现了 Error: watch ENOSPC 的报错。我很奇怪为什么会出现这个错误,随后找到了这篇文章,原文如下:Error: watch ENOSPC 的解决方案在 Fedora 和 Ubun...转载 2018-09-10 17:52:40 · 1468 阅读 · 1 评论 -
Vue + Webpack 将路由文件分拆为多个文件分别管理简明教程
Vue + Webpack 将路由文件分拆为多个文件分别管理简明教程近日,有网友留言,询问,如何将 vue 的路由分拆为多个文件进行管理。这当然是可以的。今天我就来写一个简单的教程,希望对大家有所帮助。事实是,如果你的项目不是特别大,一般是用不着分拆的。如果项目大了,那就需要考虑分拆路由了。其实,这个操作并不复杂。当我们用 vue-cli 工具,创建一个新的 vue 项目时,就已经...原创 2018-07-12 13:29:28 · 8960 阅读 · 2 评论 -
Vue 项目打包时部分 MINT-UI 的 ES6 代码未转换成 ES5 的 BUG 的解决
Vue 项目打包时部分 MINT-UI 的 ES6 代码未转换成 ES5 的 BUG 的解决最近在合作开发一个项目的时候遇到一个让人奔溃的问题。在开发阶段没有任何问题,测试都已经通过了。但是在打包的时候发现安卓低版本以及 IOS9 以及以下的版本无法正常访问我们开发的项目。经过排查发现,在打包的 vendor.js 文件中,包含一部分 es6 的代码。正是由于这些 es6 的代码在低版本的浏览器上不原创 2018-02-26 18:00:38 · 4780 阅读 · 3 评论 -
vue-cli + webpack 新建项目出错的解决方法
vue-cli + webpack 新建项目出错的解决方法今日使用 npm init webpack love 创建一个新项目,然后执行 npm run dev 之后项目报错,提示错误如下:没有给这些选项指定值:config-name, context, entry, module-bind, module-bind-post, module-bind-pre, output-path原创 2018-01-09 20:06:06 · 12065 阅读 · 14 评论 -
nodejs 升级后, vue+webpack 项目 node-sass 报错的解决方法
关于 node 环境升级到 v8^ 以上,node-sass 报错的解决方法今天给同事电脑升级了一下系统,顺便升级了所有的软件,发现原来好好的项目报错了。报错大致信息如下: ERROR Failed to compile with 1 errors 下午1:56原创 2017-11-13 14:06:57 · 61475 阅读 · 17 评论 -
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
前言 发现群里有些问题的提问重复率太高了,每次都去回答,回答的贼烦. 这里做一个大体的汇总,废话不多说,直接开始 给出方案,不是手把手..若是连问题和解决都看不懂的..应该去补充下基础知识问题汇总Q:安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/n转载 2017-11-08 17:55:58 · 2543 阅读 · 9 评论 -
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理在公司项目中,我们使用了 element-ui 组件库,非常的好用。近日我们的项目升级,而 element-ui 组件库也升级了。而升级的内容中有我们希望使用的新特性,于是我们愉快的升级了。但是在升级之后,我们发现在某一块功能中使用的 Select 组件出现了问题。具体表现为选不上值,随便原创 2017-09-21 16:25:48 · 8873 阅读 · 8 评论