前言 平常在工作开发中，为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境，确实这种工具是节省了我们不少时间，但是你有没有想过Vue开发环境是如何搭建起来的？还有如果是你自己动手去搭建，能顺利搭建起来吗？ 基于这些想法，我就捣鼓了一下webpack4，并且弄下来了这个小项目，感觉一个小项目下来收货还是挺大的，所以就写一遍文章，分享心得，哈哈！！ 基于个人的时间精力问题，把本项目教程分为两部分： webpack4手...
利用 vue-cli 搭建的项目大都是单页面应用项目，对于简单的项目，单页面就能满足要求。但对于有多个子项目的应用，如果创建多个单页面，显示有点重复，特别是 node_modules 会有多份相同的。如果全部放到单页面项目下，又显得有点乱，这时候通过改造 vue-cli 搭建的项目为多页面，就是一个比较好的解决方法。 如何改造单页面 vue.js 项目为多页面项目？下面是这次改造的具体过程。 一、创建单页面 vue.js 项目 这里直接使用官方提...
本文要实现的是：使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问 production：产品 生产环境 development：开发 开发环境 1.开发环境设置跨域使用工具： vue-cli自带的配置配置目录 /config/index.js//自行复制黏贴 proxyTable: {/apis:{target: http://10.1.63.26:19080/, // 后台apichangeOrigin: true, //是否跨域// secure: true,pathRewrite: {^/apis: //需要rewrite的,}} }注意：以上配置...
Vue.js Vue.js是目前很火的一个前端框架，采用MVVM模式设计，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用，特别适合单页应用的开发。 Vue.js是数据驱动的，它通过一些特殊的语法，将DOM和数据绑定起来，无需手动操作DOM。一旦创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。一、安装NPM 1.1最新稳定版本： npm install v...
搭建vue的开发环境： 1、必须要安装nodejs 2、搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli （ 此命令只需要执行一次 ） 3、创建项目 必须cd到对应的放项目的文件夹里，例如项目放vue文件夹里，则cd vue，然后再进行下面的命令（vue-demo01为项目名） vue init webpack vue-demo01 cd vue-demo01 cnpm install / npm install 如果创建项目的时候没...
前端做多了，自然就会想往后端伸手。更何况现在有了Node和Express，让前端做后端开发的学习降低了不少。 最近正好揽下了一个 Vue + Express + mysql 的小项目。项目开始时是前后端分开开发的，但是当后台做好一部分要进行连接测试时问题就来了。前端部分在每次修改过就需要build一次，而后台也每次需要重启一次服务器才能进行调试。可想而知，这样的开发和调试效率是很低的。在这么煎熬着做了一个功能之后，实在受不了。于是便想有...
准备工作1. 为前端选择合适的预处理工具和资源管理工具预处理工具又分为 js 预处理工具和 css 预处理工具。Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制，所有 js 代码文件在被 html 页面引入后将共用同一个命名空间。所以才出现了各种“标准”尝试解决这个问题，但他们都不是原生的，需要额外的工具对代码进行特殊处理。虽然 ES6 终于引入了模块机制，但以现在的浏览器支持程度，还不足以“毫无顾虑地随拿随用”。...
背景我们都知道浏览器有一个既核心也最基本的安全功能，即同源策略。同源分别是:协议，域名，端口。如果浏览器访问服务器不同源的话，就会访问不到数据。那开发中常常访问的服务器不同源，那么可以借助一个服务器当做中介来访问需要访问的服务器从而获得数据。因为同源策略是浏览器的安全机制，而服务器之间是不受此限制的。之前vue-cli模板build文件夹下有dev-serve.js文件，可以在此文件中配置本地node服务器实现跨域，现在的模板...
思路：将自己的项目启动ip与端口固定，当然端口也可以为默认的8080 步骤： 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录，在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例：comfig/index.js host:http://192.168.2.153,//一定要加上 http port:3000注意：此处ip一旦固定，本机访问的或localhost将不可访问，必须也使用这个ip，局域网也是一样...
写在前面这篇文章的主要目的是学会使用koa框架搭建web服务，从而提供一些后端接口，供前端调用。搭建这个环境的目的是： 前端工程师在跟后台工程师商定了接口但还未联调之前，涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径，而不是直接在前端写几个死数据。即，模拟后端接口。 当然在这整个过程（搭建环境 + 开发示例demo）中，涉及到以下几点知识点。包括： koa2的知识点node的知识点跨域问题fetch的使用axios的...
做为一名学习路上的小白，起初就对 vue.js 有着莫名的好感，知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后，妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档，首先要搭建一个开发环境，因为自己太小白，看了一些搭建开发环境的博客，表示专业术语太多依然还是一脸懵逼。 具体流程大概如下： 很难理解？没关系，我也没理解，跟着操作就行了，我是window系统。 1.安装node.js 起初是很不理解的，我学...
前后端分离开发中必要会遇到的问题—跨域。在使用vue开发的时候，开始为了解决跨域问题。采用的是CORS（Cross-origin resource sharing）。后台在响应头中添加Access-Control-Allow-Origin。这样就可以跨域调后台接口了。 在前几天无意中看到了config的index.js文件中有一个proxyTable属性，通过配置可以解决开发环境的跨域 开发期间的API代理 当将此样板与现有后端集成时，通常需要在使用dev服务器时访问后端API。为了实现这一点，...
edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying 为了解决跨域问题， 通常会使用Jsonp，但是jsonp只能是get请求。或者使用CORS支持，设置Access-Control-Allow-Origin: *0 前置技能 熟悉vue-loader 和 webpack 1 基本配置 编辑confix/index.js文件 dev server使用的是http-proxy-middleware来代理 // config/index.js module.exports = {// ...dev: {proxyTable: {/...
vue.js开发环境搭建教程分享，具体内容如下 1、安装node.js，忽略 2、基于node.js，利用淘宝npm镜像安装相关依赖在cmd里直接输入：npm install -g cnpm –-registry=https://registry.npm.taobao.org，回车，等待安装... 3、安装全局vue，用于帮助搭建所需的模板框架在cmd里， 1).输入：cnpm install -g vue-cli，回车，等待安装... 2).输入：vue -V，回车，若出现vue信息说明表示成功 4、创建vue项目在cmd里输入：vue init webpa...
前言 在对着产品高举中指怒发心中之愤后，真正能够解决问题的是自身上的改变，有句话说的好：你虽然改变不了全世界，但是你有机会改变你自己。秉承着“不听老人言，吃亏在眼前”的优良作风，我还是决定玩火自焚。 问题所在 之前的项目总结为以下内容： 1、AMD模块规范开发，使用requirejs实现，使用rjs打包，最终导致的结果是，输出的项目臃肿，肿的就像一坨狗不理……不忍直视2、使用gulp进行打包，这一点貌似没有可吐槽的地方，毕...