Vue CLI

新建一个项目，使用vue-cli 3.0进行构建，使用了vux和vue-router，本地运行时是没有问题的，但是在打包之后，页面就一片空白，打开控制台会看到是各种资源引用出错。 这是因为webpack的配置不对，只需要将webpack的配置修改一下就好。 vue-cli 3.0 内置了webpack，并且将vue的配置文件作为了一个可选的配置（创建时没有），如果需要修改vue和webpack的配置，则需要自己建一个配置文件 vue.config.js 放在项目的根目录下。 然后设置一个baseUrl： module.exports = { baseUrl: './' } 这样在打包的时候，就能加载到静态资源了。 然后这个时候还没完，修改完之后，页面变成了这个样子： 页面上只剩一个在App.vue里面的两个跳转按钮，并且跳转按钮跳转后也是不对的。 这个是因为在router里面的mode配置，默认设置为 history ，只要将这个mode注释掉再打包，就能正常显示了。 当然也可以使用history模式的路由，只是项目需要在服务器环境下运行。 比如使用node的serve，这个在vue-cli的文档中有说： https://cli.vuejs.org/zh/guide/deployment.html 我是直接使用了phpstudy的环境运行浏览。 来源： oschina 链接：

题图 From 极客时间 From Clm 前端开发者在工作中常常遇到跨域的问题，一般我们遇到跨域问题主要使用以下办法来解决: 1、jsonp 2、cors 3、配置代理服务器。 jsonp不是很灵活，只能发送get请求，不能发送psot请求，而cors虽然可以支持多种请求格式，但是如果请求携带cookie的话，还需要服务端和客户端分别配置一下，个人感觉也很麻烦。 相对于前两种，使用代理服务器解决跨域问题就简单了好多。 浏览器由于同源策略的原因，不同域名之间发送ajax请求，响应的数据不会被浏览器加载。而服务器向服务器发送请求则没有同源策略的限制。 下图便是代理服务器的原理了： 代理服务器只是起一个中转作用，配置代理服务器的方法有很多种，比如利用apache、nginx、tomcat等等，今天给大家介绍的是用nodejs配置代理服务器，用nodejs配置代理服务器，我们需要借助两个npm包，一个是web开发框架 express ，一个是express中间件 http-proxy-middleware 。 首先第一步我们先用express搭建两个服务器，一个静态资源服务器端口号为3000，一个接口服务器端口号为5000，静态资源服务器代码如下： var express = require ( 'express' ); var app = express(); app.use

来源 | http://www.fly63.com/article/detial/8806 一、安装 1、如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择Yes，后面下载依赖会自动下载vue-router。 Install vue-router? Yes 2、npm npm install vue-router 二、将组件 (components) 映射到路由 (routes)并渲染 步骤一 使用vue-cli搭建项目，项目结构中会有一个src文件目录，src文件目录下会有一个router文件夹，此处就是用来编写路由组件的地方。 在src/router/index.js，这个文件就是路由的核心文件。在这个文件里，我们需要做的是，将组件 (components) 映射到路由 (routes)。 // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) import Vue from 'vue' // 导入vue import VueRouter from 'vue-router' // 导入vue-router Vue.use(VueRouter) // 1. 定义（路由）组件 import Home from '@/components/Home' // 2. 创建 router 实例，然后传

vue.js和vue-router和vuex快速上手知识 一直以来，认为vue相比react而言，学习成本会更低，会更简单，但最近真正接触后，发现vue的各方面都有做一些客户化的优化，有一些亮点，但也有一些很不顺手的地方，没有react的灵活度，但却有ng的方便性。要说vue和react哪个更适合做移动端，其实没有绝对的答案，喜欢就好。我希望能通过这篇文章能让大家迅速上手vue的全家桶。 本文的例子源码托管在github上，地址是 https://github.com/tianxiangbing/vue-demo 首先，我们用vue-cli搭一个vue的开发环境，目前vue-cli3.0也出来了，但使用者不多，中文文档也较少，更多配置都是vue.config.js里，这里配置是返回一个module,也是修改webpack的配置项，但其实还是很麻烦，这个不在本文主题内，省过... 1. 服务的搭建 安装vue-cli，建议安装2.x的版本，本文使用的是vue-cli3.0 npm install -g vue-cli 创建一个vue的项目，项目名称叫vue-demo vue create vue-demo 然后进入项目目录下执行安装依赖包 npm i 然后启动服务，执行命令 npm run serve ,你应该可以看到如下的结果： 看到这里，就算成功了，在浏览器中打开 http:/

windows 版安装 下载安装 安装 http://nodejs.cn/ 默认路径C:\Program Files\nodejs\ 验证 配置 命令行配置参数 npm config set prefix " D:\Program Files\nodejs\node_global " npm config set cache " D:\Program Files\nodejs\node_cache " 配置环境变量 NODE_PATH D:\Program Files\nodejs\node_global\node_modules 验证 npm install express -g 安装完成后D:\Program Files\nodejs\node_global\node_modules\express 有express目录 命令验证 查看path ， 确认path已加载 加载成功 安装cnpm 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 环境变量添加 D:\Program Files\nodejs\node_global 测试 cnpm -v linux版环境安装 #todo vue-cli安装 npm install -g vue-cli 安装完测试vue命令正常 安装vue init

一、介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 官网： https://cn.vuejs.org/ 二、准备 Node.js --是一个基于 Chrome V8引擎的 JavaScript运行环境。 npm(cnpm) --是随同NodeJS一起安装的包管理工具，cnpm是淘宝对npm的镜像服务器， vue-cli --是Vue的脚手架工具,主要作用：目录结构、本地调试、代码部署、热加载、单元测试 webpack --是一个模块打包器。它的主要目标是将 JavaScript文件打包在一起,打包后的文件用于在浏览器中使用 三、下载配置 Node.js 直接官网下载： https://nodejs.org/zh-cn/download/ 打开cmd（以 管理员身份 运行）查看Node.js版本确定是否已安装 node -v npm 查看npm版本 npm -v 升级npm cnpm install npm -g cnpm 安装cnpm npm install -g cnpm --registry

vue cli3.0 build 打包 的 js 文件添加时间戳 解决 js 缓存问题 参考文章： （1）vue cli3.0 build 打包 的 js 文件添加时间戳 解决 js 缓存问题 （2）https://www.cnblogs.com/ckmouse/p/11752003.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4428122/blog/4947885

提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题 参考文章： （1）提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题 （2）https://www.cnblogs.com/songbw/p/11807460.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4432649/blog/4945100

公司有个需求，需要做个发送邮件的模版（富文本对于模版的扩展性更好吧） 关于富文本，也找了一些好看且支持vue的，但是功能都没有百度全面 反正这个系统也是自己人用，颜值无所谓了 关于vue2.0+ueditor 有需要的可以看原文： https://juejin.im/post/5c6e78f95188252f30483be3 注：我是参考的这个配的vue3.0+ueditor 第一步： 下载Ueditor 相关静态文件 在下载的同时，不要让小手闲着，安装 vue-ueditor-wrap npm i vue-ueditor-wrap -D 第二步：修改ueditor并引入项目 下载下来的ueditor包，解压之后，名称是带着版本号的，为了看上去简洁一些，可以改成自己看上去顺眼的名字，比如UEditor 将解压完并顺利改完名字的UEditor文件，直接丢到咱们项目的public文件中 注：本项目是针对vue-cli3.0来说的，配置的时候和vue-cli2.0略有不同 vue3.0中，没有static文件，但是存在public，所有咱们将UEditor放到public中 第三步：进入vue项目配置 到了这一步，已经成功了50% 现在高潮来了哦 将vue-ueditor-wrap引入你要使用的组件或页面中 1、import VueUeditorWrap from 'vue

使用vue框架进行前端开发也有一段时间了，遇到的问题可以大致分为2类：开发问题，部署问题。 开发方面的问题是最多的，也是大家经常会遇到的，但是部署的问题也不容小觑，一旦部署出错会造成严重的上线事故。 开发和测试时调用后台接口的地址是和生产环境中不一样的，有些时候需要跳转到其他网页，也需要测试和生产环境跳转不同的页面。 这些配置如果都用人工来维护，上测试环境注释掉生产的代码，上生产环境注释掉测试的代码，会很麻烦也很容易出错。 所以有必要在一个入口进行控制，这就要用到vue框架中的环境变量和模式。 在vue-cli3构建的项目中，项目根目录下创建.env.[模式]文件可以定义一种模式，在这个文件中定义的变量就是对应模式的环境变量。 在本地启动项目默认是使用的development模式，使用build命令打包默认是使用的production模式。但是我们一般都会有一个测试环境，在我们打测试包和生产包的时候都是用的是production模式，所以需要定义一个环境变量来进行区分。 我目前的做法是创建.env.development，.env.test，.env.production三个模式文件。 每个模式文件中有3个环境变量：NODE_ENV（对应当前模式的名称），VUE_APP_RUNTIME_ENV（对应当前环境的名称），VUE_APP_BASE_URL