前言 之前一段时间都在使用 vue 开发后台管理系统，在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知，现在记录下来，希望对其他需要开发项目的人有帮助。基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。下面随着小编来一起学习学习吧。 项目配置首先，在确定好使用的框架和组件库后，先要大致了解它们，做到文档基本熟悉。本次开发使用到的有： vue ...
本文主要介绍了webpack编译多页面vue项目的配置问题，分享给大家，具体如下： 一般情况下，构建一个vue项目的步骤为： 1，安装nodejs环境 2，安装vue-cli cnpm install vue-cli -g 3，构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4， 安装项目依赖包 cnpm install 5，在开发环境下运行该项目： npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来，接下来的工作就是填代码了。 最近在做一个前...
简介 Vux（读音 [vju:z]，同views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。 基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。 vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。 vux并不完全依赖于WeUI，但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用，实用，美观的移动端UI组件库，现在离理想状...
本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件1.这个配置文件是命令npm run dev 和 npm run start 的入口配置文件，主要用于开发环境2.由于这是一个系统的配置文件，将涉及很多的模块和插件，所以这部分内容我将分多个文章讲解，请关注我博客的其他文章3.关于注释 ?当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看 4.上代码// 导入check-versions.js文件，并且执行导入的函...
本文主要介绍了Vue官方文档梳理之全局配置，分享给大家，也给自己留个笔记。具体如下： optionMergeStrategies 用于自定义选项的合并策略，Vue已经预定义了一些自己配置项的合并策略，如下图所示。比如props、methods、computed就是同一个策略：子配置项会覆盖父级配置项。源码如下： var strats = config.optionMergeStrategies; strats.props = strats.methods = strats.computed = function (parentVal, childVal) {if (!childV...
前情回顾 在上一篇中，我们通过配置基本的信息，已经让我们的项目能够正常的跑起来了。但是，这里还没有涉及到 AJAX 请求接口的内容。 vue 本身是不支持 ajax 接口请求的，所以我们需要安装一个接口请求的 npm 包，来使我们的项目拥有这个功能。 这其实是一个重要的 unix 思想，就是一个工具只做好一件事情，你需要额外的功能的时候，则需要安装对应的软件来执行。如果你以前是一个 jquery 重度用户，那么可能理解这个思想一定要深...
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF1、背景 在项目开发中ajax请求是必不可缺少一部分ajax请求不需要loading或则请求时间少于多少是不显示loading项目中对请求的同一化处理（错误处理，返回数据格式化处理，...
最近的项目度过了开始忙碌的基建期，也慢慢轻松下来，准备记录一下自己最近webpack优化的措施，希望有温故知新的效果。项目采用的是vue全家桶，构建配置都是基于vue-cli去改进的。关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释，有助于更好的理解webpack。仔细总结了一下，自己的优化基本还是网上流传的那几点 通过 externals 配置来提取常用库，引用cdn合理配置...
目前使用的技术栈是：前端Vue、后端Koa、数据库Mongodb。 然而每当起服务的时候，都要 npm start 、 node ./server/app.js ，还要同时保持这两个窗口一直是开着的，很是麻烦。 而且因为我使用的是koa，也没有使用狼叔写的koa脚手架。是自己基于廖雪峰老师的 Koa框架 改的一个小型mvc。导致没有热更新。 为了简化这种没必要的操作及增加热更新，开始想怎么进行优化。于是选择了 pm2 配置pm2 先安装pm2： npm i pm2 、 npm i pm2 -g ...
前言 Vue的官方文档没有给出与TypeScript集成的具体步骤，网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异，让人无从下手。 下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。 初始化项目 首先用vue-cli建立webpack项目。这里为了演示方便，没有打开router和eslint等，可以根据自身情况打开。 # vue init webpack vue-typescript? Project name vue-typescript ? Project description A Vue.js project ? Au...
在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ，webpack.config中也已经配置了css，还是报这个错误，相反，如果把webpack.config中css的配置注释掉就不会出错，这是为什么呢？ 因为 在webpack.config中没有设置好css引入的目录，因为默认情况下我们只会引入/src/目录下的css， 但是mint-ui是要冲node_modules目录去引入的，所以在webpack.config中css的配置中加入一项 {tes...
版本号 vue-cli 2.8.1 (终端通过vue -V 可查看)vue 2.2.2webpack 2.2.1目录结构├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index...
本文讲解vue-cli脚手架根目录文件.eslintrc.js，分享给大家，具体如下： 1.eslint简介eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件。当有不符合配置文件内容的代码出现就会报错或者警告 2.安装exlintnpm init -y npm install eslint --save-dev node_modules\.bin\eslint --init 初始化配置文件，此配置文件配置好之后，vscode编辑器自动识别3.vue-cli的.eslintrc.js配置文件的解释 // ht...
本文介绍了vue-cli构建项目反向代理配置，分享给大家，具体如下：proxyTable: {//配置请求代理 /dlsys:{ target:http://192.168.16.209:81, changeOrigin:true, pathRewrith:{ ^/dlsys: /dlsys } }, /dlapi:{ target:http://192.168.16.209:81, changeOrigin:true, pathRewrith:{ ^/dlapi: /dlapi } }, /dlbiz:{ target:http://192.168.16.211:80, changeOrigin:true, pathRewrith:{ ^/dlbiz: /dlbiz } } },以上就是本文的全部内容...
本篇博客主要说明：前后端框架（本例中是vue和koa）如何发送请求?获取响应？以及跨域问题如何解决？vue部分： import App from ./App.vue import Axios from axios new Vue({el: #app,render: h => h(App),mounted(){Axios({method: get,url: http://localhost:3000,}).then((response) => {console.log(response);})} })koa部分： const Koa = require(koa); const cors = require(koa-cors); const app = new Koa(); const main ...