提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
一、创建项目
npm init vue@latest
二、路由配置修改
1、基础路由
import { createRouter, createWebHistory } from 'vue-router'
import type {RouteRecordRaw} from "vue-router" //路由ts类型
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import('../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(),//import.meta.env.BASE_URL
routes
})
export default router
2、路由守卫配置
//新建文件routerGuard
import router from "@/router/index"
router.beforeEach((to,from,next)=>{
console.log(to,from,next)
next()
})
router.afterEach(()=>{
})
//将路由收文文件在main.js中执行
import "@/router/routerGuard"
三、pinia配置修改
//创建store-namespace文件为所有模块的存储名
//store命名集中命名
export enum Name {
counter = "counter"
}
//创建模块ts文件
import { defineStore } from 'pinia'
import {Name} from "../store-namespace"
export const useCounterStore = defineStore(Name.counter,{
state(){
return {
}
},
getters:{
},
actions:{
},
})
四、生产与开发环境配置
根目录下创建.env.production(生产环境)与 .env.development(开发环境)文件
+ 文件中配置变量以VITE_开头, 后面接变量名 例如 VITE_ENV = "development" ,ENV为变量名
例如:
#环境
VITE_ENV = "development"
#基地址
VITE_APP_BASE_API = "/api"
#地址
VITE_URL = ""
+ 修改project命令, 在dev运行命令后加入 --mode 文件名
例如 "serve": "vite --mode development", //运行时自动读取 .env.development文件
+ build打包时默认是读取.env.production文件的所以不用配置
+ 变量使用
在vue.config.ts文件以外的读取
import.meta.env[变量名] ,例如 import.meta.env["APP_BASE_API"]
在vue.config.ts中读取
1. 引入loadEnv
import { defineConfig, loadEnv } from 'vite'
2.修改默认导出,变为函数形式,并解构出mode,使用loadEnv(mode,process.cwd()) 获取所有变量
export default ({ mode }: any) => {
console.log(loadEnv(mode,process.cwd())) //获取到找整个环境文件的所有变量
return defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
},
})
}
五、其余小配置
1、配置自启与Network
//vite.config.ts中
export default defineConfig({
server:{
port:2023, //端口号
host:true, //可以设置固定的值或者是布尔值, 设置后,才会有NetWork
open:true //运行自动打开浏览器
}
})
//注意: 更改后要重启哦
2、自动引入组件和vue方法的插件
可用于vue的ref等方法自动引入, 组件自动引入, element puls等组件按需引入
npm install -D unplugin-vue-components unplugin-auto-import //下载插件
npm
//vite.config.js中配置
import AutoImport from 'unplugin-auto-import/vite' //自动引入api
import Components from 'unplugin-vue-components/vite' //按需自动引入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//在plugins配置中配置
export default () => {
return defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()], //对于element puls的配置
imports: [
'vue', //自动引入的vue的ref等方法
'vue-router', //引入useRoute等方法
{ //对于vue-router的type的扩展,配置后可以直接使用
from: 'vue-router',
imports: ['RouteLocationRaw',],
type: true,
},],
dts: 'src/auto-imports.d.ts'
}),
Components({
resolvers: [ElementPlusResolver()], //对于element puls的配置
}),
],
})
}
//使用:
//在此处配置element plus后, 可以直接使用,仁和地方都不用再引入,自动按需引入的,在components.d.ts中可以看到生成文件
//import {ref} from "vue"这种引入也可省略, 直接使用即可, 具体引入的类型在src/auto-imports.d.ts文件中可见
//注意:修改vite.config.ts文件后需要重启
3、格式化插件prettier和忽略文件
vscode需要下载prettier的插件
根目录下创建.prettierrc文件
{
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
根目录下格式化忽略文件创建 .prettierignore文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
配置整体格式化命令, 运行后自动整体格式化,package.json中配置
"script":{
"prettier ": "prettier --write ."
}
运行命令 npm run prettier
4、跨域代理配置
server: {
proxy: {
'/api': {
target: 'xxxxx',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
}
5、css配置
配置一个入口, 其余css引入入口文件, css变量可全局使用
//在vite.config.ts中添加css配置项
export default defineConfig({
css: {
// css预处理器
preprocessorOptions: {
scss: {
// 引入 index.scss 这样就可以在全局中使用 index.scss中预定义的变量了,这里我是用的是sass
// 给导入的路径最后加上 ;
additionalData: '@import "@/assets/style/index.scss";' //入口文件地址
}
}
},
})
6、vite.config.ts配置展示
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' //自动引入api
import Components from 'unplugin-vue-components/vite' //按需自动引入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from "path"; // 引入方法
// https://vitejs.dev/config/
export default () => {
return defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
imports: ['vue', 'vue-router', {
from: 'vue-router',
imports: ['RouteLocationRaw',],
type: true,
},],
dts: 'src/auto-imports.d.ts'
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
},
css: {
// css预处理器
preprocessorOptions: {
scss: {
// 引入 index.scss 这样就可以在全局中使用 index.scss中预定义的变量了
// 给导入的路径最后加上 ;
additionalData: '@import "@/assets/style/index.scss";'
}
}
},
server: {
port: 3003,
host: true,
open: true
}
})
}