注意的是下面事项并非表示 VUX 使用繁琐,部分只是出于确保有正确的依赖和配置,而部分是出于优化。
\n请将 babel-loader
的配置写到 .babelrc
里而不是使用 options
,否则可能会出错。
折腾能力强的同学参考一下,下面即airyland/vux2
模板主要处理的事项:
引入 reset.less
,默认样式不包含reset,并且部分用户自己有一套reset样式,因此需要在App.vue
进行手动引入
<style lang=\"less\">\n@import '~vux/src/styles/reset.less';\n</style>\n
\n配置 vue-loader
(通过配置vux-loader实现)
// vux-loader\nplugins: [{\n name: 'vux-ui'\n}]\n
\n配置babel-loader
以正确编译 VUX 的js源码(通过配置vux-loader实现)
plugins: [{\n name: 'vux-ui'\n}]\n
\n安装less-loader
以正确编译less源码
npm install less less-loader --save-dev\n
\n安装 yaml-loader
以正确进行语言文件读取
npm install yaml-loader --save-dev\n
\n添加 viewport
meta
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,user-scalable=0\">\n
\n添加 Fastclick
移除移动端点击延迟
const FastClick = require('fastclick')\nFastClick.attach(document.body)\n
\n添加 vue-router
(如果不需要前端路由,可忽略)
import VueRouter from 'vue-router'\nVue.use(VueRouter)\n
\n添加 webpack plugin, 在构建后去除重复css代码(通过配置vux-loader实现)
\nplugins: [{\n name: 'duplicate-style'\n}]\n
\n如果你使用 webpack-simple
模板或者 webpack 配置里缺少 .vue extension 配置,请记得配置:
resolve: {\n extensions: ['.js', '.vue', '.json']\n
\n