跟我老大学到了一招使用vue-cli3快速适配H5项目的方法. 我之前也有进行一个版本的适配,直接使用cnpm install -g vue-cli,然后安装各种插件进行适配,见我之前的博客. 后来老大指出我的版本的缺点为,H5项目,要是直接在浏览器中打开,我的项目就会乱样式. 我当然要狡辩啊,H5项目当然是在手机中打开的啊~~~ 好吧,屁颠屁颠的重新研究适配 我发现,我跟老大使用的vue版本不同,导致我们安装normalize.css的时候,引用出现差别,以及解析toPx这个自定义函数的时候…

技术选型 • 框架 - Vue+VueRouter • 相比较于react/angular/avalon ? • 简单轻量,社区配套完整• 模块化 - ModJS • 相比较于require/seajs/browserify/webpack ? • commonjs规范• 构建工具 - Fis3 • 相比较于grunt/glup/webpack ? • 插件完善,配置简单清晰 目录结构规范 MVVM开发模式 • 数据驱动• 双向绑定• 组件化开发 构建处理任务 • less编译• 资源内嵌• 模…

一些比较小的H5页面,我觉得全没有必要一定要使用框架的,比如vue和react之类的,我觉得原生的js,html5也可以写好移动端. 最近刚好要赶10多个h5页面,适配移动端的,各种手机型号都要适配,笔者想起了自己的以前写过的一个转换小工具, 大家可以看之前我的文章和我一起使用postcss+gulp进行vw单位的移动端的适配 老实说,笔者根据之前的记录,根本就没有还原出小工具,实在是汗颜.不过,在笔者实在无法精确还原工具之后,笔者找到了之前练习的demo. 笔者一下子就搞定了. 先给大家看下项…

安装node.js 官网:https://nodejs.org/en/ 淘宝NPM镜像(npm是外网,用国内代理下载安装贼快) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装 vue-cli $ cnpm install --global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 在命令行输出以上的命令后,出现一些项目的初始选项…

.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. Manually select features自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 TypeScript ,就应该选择这一项. 可以使用上下方向键来切换选项.如果只需要 babel 和 eslint 支持,那么选择第一项,就完事了,静静等待 vue 初始化项目. vue-c…

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置:  压缩前后大小大致如下: 生成的压缩文件以.g…

1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module.exports = { //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方,你在这里设置,会新建或者覆盖 webpack 默认配置. //webpack ProvidePlugin 的含义是创建一个全局的变量,使这个变量在 webpack 各个模块内都可以…

[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章使用vue-cli3.0构建的项目是基于webpack的模板文件,构建后的项目属于单页面(SPA)应用.因此,该文档后续操作与说明不适用于构建一个多页面应用. 相比于之前有如下优点: 功能丰富:对babel.Typescript.ESLint...提供开箱即用的支持 易于扩展:它的插件系统可以让社区…

Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在main.js引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.confi…

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也不便于管理. 其次,定义在HTML页面中的组件,无法被其他页面重用,我们只能通过复制粘贴的方式将组件代码拷贝到其他页面,这也违反了DRY原则.既然组件是Vue.js的重要概念,我们就应该利用好它. 为了解决这些问题,Vue.j…