移动端前端框架搭建

1.  安装Node.js

2.安装Git

使用 vue-cli 脚手架工具快读搭建基础框架；

npm install -g vue-cli

使用webpack模板；

vue init webpack project

命令行提示如下：

? Project name (my-project) //请输入项目名称，回车默认? Project description (A Vue.js project) //请输入项目描述，回车默认? Author xsl < 398818817@qq.com> //请输入作者名，回车默认? Vue build //请选择构建模式，请直接回车选择第一条> Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere? Install vue-router? Yes //是否安装vue-router,回车? Use ESLint to lint your code? n //是否安装ESLint代码检查器，n,回车 //个人比较偏爱airbnb的编码规范，此处选择第二项 Standard (https: //github.com/feross/standard)>AirBNB (https: //github.com/airbnb/javascript) none (configure it yourself)? Setup unit tests with Karma + Mocha? Yes //单元测试，n,回车? Setup e2e tests with Nightwatch? Yes //端到端测试，n,回车

3.安装前端UI框架vux

npm install vux --save

4.安装vux-loader

npm install vux-loader --save-dev

注： vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置：

const webpackConfig = {} // 原来的webpack配置

const vuxLoader = require('vux-loader')

module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [{
    name: 'vux-ui'
  }]
})

5.安装less-loader以正确编译less源码

npm install less less-loader --save-dev

到这里就可以运行起来了！！！！

6.出于确保有正确的依赖和配置或者优化

1.引入  reset.less，默认样式不包含reset，并且部分用户自己有一套reset样式，因此需要在 App.vue进行手动引入

<style lang="less">
@import '~vux/src/styles/reset.less';
</style>

2.添加viewport meta，在App.vue进行手动引入

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

3.添加webpack plugin, 在构建后去除重复css代码（ 通过配置vux-loader实现）

plugins: [{
  name: 'duplicate-style'
}]

4. 添加Fastclick移除移动端点击延迟， 先执行安装fastclick的命令。

npm install fastclick -S

   在main.js中引入，并绑定到body

import FastClick from 'fastclick'

FastClick.attach(document.body);