vue移动端页面demo

最新推荐文章于 2024-05-26 07:15:00 发布

qdcxy0

最新推荐文章于 2024-05-26 07:15:00 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js webpack css3 javascript es6

本文链接：https://blog.csdn.net/xx_ll_/article/details/105226564

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、调查表页面（展示效果）
根据网上许多移动端项目案例，总结其他方法，汇总方法如下。
在这里插入图片描述
二、vue移动端项目搭建
1、在安装了node.js的前提下，使用以下命令

npm install --g vue-cli

2、在将要构建项目的目录下

vue init webpack objName(项目目录名称)

3、项目配置
在这里插入图片描述
4、assets中存放的静态文件是会经过webpack处理的，一般放一些图片之类的静态资源，而static则不会收到webpack的影响，调用的时候也是通过绝对路径调用的，通常用来存放一些第三方的静态资源库。
5、移动端适配
https://www.jianshu.com/p/2a091bd289ba
https://www.jianshu.com/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';


// 引入axios
import axios from 'axios'
import qs from 'qs'
Vue.prototype.$axios = axios  //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs  //把json格式的直接转成data所需的格式 this.qs

Vue.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",
    ["es2015"] 
  ],
  "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 err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    process.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-rate
             v-model="form.attitude"
             show-text>
           </el-rate>
          </div>
         <div class="block">
          <span class="rate-label">服务态度</span>
          <el-rate
            v-model="form.attitude"
            show-text>
          </el-rate>
         </div>
         <div class="block">
          <span class="rate-label">服务态度</span>
          <el-rate
            v-model="form.attitude"
            show-text>
          </el-rate>
         </div>
         <div class="block">
          <span class="rate-label">服务能力</span>
          <el-rate
            v-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 = this
          var 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（根源），这也就不难理解了。