测试文章

木槿 2022年06月25日 16:26 202 0

从零开始搭建Vite+Vue3 移动端项目

使用Vite创建Vue3项目

Vite文档地址：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

需要注意的是，使用Vite时，Node版本必须大于12才可以

快速创建项目：

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

创建完成后，可以直接安装依赖并运行项目

npm install
npm run dev

配置ESLint校验

熟悉开发的肯定知道，ESLint必不可少。

安装ESLint

# npm
npm install eslint eslint-plugin-vue --save-dev

# yarn
yarn add eslint eslint-plugin-vue --dev

初始化ESLint

npx eslint --init

初始化时会进行一系列的配置，大概如下：

# 我们将如何使用，选择第三个 检查语法、发现问题并强制执行代码风格
? How would you like to use ESLint? ... 
  To check syntax only                  
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

# 使用什么类型的导入模块，直接选择默认ES6的模块 import/export
? What type of modules does your project use? ... 
> JavaScript modules (import/export)              
  CommonJS (require/exports)                      
  None of these

# 项目用的框架，选择Vue
? Which framework does your project use? ... 
  React                                      
> Vue.js                                     
  None of these 
  
# 是否在项目中使用了TypeScript，这里没有用，就选择No
? Does your project use TypeScript? » No / Yes

# 代码运行环境，因为我是运行在浏览器，选择Browser
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser        
√ Node

# 想如何制定我们的代码规范，选择流行的规范就好，
? How would you like to define a style for your project? ... 
> Use a popular style guide                                  
  Answer questions about your style     

# 选择一个代码规范格式 这里选择Standard 可以选择自己喜欢的
? Which style guide do you want to follow? ...                  
  Airbnb: https://github.com/airbnb/javascript                  
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

# 选择配置文件的格式：JavaScript
? What format do you want your config file to be in? ... 
> JavaScript                                             
  YAML                                                   
  JSON

到这里基本上就配置完成了，会下载几个依赖

更改配置

更改.eslintrc.js文件中的部分配置：

<span style="color:#ff0000">ceshi</span>

module.exports = {
	env: {
		browser: true,
		es2021: true
	},
	extends: [
		'plugin:vue/vue3-essential',
		'standard'
	],
	parserOptions: {
		ecmaVersion: 2020,
		sourceType: 'module'
	},
	plugins: [
		'vue'
	],
	rules: {
	},
	globals: {
		defineProps: 'readonly',
		defineEmits: 'readonly',
		defineExpose: 'readonly',
		withDefaults: 'readonly'
	}
}

运行或者打包时验证

光是在编辑器中审核是不够的，运行或者打包时如果发现有代码不规范的，将会直接报错。

安装：

# npm
npm install vite-plugin-eslint --save-dev

# yarn
yarn add vite-plugin-eslint--dev

编辑vite.config.js 文件：

...
import eslintPlugin from 'vite-plugin-eslint'
plugins:[
    ...
    eslintPlugin({
        cache:false //禁用eslint缓存
    })
]

配置别名‘@’

在vite中同样可以通过配置别名@来代替src路径

// vite.config.js
...
import { resolve } from 'path'
export default defineConfig({
  ...
  resolve: {
    
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

安装Vant

Vant3.0

# Vue 3 项目，安装最新版 Vant
npm i vant

# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant

vite版本不需要配置组件的按需加载，因为Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力，但是样式必须全部引入

// main.js
import vant from 'vant'
import 'vant/lib/index.css'; // 全局引入样式
app.use(vant)

配置完就可以直接使用了

安装Scss

vite 直接安装Scss就好，没有复杂的配置，开箱即用

npm install sass -D

配置全局变量

// vite.config.js
export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      scss: { // 注意：键名是scss不是sass！
        // 这里写你想导入全局scss变量的路径，注意只能写相对路径，alias貌似在css中不会生效
        additionalData: "@import './src/styles/variable.scss';"
      }
    }
  }
})

安装路由

npm install vue-router -S

新增路由文件：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    name: 'home',
    path: '/home',
    component: () => import('@/views/home/index.vue')
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// main.js
import router from '@/router'

const app = createApp(App)
app.use(router)

安装vuex

npm install vuex@next --save

新建文件：src/store.index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

//main.js
...
import store from '@/store'
app.use(store)

封装axios

npm install axios --save-dev

新建文件：src/utils/request.js

import axios from 'axios'
import { Toast } from 'vant'
// 创建axios的一个实例
const instance = axios.create({
  baseURL: import.meta.env.VITE_APP_URL, // 接口统一域名
  timeout: 6000, // 设置超时
  headers: {
    'Content-Type': 'application/json;charset=UTF-8;'
  }
})
let loading
// 正在请求的数量
let requestCount = 0
// 显示loading
const showLoading = () => {
  if (requestCount === 0 && !loading) {
    loading = Toast.loading({
      message: '加载中...',
      forbidClick: true
    })
  }
  requestCount++
}
// 隐藏loading
const hideLoading = () => {
  requestCount--
  if (requestCount === 0) {
    loading.clear()
  }
}

// 请求拦截器
instance.interceptors.request.use((config) => {
  showLoading()
  // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
  const token = window.localStorage.getItem('token')
  token && (config.headers.Authorization = token)
  // 若请求方式为post，则将data参数转为JSON字符串
  if (config.method === 'POST') {
    config.data = JSON.stringify(config.data)
  }
  return config
}, (error) =>
// 对请求错误做些什么
  Promise.reject(error))

// 响应拦截器
instance.interceptors.response.use((response) => {
  hideLoading()
  // 响应成功
  return response.data
}, (error) => {
  let message = ''
  // 响应错误
  if (error.response && error.response.status) {
    const status = error.response.status
    switch (status) {
      case 400:
        message = '请求错误'
        break
      case 401:
        message = '请求错误'
        break
      case 404:
        message = '请求地址出错'
        break
      case 408:
        message = '请求超时'
        break
      case 500:
        message = '服务器内部错误!'
        break
      case 501:
        message = '服务未实现!'
        break
      case 502:
        message = '网关错误!'
        break
      case 503:
        message = '服务不可用!'
        break
      case 504:
        message = '网关超时!'
        break
      case 505:
        message = 'HTTP版本不受支持'
        break
      default:
        message = '请求失败'
    }
    console.log(message)
    Toast.fail(message)
    return Promise.reject(error)
  }
  return Promise.reject(error)
})

const request = ({
  method,
  url,
  data,
  config
}) => {
  method = method.toLowerCase()
  if (method === 'post') {
    return instance.post(url, data, { ...config })
  } else if (method === 'get') {
    return instance.get(url, {
      params: data,
      ...config
    })
  } else if (method === 'delete') {
    return instance.delete(url, {
      params: data,
      ...config
    })
  } else if (method === 'put') {
    return instance.put(url, data, { ...config })
  } else {
    console.error('未知的method' + method)
    return false
  }
}
export default request

使用：

// api.js
import request from '@/utils/request'
export const login = (data) => {
  return request({
    method: 'post',
    url: '/login',
    data
  })
}

// login.vue
import {login} from 'api.js'
login({
  username:'jenson',
  password:'123456'
}).then((res)=>{
  console.log('登陆成功')
})

移动端适配

安装postcss-pxtorem

npm install postcss-pxtorem -D

根目录下创建：postcss.config.js

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, 
      // Vant 官方根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] 
      // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

新建文件：src/utils/rem.js

// rem等比适配配置文件
// 基准大小
const baseSize = 37.5
// 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}

// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  console.log('我执行了')
  setRem()
}

// main.js
import '@/utils/rem.js'

目录导航