移动端前端框架搭建

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 <[email protected]> //请输入作者名，回车默认? 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进行手动引入

 

 

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

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);

参考链接：https://segmentfault.com/a/1190000008922234