移动端项目总结

移动端项目总结

• 1.配置项
• 2.项目心得

vue初始的配置项

1. 首先应该安装vant组件库 npm i vant@latest-v2 -S
2. 然后进行脚手架的配置

// babel.config.js内部里写这里的内容
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};

3. 全局进行修改vant样式

// vue.config.js里面配置这些内容
module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        // ...其他 loader 配置
        {
          loader: 'less-loader',
          options: {
            // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
            lessOptions: {
              modifyVars: {
                // 直接覆盖变量
                'text-color': '#111',
                'border-color': '#eee',
                // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
                hack: `true; @import "your-less-file-path.less";`,
              },
            },
          },
        },
      ],
    },
  ],
};

4. 为解决移动端适配性所提出的方法
   通过安装npm包来进行移动端适配性的问题
   amfe-flexible和postcss-pxtorem

此处的37.5是根据设计稿除以10得到的，也就是说设计稿是375的，如果设计稿是750的话，那么基准值就是75

//首先在自己的项目里添加postcss.config.js文件
// postcss.config.js
module.exports = {
  plugins: {
    // 能够把所有px转化为rem
    // rootValue:转换px的基准值
    // 编码时，一个宽是75px，转换为rem则是2rem
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

项目的心得

1. 在这个项目里运用到了axios请求方法，首先把axios进行封装成一个单独的文件。

//request.js
 import theaxios from 'axios'
 const axios = theaxios.create({
 //options配置项
 })
 //请求拦截器
 axios.interceptors.request.use(
 	function(config){
 	//配置内容
 	return config
 	},
 	function(error){
 	return Promise.reject(error)
 	}
)
//响应拦截器
axios.interceptors.response.use(
	function(res){
	return res
	},
	function(error){
	return Promise.reject(error)
	}
)
//es6
//输出一个函数 通过解构赋值来进行自定义值的输入
export default ({
	url,
  	method = 'GET',
  	params = {},
  	data = {},
  	headers = {}
  	})=>(
    return axios({
    url,
    method,
    params,
    data,
    headers
    }))

2. axios封装完成之后，在封装一个请求接口的文件

//我们可以将不同页面需要不同的接口封装到不同的文件有利于查看，与此同时可以通过
export * from 接口文件 //将不同的文件的内容汇总到同一个文件中，有利于引用
//index.js
import axios from request.js
export const loginAPI = ({ mobile, code }) =>
  axios({
    url: '',
    method: '',
    data: {
    }
  })

3. 相较于之前写的一点东西，现在感觉自定义指令真的好用，可以直接拿到所需要的东西

// 自定义指令
Vue.directive('fofo', {
	//刚插入dom
  inserted (el) {
    el.focus()
  },
  //页面更新的时候
  update (el) {
    el.focus()
  }
})

4. 可以通过export一些dayjs所封装的小函数来进行操作

export const newDay = (value) => {
  dayjs.extend(relative)
  const nowTime = dayjs()
  const beforeTime = dayjs(value)
  return nowTime.to(beforeTime)
}