移动端项目总结

1.创建项目

vue create projectName

2.清除浏览器默认格式

• 引入normalize.css

@import './normalize.css'

3.配置rem, px自动转换rem

• 1.安装安装 postcss-pxtorem、lib-flexible插件

cnpm i postcss-pxtorem lib-flexible --save-dev

• 2.配置 在项目根目录创建postcss.config.js文件，写入一下内容

postcss.config.js

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

• 3.在main.js导入lib-flexible.js

//移动端适配 px自动转rem
import 'lib-flexible/flexible'

4.使用 vant ui 组件库

vant ui 官网 ： https://vant-contrib.gitee.io/vant/#/zh-CN/home

• 1.安装vant

cnpm i vant -S

• 2.安装按需导入vant组件插件(一般项目用这种方法)

npm babel-plugin-import --save-dev

• 3.在babel.config.js文件添加以下代码

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant'],
  ]
}

• 4.新建plugins文件夹，新建plugins.js 文件

plugins.js (用到哪个组件导入哪个组件)

import Vue from 'vue'

// 按需引入组件
import {  button } from 'vant'

// 挂载组件到vue示例中
Vue.use(button)

• 5.在main.js写入以下代码

//引入vant ui 组件库
import './plugins/plugin'

5.配置别名

• 1.新建vue.config.js 文件

module.exports = {
  //配置别名
  configureWebpack: {
    resolve: {
      alias: {
        "src":"@",
        'views': '@/views',
        'components': '@/components',
        'network': '@/network',
        'common': '@/common',
        'assets': '@/assets',
        'store': '@/store',
      }
    }
  },
}

• 2.使用别名

例如引入assets/images/tabBar/home_act.png

正常写法：../../assets/images/tabBar/home_act.png
别名写法：@/assets/images/tabBar/home_act.png

• 3.注意循环遍历图片的时候，不能直接写别名

需要这样写

data(){
return {
      itemList: [
        {
          path: "/home",
          activeImg: require("@/assets/images/tabBar/home_act.png"),
          img: require("@/assets/images/tabBar/home.png"),
          content: "首页",
        }
       ]
  }
  
  //使用
  <img slot="item-icon" :src="list.img" alt />

6.路由懒加载

用到时才会加载，运行时加载

• 两种写法

1. 第一种写法

const Home = ()=>import('../views/home/Home')
const routes = [
  {
    path: '/',
    component: Home,
    redirect: '/home'
  },
 ]

2. 第二种写法

const routes = [
  {
    path: '/',
      component: ()=>import('../views/home/Home'),
    redirect: '/home'
  },
 ]

3. 第三种写法

const routes = [
  {
    path: '/',
      component: (resolve)=>require(['../views/home/Home'],resolve),
    redirect: '/home'
  },
 ]

7.使用svg方式引入阿里icon图标库

• 1.新建iconfont.js文件，导入symbol下的js文件

iconfont.js

!function(t){var e,n,c,i,o,l='<svg><symbol id="icon-weixin" viewBox="0 0 1024 1024">.....

• 2.在main.js全局导入

/* 引入阿里图标库 */
//import './assets/iconfont/iconfont.css'
import './assets/iconfont/iconfont.js'

• 使用svg

解释：#icon-weixin 对象阿里图标库里面的代码名字

        <div class="icon">
        <svg class="svg-icon" aria-hidden="true">
          <use xlink:href = '#icon-weixin' />
        </svg>
        <svg class="svg-icon" aria-hidden="true">
          <use xlink:href = '#icon-qq' />
        </svg>
     </div>

• 编写统一样式(根据自己风格定义)

.svg-icon {
  width: 36px;
  height: 36px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}