vue2-移动端创建

创建移动端项目

1. 创建项目

# 命令行下
vue create vue_mobile
1
2

2. 安装依赖
   vant 是一个移动端的vue组件，
   vant2 for vue2
   vant3 for vue3
   vant2官网

# vant2 for vue2
npm install -s vant@2
# 也可以如下
yarn add vant

# 安装如下插件，配置按需引入，就不能再一次性导入了
yarn add babel-plugin-import -D
1
2
3
4
5
6
7

配置babel.config.js：
这里是配置按需导入vant，即import {Button} from ‘vant’;
不能直接导入所有组件，import Vant from ‘vant’

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 移动端适配

# 移动端适配
yarn add amfe-flexible

# main.js中导入
import 'amfe-flexible'
1
2
3
4
5

4. 其他：
   yarn add postcss postcss-pxtorem@5.1.1

根目录下创建postcss.config.js文件

module.exports = {
plugins: {
autoprefixer: {
browsers: [‘Android >= 4.0’, ‘iOS >= 8’]
},
‘postcss-pxtorem’: {
rootValue: 37.5,
propList: [‘*’]
}
}

启动即可
npm run serve
yarn serve

错误解决

1. Object is not function ，因为vant版本兼容性问题
2. core-js/modules/es.reflect.to-string-tag.js
   npm install -s core-js
3. Vant is not defined
   在babel.config.js 配置了按需导入组件，就不能在全部导入。

//导入所有组件
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
1
2
3
4

ElementUI 不适合移动端

elementUI 在PC 端效果还不错，但是移动端就不适合，移动端可以使用vant。
当然也可以调整ElementUI组件进行适配移动端

<el-form>
            <el-input type="text" v-model="username">
                <i class="el-icon-user-solid" slot="prepend">i>
            el-input>

            <el-input type="password" v-model="password">
                <i class="el-icon-lock" slot="prepend">i>
            el-input>

el-form>


<style>
/* 移动端的适配 */  
@media screen and (max-width:500px){
        .el-form{
            width: 70% !important; /*让浏览器首先执行这个语句，解决兼容性*/
            margin: 0 auto;
        }
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

vue2中使用vant2

//main.js中
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
1
2
3
4