vue3使用vite搭建的项目需要安装的插件/配置方式
作者：sqwu
1.创建项目
项目名称是myProject
vue create myProject
2.vetur报错调整
由于vue3引入组件后不用在components中声明，vetur插件会报错
解决办法：vscode设置 -》 搜索vetur -》 找到下面这个选项，把他关掉。然后重新打开文件，发现没有报错了
3.vite2使用eslint校验
推荐使用这一篇的eslint配置方案👉【vite】vite项目从0开始配置eslint
不使用上一篇的话，就按下面的步骤来~
1.安装eslint
执行命令npx eslint --init，按照以下选项配置依赖，会顺带下载四个依赖
2.下面开始适配vue3
打开.eslinttrc.js
1.删除extends中的"plugin:vue/essential"
2.删除plugins中的"vue"
3.在extneds中添加'plugin:vue/vue3-recommended'
4.安装pnpm i -D prettier eslint-config-prettier和pnpm i eslint-plugin-prettier
5.在extends里面加一句：'plugin:prettier/recommended'
4.使用vue-router
1.安装
npm install vue-router@42.在src下创建目录router/index.ts
注意引入方式import * as VueRouter from 'vue-router'。。
直接import VueRouter from 'vue-router'会报错
Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue-router.js?v=8dd0ce81’ does not provide an export named ‘default’import * as VueRouter from ‘vue-router’
import * as VueRouter from 'vue-router'
const routes = [
{
path: '/about',
name: 'about',
component: () => import('../views/About/index.vue')
}
]
// 创建路由实例
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(), // hash模式
routes
})
export default router
3.在main.ts中应用router
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 使用路由
app.use(router)
app.mount('#app')
5.使用vuex
1.安装
npm install vuex@next --save
2.在src下创建目录
store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
6.使用vant4
1.安装
npm i vant
2.安装插件实现按需引入组件的样式
// 1.安装插件依赖
npm i vite-plugin-style-import@1.4.1 -D
// 2.在vite.config.ts使用插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport, { VantResolve } from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
styleImport({
resolves: [VantResolve()]
})
]
})
// 3.在页面中使用组件
<template>
<van-button>登录</van-button>
</template>
<script lang="ts" setup>
import { Button as VanButton } from 'vant'
</script>
7.使用less
1.安装
npm install less less-loader -d
8.移动端将px转为rem
1.安装插件
// 是postcss的插件，用于将像素单元生成rem单位。 npm install postcss-pxtorem -D // 配置可伸缩布局方案，主要是将1rem设为viewWidth/10 npm install amfe-flexible -S
2.在main.ts中
import 'amfe-flexible'
3.在根目录下创建postcss.config.js
// eslint-disable-next-line no-undef
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8',
'last 10 versions'
],
grid: true
},
// 把px单位换算成rem单位
'postcss-pxtorem': {
rootValue: 75, // 换算的基数(设计图750的根字体为75)
propList: ['*'], // *代表将项目中的全部进行转换，单个转换如width、height等
unitPrecision: 5
}
}
9.使用axios
1.安装
npm install axios -S npm install qs -S
2.在utils目录下创建http.js，根据项目要求配置请求/响应拦截器
import Axios, { AxiosRequestConfig } from 'axios'
import { Toast } from 'vant'
// 设置请求头
Axios.defaults.headers.post['Content-Type'] = 'application/json'
// 设置超时
Axios.defaults.timeout = 6 * 1000
export default function $http({ url, method, params }: AxiosRequestConfig) {
return new Promise((resolve, reject) => {
const _axiosConfig = {
url,
method,
params
}
Axios(_axiosConfig)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
3.在src目录下创建api目录，用来放接口请求
// api/common.ts
import $http from '../utils/http'
const url = 'https://dev.ylzpay.com/api/follow-up/app/api'
export function getDictInfo(params: unknown) {
return $http({
url,
params
})
}
// api/index.ts
export * from './common'
10.配置请求代理
// 在vite.config.ts
server: {
port: 8077,
open: true, // 自动打开
base: './',
proxy: {
'/app/api': {
target: 'https://dev.ylzpay.com/api/follow-up/app/api',
changeOrigin: true, // 打开代理
rewrite: path => path.replace('/app/api', '')
}
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。