一、调查表页面（展示效果）
根据网上许多移动端项目案例，总结其他方法，汇总方法如下。
二、vue移动端项目搭建
1、在安装了node.js的前提下，使用以下命令
npm install --g vue-cli
2、在将要构建项目的目录下
vue init webpack objName(项目目录名称)
3、项目配置
4、assets中存放的静态文件是会经过webpack处理的，一般放一些图片之类的静态资源，而static则不会收到webpack的影响，调用的时候也是通过绝对路径调用的，通常用来存放一些第三方的静态资源库。
5、移动端适配
/p/2a091bd289ba
/p/c7d4b1835eaf（我采用的方法）
index.html中配置代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8">/* <meta name="viewport" content="width=device-width,initial-scale=1.0"> */<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title></title>/* <script>(function () {// 在标准 375px 适配下，100px = 1rem;var baseFontSize = 100;var baseWidth = 375;var set = function () {var clientWidth = document.documentElement.clientWidth || window.innerWidth;var rem = 100;if (clientWidth != baseWidth) {rem = Math.floor(clientWidth / baseWidth * baseFontSize);}document.querySelector('html').style.fontSize = rem + 'px';}set();window.addEventListener('resize', set);}());</script> */</head><body><div id="app"></div></body></html>
6、安装移动端ui（可以同时在一个项目中安装多个ui框架）
mint ui（组件较少） vant ui (组件较多) element-ui（主要用于PC端）
main.js中引入：
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'//安装label（将es6语法转成es5语法）兼容多种浏览器import 'babel-polyfill'// 移动端适配import 'lib-flexible/flexible'// mint-ui组件import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'// element-ui组件import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';// vant-ui组件import {Checkbox, CheckboxGroup } from 'vant';import 'vant/lib/index.css';// 引入axiosimport axios from 'axios'import qs from 'qs'Vue.prototype.$axios = axios //全局注册，使用方法为:this.$axiosVue.prototype.qs = qs //把json格式的直接转成data所需的格式 this.qsVue.use(Checkbox);Vue.use(CheckboxGroup);Vue.use(MintUI);Vue.use(ElementUI);Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#app',router,components: {App },template: '<App/>'})
7、安装babel-cli将es6转es5 (可以解决有些兼容问题)
npm install --global babel-cli
在vue2.0中.babelrc文件中配置如下：
{"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2",["es"] ],"plugins": ["transform-vue-jsx", "transform-runtime"]}
8、build.js文件中如下：
'use strict'require('./check-versions')()process.env.NODE_ENV = 'production'const ora = require('ora')const rm = require('rimraf')const path = require('path')const chalk = require('chalk')const webpack = require('webpack')const config = require('../config')const webpackConfig = require('./webpack.prod.conf')const spinner = ora('building for production...')spinner.start()rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {if (err) throw errwebpack(webpackConfig, (err, stats) => {spinner.stop()if (err) throw errprocess.stdout.write(stats.toString({colors: true,modules: false,children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.chunks: false,chunkModules: false}) + '\n\n')if (stats.hasErrors()) {console.log(chalk.red(' Build failed with errors.\n'))process.exit(1)}console.log(chalk.cyan(' Build complete.\n'))console.log(chalk.yellow(' Tip: built files are meant to be served over an HTTP server.\n' +' Opening index.html over file:// won\'t work.\n'))})})
三、项目目录
9、组件Questionnaire.vue文件中代码如下：（即展示页面效果）
<template><div class="form-box"><h2>name</h2><h3>调查表</h3><mt-field label="联系电话" placeholder="请输入联系电话" type="tel" v-model="form.phone"/><mt-field label="邮 箱" placeholder="请输入邮箱" type="email" v-model="form.email"/><template><el-divider>名称</el-divider><van-checkbox-group v-model="form.productList" direction="horizontal" @change="handleProduct"><van-checkbox v-for="(item,index) in products" :key="index" shape="square" :name="index" checked-color="#07c160" icon-size="18px">{{item}}</van-checkbox></van-checkbox-group></template><h4 style="font-size: 0.42rem;margin-top: 0.36rem;">满 意 度 评 价</h4><el-divider >服务类</el-divider><div class="block"><span class="rate-label">服务态度</span><el-ratev-model="form.attitude"show-text></el-rate></div><div class="block"><span class="rate-label">服务态度</span><el-ratev-model="form.attitude"show-text></el-rate></div><div class="block"><span class="rate-label">服务态度</span><el-ratev-model="form.attitude"show-text></el-rate></div><div class="block"><span class="rate-label">服务能力</span><el-ratev-model="form.capability"show-text></el-rate></div></div></template><script>import {Indicator } from 'mint-ui';import Button from 'vant/lib/button';import 'vant/lib/button/style'; export default {data() {return {isClick:false,loading:false,form:{phone:'',email:'',//服务类attitude:0,capability:0,expect:'',productList:[],},texts:['极差', '失望', '一般', '满意', '非常满意'],},// created() {// this.$nextTick(() => {//this.getDatas()// })// },methods: {showDropList() {var _this = thisvar selectDiv = document.getElementById("select-input")this.isClick=true},handleProduct(){console.log(arguments,'选择值')console.log(this.form.productList,'12123')},// 提交数据doSubmit(){console.log(this.form,'保存数据')// 调用后台接口// this.$axios({//method:'post',//url:'api',//data:this.qs.stringify({ //这里是发送给后台的数据// userId:this.userId,// token:this.token,//})// }).then((response) =>{//这里使用了ES6的语法//console.log(response) //请求成功返回的数据// }).catch((error) =>//console.log(error) //请求失败返回的数据// })var _this = this;Indicator.open({text: '提交调查表...',spinnerType: 'fading-circle'});this.timer = setTimeout(function(){console.log(this); // 这里的this指向window对象// _this.$router.push('/home');Indicator.close();}, 2000)},}}</script><style >* {padding: 0;margin: 0 ;}.form-box{width: 100%;}.mint-indicator.mint-indicator-wrapper{/* 点击提交时显示状态*/z-index: 2}.block{display: flex;flex-direction: row;justify-items: flex-end;align-items: center;}/*多选框对齐*/.van-checkbox--horizontal {margin-right: 0.342857rem;width: 28.3%;}</style>
10、em和rem的区别：
在css中单位长度用的最多的是px、em、rem，这三个的区别是：px是固定的像素，一旦设置了就无法因为适应页面大小而改变。em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。rem中的r意思是root（根源），这也就不难理解了。
如果觉得《vue移动端页面demo》对你有帮助，请点赞、收藏，并留下你的观点哦！
