vue3版本手把手教你如何搭建一個移動端項目。按照步驟來。

1、創建vue的項目  vue create project-name

2、安裝vant 組件：庫安裝命令 npm install vant@next --save (因為使用的是vue3.x 所以要安裝vant的針對vue3的版本 vant@next)  

3、vant的進階使用   npm i postcss postcss-pxtorem amfe-flexible --save     (用來將px尺寸轉化為rem尺寸)

4、配置rem的根元素字體大小 安裝lib-flexiable 安裝命令 npm i amfe-flexible --save5、注意

這里會報錯 postCss 需要8的版本
所以這里建議對postcss-pxtorem進行降級

降級命令 npm install postcss-pxtorem@5.1.1 --save

5、使用vant組件庫

 //  1.在main.js中引入vant組件庫   
      import vant from 'vant'
      createApp(App).use(vant).$mount('#app)

//   2.在main.js中導入配置根節點字體大小的方法
      import 'amfe-flexible'

 

6、接下來在項目根目錄中新建一個postcss.config.js 寫入以下代碼

// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) { // 判斷是否是vant的文件 如果是就使用 37.5為根節點字體大小
// 否則使用75 因為vant使用的設計標准為375 但是市場現在的主流設置尺寸是750
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
// 配置哪些文件中的尺寸需要轉化為rem *表示所有的都要轉化
propList: ['*'],
    },
  },
};

搭建ajax避免不好維護

1、在src中創建一個 utils 文件夾 放ajax請求

一、創建：server.js   文件中

 

// 封裝axios請求的模塊
import axios from 'axios'
// 用axios重新生成了請求的實例
const server = axios.create({
    baseURL: 'https://api.it120.cc', // 項目發送axios請求的公共地址
    timeout: 5000 // 請求超時時間 這里是請求超過五秒后還沒有獲得請求結果 提示請求超時
})

// axios請求階段相關配置
// 請求攔截
// interceptors axios的攔截對象 request請求的意思 use使用的意思
// 這里的整體意思就是使用請求攔截
server.interceptors.request.use(config => {
    // config包含了請求相關的所有信息
    // 可以同過config對象給請求配置或者修改信息
    config.headers.token = '11111'
    return config // 將配置完成的token返回 如果不返回 請求不會繼續進行
}, err => {
    // 請求發生錯誤時的回調函數
    // 這里的意思是請求發送錯誤時將錯誤拋出
    // throw new Error(err)
    // console.error(err) //將錯誤信息打印在控制台中
    Promise.reject(err) // 使用promise將錯誤信息返回出去
})

// axios 接受到服務器響應信息后的配置
// response 是響應的意思 這里的意思是使用響應攔截
server.interceptors.response.use(res => {
    // res包含了服務器返回的所有響應信息 其實就是服務器返回給你的東西
    return res.data
}, err => {
    // 當服務器響應產生錯誤時的回調函數
    console.error(err) // 這里將服務器發生錯誤的錯誤信息打印在控制台中
})


export default server

二、request.js  文件

import server from './server'
// 這里的server其實就是aixos 只不過包含了我們配置的相關信息

export default function request({ url = '', method = 'get', data = {}, params = {} }) {
    return server({
        url,
        method,
        data,
        params
    })
}

2、api 文件夾、

三、  index.js 文件

// 這里來封裝api請求模塊
// 因為在正常開發中 需要ajax請求有很多 如果我們講請求都分散在每一個頁面中
// 那么當請求需要維護修改時 我們就需要找到具體的頁面才能進行修改 如果頁面很多
// 就會造成很多大的維護困難 所以我們講所有的api請求放在請求模塊中 
// 如果需要維護我們只需要維護當前模塊就可以了，不需要再去找具體的頁面
import request from '../utils/request'

// 請求首頁banner圖的請求
const getBanners = async() => {
    // request('/small4/banner/list').then(res => {
    //     console.log(res.data);
    // })
    let { data } = await request({ url: '/small4/banner/list' })
        // console.log(data);
    return data
}


export {
    getBanners
}