从零开始搭建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
# 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'
目录导航
使用Vite创建Vue3项目
配置ESLint校验
- 安装ESLint
- 初始化ESLint
- 更改配置
- 运行或者打包时验证
配置别名‘@’
安装Vant
安装Scss
安装路由
安装vuex
封装axios
移动端适配
还木有评论哦,快来抢沙发吧~