快速构建一个简单的单页vue应用

• 技术栈

  • vue-cli
  • webpack
  • vux，vux-loader
  • less,less-loader
  • vue-jsonp
  • vue-scroller
  • ES6

• vue-cli：一个vue脚手架工具，利用vue-cli可以快速构建一个vue项目。

• webpack：一个现代 JavaScript 应用程序的模块打包工具。

• vux： 一个移动端的UI组件库。

• vue-jsonp vue的一个插件，用于送jsonp请求。

• vue-scroller vue的一个插件，用于实现下拉刷新和上拉加载。

构建过程：

1. 通过命令行安装vue-cli，webpack

2. 通过命令行工具初始化一个基于webpack的vue项目，

   • vue init webpack <template-name(构建模板的名称，此处是webpack)>

3. 删除默认组件和样式

4. 安装vux，vux-loader，进行vux配置

   • 配置过程

     1. 在webpack配置文件 => build/webpack.config.js中引入vux-loader
     2. 将原来的导出配置赋值给 变量webpackConfig(可随意取名，建议语义化)
     3. 调用vux-loader中的merge方法

     	const vuxLoader = require('vux-loader')
     	const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
     
     	module.exports = vuxLoader.merge(webpackConfig, {
     	  plugins: ['vux-ui']
     	})
     

5. 因为vux样式中用less，所以还需要安装less和less-loader

6. 安装完成后即可在项目中使vux中提供的插件了。

备注：

• 滚屏效果使用的是 Scroller插件 (可在npm中下载，npm中有使用文档)
• 发送jsonp请求使用的是 vue-jsonp插件 (可在npm中下载，npm中有使用文档)

实现项：

1. 首屏轮播
2. 横向tab
3. 走马灯新闻轮播
4. 新闻列表
5. 下拉刷新页面
6. 上拉加载更多

遇到的小问题:

• 组件配合使用时出现样式冲突
  • 解决 : 手动进行样式调整
• 从接口中获取的数据结构不符合组件数据结构以及数据错误
  • 解决 ：根据页面展示布局和组件默认配置项合理筛选数据
• 页面载入时默认触发上拉加载
  • 解决：定义变量记录首次加载，当首次加载完成后再次触发上拉加载时执行函数中的内容