xiaoge_586的博客

在我们的项目实际开发过程中，后端的接口往往是较晚才会提供出来，并且还要写接口文档，如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了，mock.js 的出现使前后端分离并行开发成为可能。使用 mock.js，前端调试可以模拟后台接口调用，返回我们定义的数据，解放了前后端开发的屏障。使用 mock.js 的过程如下：1. 安装 mock.js 到项目。npm intsall mockjs --save-dev2. mock模拟数据的定义在src目录下建立文件夹mock，mock文件

自从Vue2.0推荐大家使用 axios 开始，axios 被越来越多的人所了解。使用axios发起一个请求对大家来说是比较简单的事情，但是axios没有进行封装复用，项目越来越大，引起的代码冗余。就会非常麻烦的一件事。所以本文会详细的跟大家介绍，如何封装请求，并且在项目组件中复用请求。有需要的朋友可以做一下参考。封装的基本要求统一 url 配置统一 api 请求request (请求)拦截器，例如：带上token等，设置请求头response (响应)拦截器，例如：统一错误处理，页面重定向等

在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。关于为什么放弃推荐? -> 尤雨溪解释：最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方

一、vue-html5-editor插件安装执行如下命令来进行插件安装：npm install vue-html5-editor -S 我们还需要安装font-awesome ,因为里面使用到的图标是基于font-awesome的，需要执行如下命令：npm install font-awesome --save二.集成vue-html5-editor富文本编辑器新建工具类initHTMLEditor.js文件，主要用于初始化我们的vue-html5-editor，js代码如下：import

大家都知道饿了么开源了两套Vue的UI组件，Mint UI 移动端的，Element UI PC端的。我使用的是最新的Vue3.0，照着Element的文档引入，结果页面出现白版，F12打开开发者工具一片飘红，一顿操作。原来是从Vue3.0不支持Element UI，而是改成了Element Plus。引入elementUI命令引入参照官方文档：https://element.eleme.cn/#/zh-CN/component/installationnpm i element-ui -Smai

一、Vuex基础Vuex的定义官方介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。定义中提到了“状态管理模式”，那么什么是状态管理模式？举个简单的例子，比如我们一个电商网站，上面有很多

1、路由基本配置a、路由什么是路由呢？那么路由在我们单页面应用中是一个很重要的角色，它就是用来切换组件的。因为我们单页面应用中是没有页面这样一个概念的，它只有一个页面，也就是我们常见的index.html，那么我们是通过组件切换来模拟页面跳转的效果，所以这就是vue-router要实现的作用。b、vue-router使用那么我们怎么使用vue-router？首先我们就要进行一个配置，我们在项目创建时，如果安装了vue-router，那默认就会在我们项目中生成一个router.js，如下图：文件里

1、引入第三方插件–类似于用install安装的一些插件库import echarts from 'echarts'2、引入工具类引入工具类前需要有封装好的工具类，然后export导出相关Js工具类，一般写法如下tool.js类:export function toolFuncA(options) { return ...},export function toolFuncB(options) { return ...}或let toolFuncA = { Afunc:f

node环境安装从node官网下载安装包进行安装。Vue-cli脚手架安装执行命令(如之前装过就不需要再装)：npm install vue-cli –g新建项目在选定目录下执行命令：vue init webpack 项目名称执行完后--进入项目cd 项目名称--运行项目npm run dev```javascript一般情况下，成功后可访问网址：http://localhost:8080项目文件目录　　1、build：构建脚本目录　　　　1）build.

常用插件安装1、echartnpm install echarts --saveimport echarts from 'echarts'2、vue-resource（官方提供的vue 的一个插件）安装 npm install vue-resource --save在main.js中注册该模块 import VueResource from 'vue-resource' Vue.use(VueResource);在组件中直接使用 this.$http.get(地

背景目前 需要维护一个开源组件，想学习一下开源组件和一般项目的package.json的区别。目标• 了解package.json与项目的关系• 了解常见字段• 了解怎样管理package.json文件package.json 是什么我们在项目的根目录下都会看见有package.json，这个文件究竟有什么用呢？它包含关于项目的使用人可读元数据，比如项目名称和说明，以及功能元数据，比如程序包的版本号和程序所需的依赖项列表。有什么用？package.json 是配置和描述如何与程序交互和运行

组件主要分为父子组件和非父子组件两大类，具体传值方式也有不同。一、父子组件传值1、props / $emit 方式⼦组件中通过定义props接收⽗组件中通过v-bind绑定的数据；⽗组件中通过监听⼦组件中$emit的⾃定义事件接收数据；示例 ---- 父组件代码：<!-- 父组件 --><template> <div class=""> <h1> Parent </h1> <m-chi

一、vue-cli3与vue-cli2cli2与cli3的详细对比，参考地址：官方详细描述。二、vue-cli3脚⼿架搭建1、node安装选择对应系统进⾏下载，下载完成后直接安装即可，node官方下载。// 输⼊⼀下命令，成功输出版本即为安装成功node -v2、安装vue-cli3npm install -g @vue/cli// 输出版本号即为安装成功vue -V3、项目创建vue create projectName 或可视化创建vue ui...

vue.confg.js中添加配置找到根目录下vue.confg.js中添加如下配置代码片段，如果没有这个文件，在根目录重新创建一个const path = require("path");function resolve(dir) { return path.join(__dirname, dir);}// vue.config.js 常⽤配置module.exports = { chainWebpack: config => { config.reso