文章目录

前言
创建vite项目
vite.config.ts配置
- 自动化引入组件配置以及.env配置的引用
- 创建src/vite-env.d.ts
- main.ts配置
- api/request.ts
lang 语言
router
- Cookies封装
- 环境配置
- nodemon.json
- package.json
总结

前言

提示：这里可以添加本文要记录的大概内容：

项目使用技术栈vue3+vuex+router+ts+element plus

提示：以下是本篇文章正文内容，下面案例可供参考

创建vite项目

npm create vite@latest name //name为项目名字

npm create vite@latest name
//根据提示选择
//创建后
cd name
npm i
npm run dev//运行项目

vite.config.ts配置

安装插件

自动化引入组件配置以及.env配置的引用

npm i -d autoprefixer unplugin-auto-import unplugin-vue-components unplugin-vue-components unplugin-icons

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'
// https://vitejs.dev/config///自动引入element plusimport AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'//组件引入（包含本地组件）
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'//图标引入
import IconsResolver from 'unplugin-icons/resolver'//IE和旧版chrome兼容
// import legacyPlugin from '@vitejs/plugin-legacy'import { resolve } from "path"
export default (({mode})=>{const VITE_ENV: string = loadEnv(mode, process.cwd()).VITE_ENV;const VITE_APP_BASE_URL: string = loadEnv(mode, process.cwd()).VITE_APP_BASE_URL;const VITE_APP_BASE_API: string = loadEnv(mode, process.cwd()).VITE_APP_BASE_API;return defineConfig({base:'/',assetsInclude:['**/*.png'],server: {open:false,//项目启动时自动打开浏览器host:true,hmr:true,//开启热加载proxy: {// with options[VITE_APP_BASE_API]: {target: VITE_APP_BASE_URL,changeOrigin: true,rewrite: (path) => path.replace(VITE_APP_BASE_API, '')}}},plugins: [vue(),AutoImport({imports:['vue'],resolvers:[//自动导入element plus相关函数，如：ElMessageElementPlusResolver({importStyle:'sass'}),IconsResolver({prefix:'Icon'})],}),Components({resolvers:[//自动导入element plus组件ElementPlusResolver({importStyle:'sass'}),//自动注册图标组件IconsResolver({enabledCollections:['ep']}),]}),Icons({autoInstall:true}),//在plugins配置数组里添加legacy插件// legacyPlugin({//   targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个//   additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件// }),],css: {postcss: {plugins: [autoprefixer({overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8","last 10 versions", // 所有主流浏览器最近10版本用],grid: true,}),// postCssPxToRem({//   rootValue: 204, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192//   propList: ["*", "!border"], // 除 border 外所有px 转 rem//   selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换// })]}},resolve: {alias: {"@": resolve(__dirname, "src"),"img":resolve(__dirname, "src/assets/"),'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',},},build:{target: "es2015",outDir:'dist',assetsDir:"static",sourcemap: false,minify: "terser",chunkSizeWarningLimit: 1000,cssTarget: "chrome61",cssCodeSplit: true, // 启用 CSS 代码拆分assetsInlineLimit:100,//png单独分离  >0.1kb才会分离terserOptions: {compress: {drop_console: true,// drop_debugger: true,},},rollupOptions: {output: {//  指定打包输出的js文件名称chunkFileNames: "static/js/[name]-[hash].js",entryFileNames: "static/js/[name]-[hash].js",assetFileNames: 'static/[ext]/[name]-[hash].[ext]',// assetFileNames: "[ext]/[name]-[hash].[ext]"//设置css和图片的文件夹名称，但是有弊端，css设置的背景图片访问不到,路径是错误的//静态资源分拆打包manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}if (id.includes('components')) {return id.toString().split('components/')[1].split('/')[0].toString();}}}}}})})

创建src/vite-env.d.ts

解决vue组件引入报红，

/// <reference types="vite/client" />//解决.vue引入报红线
declare module '*.vue' {import Vue from '@/vue'export default Vue
}
interface ImportMetaEnv {readonly VITE_APP_BASE_URL: string// 更多环境变量...
}

main.ts配置

引入element plus语言配置,用户页面显示配置单独文件夹

import { createApp } from 'vue'
import App from './App.vue'import router from "./router";
import {createPinia} from "pinia";//语言配置
import i18n  from './lang/index.js'
import store from './store'import "@/styles/elementplus.scss"
import '@/styles/index.scss' // global css
//用户显示，全局引入
import {admin} from '../public/static/config_menu/admin'
import {operator} from '../public/static/config_menu/operator'
import {user} from '../public/static/config_menu/user'
const app = createApp(App)
app.config.globalProperties.$Config_admin = admin
app.config.globalProperties.$Config_operator = operator
app.config.globalProperties.$Config_user = user
//
app.use(i18n).use(router).use(store).use(createPinia()).mount('#app')

api/request.ts

axios请求拦截、响应拦截配置，以及以内axios使用

import axios from "axios";
var util = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
const service = axios.create({baseURL:import.meta.env.VITE_APP_BASE_URL,
//  timeout: 5000 // request timeoutwithCredentials: true,
});// 发起请求之前的拦截器
service.interceptors.request.use(config => {// 如果有token 就携带tokonconsole.log(config.headers);const token = window.localStorage.getItem("Authorization");if (token) {config.headers.Authorization = token;config.headers['Content-Type']='application/x-www-form-urlencoded'}return config;},error => Promise.reject(error)
);
// 响应拦截器
service.interceptors.response.use(response => {const res = response.data;if (res.code != 200) {return ElMessage.error(res.msg)} else {return res;}},error => {return Promise.reject('未连接到服务器：'+error);}
);
export default service;

引入使用

import request from './request'
//ipsec proposal get
export function getikeproposal() {return request({url: '路径',method: 'get'})
}

lang 语言

语言配置文件

import { createI18n } from 'vue-i18n'
import en from './en'//引入的不同语言文件
const messages = {en
}//这个类型可以自己配置，毕竟每个人做的都不一样
const i18n:any =createI18n( {legacy: false,         // 使用 Composition API 模式，则需要将其设置为falseglobalInjection: true, //全局生效$tlocale: 'en',          // 默认cn翻译messages               //ES6解构
})export default i18n;

en.ts

英文

export default {config: {Flush: "Flush",Refresh: "Refresh",Information: "Information",interface: "Interface",}}

router

路由及路由拦截配置文件

import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router"
const routers: Array<RouteRecordRaw> = [{path: '/index',component:()=>import('@/view/contentPage/menuList.vue'),},{ // loginpath: '/login',component: () => import('@/view/login.vue'),},
]const router = createRouter({history: createWebHashHistory(),routes: routers
})// 导航守卫
router.beforeEach((to, from, next) => {const token = localStorage.getItem('Authorization')if(to.path=='/'){next('/login')localStorage.removeItem('Authorization')}else if(to.path=='/index'){if(token){next()}else{next('/login')}}else{next()}
})export default router;

Cookies封装

Cookies封装使用

import Cookies from 'js-cookie'export const setCookie = (label: string, value: any, cookieExpires: any) => {//          名称   保存的值           保存的时间         Cookies.set(label, value, { expires: cookieExpires })
}export const getCookie = (label:string) => {const value = Cookies.get(label)if (value) return valueelse return false
}export const delCookie = (label:string) => {Cookies.remove(label)
}

环境配置

开发、生产环境配置

# .env.developmentVITE_ENV = 'development'VITE_APP_BASE_URL = http://192.168.9.62:8080
VITE_APP_BASE_API = '/api'# .env.productionVITE_ENV = 'production'VITE_APP_BASE_URL=http://192.168.0.1:8060
VITE_APP_BASE_API = '/api'# stageVITE_ENV = 'staging'VITE_APP_BASE_URL = http://device.net
VITE_APP_BASE_API = '/'

nodemon.json

支持vite.config.ts变动后自动更新

{"ignore": ["node_modules", "dist"],"exec": "vite --mode development","watch": ["vite.config.ts"]
}

package.json

使用的插件，项目运行命令

{"name": "project-name","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite --mode development","dev:node": "nodemon","build": "vue-tsc && vite build --mode production","build:stage": "vite build --mode staging","preview": "vite preview"},"dependencies": {"@types/js-cookie": "^3.0.3","@vueform/slider": "^2.1.7","axios": "^1.3.2","element-plus": "2.1","js-cookie": "^3.0.1","nodemon": "^2.0.22","pinia": "^2.0.30","postcss-pxtorem": "^6.0.0","sass": "^1.58.0","terser": "^5.16.3","vue": "^3.2.45","vue-i18n": "^9.2.2","vue-router": "^4.1.6","vue3-slider": "^1.8.0","vuex": "^4.0.2"},"devDependencies": {"@types/node": "^18.11.18","@vitejs/plugin-legacy": "^4.0.2","@vitejs/plugin-vue": "^4.0.0","amfe-flexible": "^2.2.1","autoprefixer": "^10.4.13","typescript": "^4.9.3","unplugin-auto-import": "^0.7.2","unplugin-element-plus": "^0.7.0","unplugin-icons": "^0.15.2","unplugin-vue-components": "^0.23.0","vite": "^4.1.0","vue-tsc": "^1.0.24"}
}

总结

提示：这里对文章进行总结：本文讲解了vue3 vite创建项目引入router、store、elenment plus等，可使用开发，以及基础的TS使用，自看代码。

vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）相关推荐

vue - - - - vite创建vue3项目（不使用TS）
vite创建vue3项目 vite官方文档 1. 使用指令创建项目 > npm create vite your-project-name > or > yarn create vi ...
vue3使用vite创建项目【2分钟】
命令讲解 [查看版本] [dalaojun@localhost luichunvue]$ node -v v14.15.0 [dalaojun@localhost luichunvue]$ npm - ...
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
[Vue]-Vue脚手架创建项目时的 linter / formatter config配置选择 ESLint with error prevention only 只进行报错提醒 ESLint + ...
Vue脚手架创建项目流程
Vue脚手架创建项目流程图形化创建在创建文件的文件夹打开cmd, 按住shift右键打开黑窗口,或者直接在文件夹上面路径上面输入cmd 输入vue ui 会自己在浏览器打开点击创建项目项目文件 ...
vue脚手架安装以及vue脚手架创建项目（详细步骤）
系列文章: 文章目录 node.js安装 vue环境安装 vue创建项目命令行方式创建使用UI界面搭建 idea导入vue项目学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ...
Vue初始化创建项目
Vue初始化创建项目 1.创建项目: 2.打开项目: 3.删除项目中的默认添加文件 4.添加自己的东西 4.1.初始化HTML中的代码: 4.2.使用视口缩放+rem的方式适配移动端. 4.3.运行查 ...
Vue 3 + TypeScript + Vite创建项目并安装常用插件
创建项目创建项目 npm init vite √ Project name: ... wego-admin √ Select a framework: » vue √ Select a varian ...
vue 手脚架创建项目
vue2 手脚架创建 npm init : 初始化 npm, 一直回车,会生成一个 package.json文件 vue init webpack vue2_demo2: 创建项目创建成功,项目结 ...
解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chrome ...

vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）