vue+vux+es6+webpack移动端常用配置步骤

1.创建项目(vue项目的流程就不多讲了)
2.cnpm install vux --save
3.在build/webpack.base.conf.js配置:
const vuxLoader = require(‘vux-loader‘)
把第一个module.exports赋值变量let webpackConfig ={里面代码不动}
然后这个放在最底部去

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [‘vux-ui‘, ‘progress-bar‘, ‘duplicate-style‘]
})

4.安装vux-loader使用命令cnpm install vux-loader -D
5.cnpm install less less-loader --save-dev 以正确编译less源码
6.cnpm install yaml-loader --save-dev 以正确进行语言文件读取
7.index.html入口页面<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
8.main.js里面配置:
(需要安装依赖cnpm install fastclick --save
const FastClick = require(‘fastclick‘)
FastClick.attach(document.body) //去掉点击延迟300秒
(需要安装依赖cnpm install axios --save
const axios = require(‘axios‘)
Vue.prototype.$ajax = axios;
9.index.html里面引入rem自适应布局的js,有需要用jq的也在这里引入以保证性能。

时间: 2024-10-18 05:16:23

vue+vux+es6+webpack移动端常用配置步骤的相关文章

vue+node+es6+webpack创建简单vue的demo

闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助. 前期准备: 1.安装node 安装包地址这个里面有两个安装包大家可以根据自己的需求选择安装4.4.4版本或者6.2.0版本,小颖选择的是6.2.0. 2.Atom编辑器,这个大家可以根据自己的喜好选择自己喜欢的编辑器,所以小颖就不发下载链接了,大家有需求的话可以百度下嘻嘻. 目录: 创建项目:

14.1 NFS介绍 14.2 NFS服务端安装配置 14.3 NFS配置选项

14.1 NFS介绍 NFS是Network File System的缩写 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本 NFS数据传输基于RPC协议,RPC为Remote Procedure Call的简写. NFS应用场景是:A,B,C三台机器上需要保证被访问到的文件是一样的,A共享数据出来,B和C分别去挂载A共享的数据目录,从而B和C访问到的数据和A上的一致 例如: 一个站点,上面传输了很多图片,用户访

vue UI 告别webpack配置

目录 vue UI 告别webpack配置 开始体验 创建项目 项目细节 1. 插件 2. 依赖 3. 配置 4. 任务 总结 vue UI 告别webpack配置 vue-cli 3.0 的候选版本也已经发布多时了.vue-cli 3.0 版本为我们提供了集 创建.管理.分析 为一体的可视化界面vue ui,妈妈再也不用担心我不懂配置啦~让我们来一起尝尝鲜吧~ #安装最新版的vue-cli npm install -g @vue/cli #yarn/npm 安装(二选一) yarn globa

一个基于ES6+webpack的vue小demo

上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 我们先搭建一下vue 的开发环境,根据我的一篇随笔<Vue开发环境搭建及热更新>,我们一步步搭建开发环境,project名为ES6-demo. 在之前我发表的一篇随笔< 理解最基本的Vue项目>中,说到了在放置组件和入口文件的src文件夹中,main.js文件就是入口文件,App.v

vue.config.js常用配置

/ vue.config.js 常用配置 module.exports = { // 基本路路径, vue.cli 3.3以前请使用baseUrl publicPath: '/', // 输出文件目录 outputDir: 'dist', // ?用于嵌套生成的静态资产(js,css,img,fonts)的目录. assetsDir: '', // ?生产环境sourceMap productionSourceMap: true, // webpack配置 configureWebpack: (

vue 移动端环境配置

1,进入项目src 2.,App.vue取出template中<img src="./assets/logo.png"> 3,进入 App.vue 删除默认图片: <div id="app"> <!-- <img src="./assets/logo.png"> --> <router-view/> </div> 删除默认样式,修改通用样式: <style> /*

React +ES6 +Webpack入门

React +ES6 +Webpack入门 React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再赘述.本文将详细的记录react babel webpack的环境搭建,以及搭建的过程中遇到的一些坑. 一.新建React项目 1.如图为新建react项目结构,其中 entry.js放置react入口代码,index.js放置react组件代码,asse

reactjs学习一(环境搭配react+es6+webpack热部署)

reactjs学习一(环境搭配react+es6+webpack热部署) reactjs今年在前端圈里很火,用了三四个月,感觉确实很适合前端开发人员使用,值得深入一下,所以这里记录一下我简单的学习过程,首先是react的环境,由于现在react的新版本已经很稳定了,所以推荐使用es6+webpack来搭建开发环境. 首先,安装nodejs,略过,安装gitbrach,略过,直接搜索到相对应软件的官网,下载最新正式版本的软件,然后就下一步下一步完成安装就可以了,很简单的过程,但是不容忽略,如有问题

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前端Vue多页面)中,我们尝试从webpack-simple原型项目改造为一个多页面的Vue项目.而这里,我们继续往前,尝试把Vue多页面改造为Nodejs直出.由于步骤较多,所以本文片幅较长. 本文源代码:https://github.com/kenkozheng/HTML5_research/tr