vite+vue3项目初始化搭建

vite+vue3项目初始化搭建

"nodejs": v18.19.0
"pnpm": 8.15.0
"vue": v3.4.21
"vite": v5.2.0

1.创建项目

Vite中文官网

pnpm create vite@latest

项目名字：gd_web
选择框架：Vue3
选择语言：JavaScript
进入项目：cd gd_web
安装依赖: pnpm i
启动项目：pnpm run dev

2.配置.editorconfig

# https://editorconfig.org
# 根目录配置，表示当前目录是编辑器配置的根目录
root = true[*] # 对所有文件应用以下配置
charset = utf-8 # 使用 UTF-8 编码
indent_style = space # 使用空格进行缩进
indent_size = 4 # 每个缩进级别使用 4 个空格
end_of_line = lf # 使用 LF（Linux 和 macOS 的换行符）
insert_final_newline = true # 在文件末尾插入一行空白
trim_trailing_whitespace = true # 自动删除行末尾的空白字符[*.md] # 对扩展名为 .md 的 Markdown 文件应用以下配置
insert_final_newline = false # 不在文件末尾插入一行空白
trim_trailing_whitespace = false # 不自动删除行末尾的空白字符

3.别名配置

在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！

在vite.config.js文件中：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {// 配置别名alias: {"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src},//extensions数组的意思是在import组件的时候自动补全.vue等文件后缀extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']}
})

如果不能识别path模块

pnpm install @types/node --save-dev

配置完成后，我们发现我们 '@'之后没有提示，这个时候我们在根目录创建jsconfig.json文件

{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules"]
}

4.环境变量的配置

项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。

开发环境（development）
顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。

测试环境（testing）
测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试

生产环境（production）
生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)

注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！！！

项目根目录分别添加 开发、生产和测试环境的文件!

.env.development
.env.production
.env.test

文件内容：

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '项目名字'
VITE_APP_BASE_API = '/dev-api'
VITE_SERVE = 'http://127.0.0.1:8990'

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'production'
VITE_APP_TITLE = '项目名字'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVE = 'http://127.0.0.1:8990'

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '项目名字'
VITE_APP_BASE_API = '/test-api'
VITE_SERVE = 'http://127.0.0.1:8990'

配置运行命令：package.json

 "scripts": {"dev": "pnpm vite --open","build:test": "pnpm vite build --mode test","build:pro": "pnpm vite build --mode production","preview": "vite preview"},

通过import.meta.env获取环境变量

5.安装css预处理器sass

pnpm install -D sass sass-loader

组件中使用：

<style scoped lang="scss"></style>

全局样式定义：
在src/styles目录下创建一个index.scss文件；
当然项目中需要用到清除默认样式，可以在index.scss引入reset.scss

reset.scss

// reset.scss
// index.scss文件中引入
@import "reset.scss";

在入口文件中引入全局样式：

import '@/styles/index.scss'

在src/styles/index.scss全局样式文件中没有办法使用 变量 . 因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量.

在style/variable.scss创建一个variable.scss文件！

在vite.config.js文件配置如下:

export default defineConfig((config) => {//配置scss全局变量css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";'}}}
}

6.集成Element-plus

Element-plus官网

安装：

pnpm install element-plus --save

配置自动导入： 需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

pnpm install -D unplugin-vue-components unplugin-auto-import

在vite配置文件中添加：

// vite.config.ts
import {defineConfig} from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue'],}),Components({resolvers: [ElementPlusResolver()],}),// ...],
})

配置Element-plus 组件内容中文显示：
main.js文件中添加

// 引入element-plus样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale})

Element-plus icon图标全局使用

pnpm install @element-plus/icons-vue

注册所有图标，在component/index.js文件中
从 @element-plus/icons-vue 中导入所有图标并进行全局注册

// 引入element-plus提供的所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'// 对外暴露插件对象
export default {// 必须叫做install方法，会有一个APP对象传参；// 在入口文件引入使用，会自动执行该方法install(app) {// 将element-plus提供的图标注册为全局组件for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}},
}

在入口文件引入src/index.js文件,通过app.use方法安装自定义插件

// 注册全局组件
import gloablComponent from '@/components/index.js'
app.use(gloablComponent)

使用：详细见官网

<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template><div><el-icon :size="size" :color="color"><Edit/></el-icon><!-- 或者独立使用它，不从父级获取属性 --><Edit/></div>
</template>

7.SVG图标配置

安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

在vite.config.js中配置插件

plugins: [// ...// 配置自定义SVG 图标createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),// ...
]

入口文件(main.js)导入

// 注册SVG图标
import 'virtual:svg-icons-register'

将svg封装为全局组件

因为项目很多模块需要使用图标,因此把它封装为全局组件！！！

在src/components目录下创建一个SvgIcon组件:代表如下

<template><div><svg :style="{ width: width, height: height }"><use :xlink:href="prefix + name" :fill="color"></use></svg></div>
</template><script setup>
defineProps({//xlink:href属性值的前缀prefix: {type: String,default: '#icon-'},//svg矢量图的名字name: String,//svg图标的颜色color: {type: String,default: ""},//svg宽度width: {type: String,default: '16px'},//svg高度height: {type: String,default: '16px'}})
</script>
<style scoped></style>

在src/components文件夹目录下创建一个index.js文件：用于注册components文件夹内部全部全局组件！！！

import SvgIcon from './SvgIcon'
const components = { SvgIcon }
// 引入element-plus提供的所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'// 对外暴露插件对象
export default {// 必须叫做install方法，会有一个APP对象传参；// 在入口文件引入使用，会自动执行该方法install(app) {//注册全局SVG组件Object.keys(components).forEach((key) => {app.component(key, components[key])})// 将element-plus提供的图标注册为全局组件for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}},
}

在入口文件引入src/index.js文件,通过app.use方法安装自定义插件

// 注册全局组件
import globalComponent from '@/components/index.js'
app.use(globalComponent)

8.配置封装axios

安装axios：

pnpm install axios

在根目录下创建utils/request.js

import axios from "axios";
import {ElMessage} from "element-plus";
//创建axios实例
let request = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 5000
})
//请求拦截器
request.interceptors.request.use(config => {return config;
});
//响应拦截器
request.interceptors.response.use((response) => {return response.data;
}, (error) => {//处理网络错误let msg = '';let status = error.response.status;switch (status) {case 401:msg = "token过期";break;case 403:msg = '无权访问';break;case 404:msg = "请求地址错误";break;case 500:msg = "服务器出现问题";break;default:msg = "无网络";}ElMessage({type: 'error',message: msg})return Promise.reject(error);
});
export default request;

9.api接口统一管理

在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口；

例如：

//统一管理用户相关的接口
import request from '../utils/request.js'//项目用户相关的请求地址
const API = {LOGIN_URL: '/admin/acl/index/login',USERINFO_URL: '/admin/acl/index/info',LOGOUT_URL: '/admin/acl/index/logout',
}//登录接口
export const reqLogin = (data) => request.post(API.LOGIN_URL, data)//获取用户信息
export const reqUserInfo = () => request.get(API.USERINFO_URL)//退出登录
export const reqLogout = () => request.post(API.LOGOUT_URL)

10.配置vue-router

安装：

pnpm install vue-router@4

1.创建src/router/index.js文件，使用路由懒加载，优化访问性能

import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'const routes = [{path: '/',name: 'Home',component: () => import('../views/home.vue') // 建议进行路由懒加载，优化访问性能},{path: '/about',name: 'About',component: () => import('../views/about.vue')}
]const router = createRouter({// history: createWebHistory(),    // 使用history模式history: createWebHashHistory(),	 // 使用hash模式routes
})export default router

2.在App.vue 文件中使用router-view 组件，路由匹配到组件会通过router-view 组件进行渲染。

<template><div id="nav"><router-link to="/">Home</router-link>|<router-link to="/about">About</router-link></div><router-view></router-view>
</template>

3.main.js中引入router


// ...
// 引入路由
import router from './router/index.js'
app.use(router)
// ...

11.配置pinia

安装：

pnpm install pinia

在main.js文件中引入：

// 引入pinia
import {createPinia} from 'pinia'
app.use(createPinia())

创建文件夹src/stores
在该文件夹中管理一些公用数据，用户数据user.js，购物车数据等

定义

//定义关于counter的store
import {defineStore} from 'pinia'/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter", {state: () => ({count: 66,}),// getters 类似于 vue 里面的计算属性，可以对已有的数据进行修饰。// 不管调用多少次，getters中的函数只会执行一次，且都会缓存。getters: {},actions: {}
})//暴露这个useCounter模块
export default useCounter

使用


<script setup>
// 首先需要引入一下我们刚刚创建的store
import useCounter from '../stores/counter.js'
// 因为是个方法，所以我们得调用一下
// 注意获取数据后不支持结构，结构则失去响应式
const counterStore = useCounter()console.log(counterStore.count)
</script>

pinia提供了一个函数storeToRefs解决。引用官方API storeToRef 作用就是把结构的数据使用ref做代理

import {storeToRefs} from 'pinia'const counterStore = useCounter()
// 结构仍为响应式数据
const {count} = storeToRefs(counterStore)

12.Proxy代理配置

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {// 根据当前工作目录中的 `mode` 加载 .env 文件// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。const env = loadEnv(mode, process.cwd())// console.log(env)return {base: env.VITE_USER_NODE_ENV === 'production' ? './' : '/',plugins: [vue(),// 配置自定义SVG图标createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),// AutoImport({//     resolvers: [ElementPlusResolver()],//     // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等//     imports: ['vue'],// }),// Components({//     resolvers: [ElementPlusResolver()],// }),],resolve: {// 配置别名alias: {"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src},//extensions数组的意思是在import组件的时候自动补全.vue等文件后缀extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']},// 配置scss变量css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";'}}},// 代理跨域server: {// open: true, //启动项目自动弹出浏览器hmr: true, //开启热加载host: false, //监听所有地址port: 6688, //启动端口strictPort: false, //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口https: false, // 是否开启https//proxy: createProxy(env.VITE_APP_API_HOST),proxy: {[env.VITE_APP_BASE_API]: {// 获取数据的服务器地址设置target: env.VITE_SERVE,//开启代理跨域changeOrigin: true,// secure：安全的// 如果是https接口，需要配置这个参数secure: false,// 路径重写// 将请求路径中的 '/api' 替换为 ''rewrite: (path) => path.replace(/^\/api/, ''),},},},}})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/46717.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于springboot和mybatis的RealWorld后端项目实战三之添加swagger

基于springboot和mybatis的RealWorld后端项目实战三之添加swagger

pom.xml添加依赖 <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><dependency><groupId>io.springfox</groupId><arti…
阅读更多...
解决网页中的 video 标签在移动端浏览器（如百度访问网页）视频脱离文档流播放问题

解决网页中的 video 标签在移动端浏览器（如百度访问网页）视频脱离文档流播放问题

问题现象 部分浏览器视频脱离文档流&#xff0c;滚动时&#xff0c;视频是悬浮出来&#xff0c;在顶部播放 解决方案 添加下列属性&#xff0c;可解决大部分浏览器的脱离文档流的问题 <videowebkit-playsinline""playsInlinex5-playsinlinet7-video-player-t…
阅读更多...
JS【详解】真值 vs 假值（虚值 / falsy 值）

JS【详解】真值 vs 假值（虚值 / falsy 值）

假值&#xff08;虚值 / falsy 值&#xff09; 转换为布尔类型后&#xff0c;结果为 false 的数据即假值&#xff0c;共 7 种 falsenullundefined0-0NaN空字符串 —— "" 或 或 【实战】删除数组中的假值 let list [null, 1, undefined, 2, NaN, 3]; let resul…
阅读更多...
AI辅助自动驾驶技术在2024年的发展与趋势

AI辅助自动驾驶技术在2024年的发展与趋势

文章目录 综述 2024 年 AI 辅助研发趋势 第一章&#xff1a;引言 1.1 背景介绍 1.2 AI在自动驾驶中的地位和作用 1.3 2024年自动驾驶技术的现状 1.4 论文结构 第二章&#xff1a;AI技术在自动驾驶中的应用 2.1 深度学习算法在自动驾驶中的应用 2.2 数据分析与模式识别…
阅读更多...
谷类大米农业行业网站源码系统 带完整的安装代码包以及搭建部署教程

谷类大米农业行业网站源码系统 带完整的安装代码包以及搭建部署教程

系统概述 在当今数字化时代&#xff0c;农业行业也逐渐迈向信息化、智能化。为了满足谷类大米农业行业的信息化需求&#xff0c;我们推出了一款专为该行业设计的网站源码系统。该系统不仅具备丰富的行业特色功能&#xff0c;而且提供了完整的安装代码包以及详细的搭建部署教程…
阅读更多...
GitHub热门开源项目-2024版

GitHub热门开源项目-2024版

文章目录 awesome系列sindresorhus/awesomeawesome-selfhosted/awesome-selfhostedvinta/awesome-pythonavelino/awesome-gof/awesome-chatgpt-promptsHack-with-Github/Awesome-HackingFortAwesome/Font-Awesomejaywcjlove/awesome-macvuejs/awesome-vueDopplerHQ/awesome-int…
阅读更多...
logback-spring.xml配置

logback-spring.xml配置

<?xml version"1.0" encoding"UTF-8"?> <!-- 日志级别从低到高分为TRACE < DEBUG < INFO < WARN < ERROR < FATAL&#xff0c;如果设置为WARN&#xff0c;则低于WARN的信息都不会输出 --> <!-- scan:当此属性设置为true时…
阅读更多...
【Java算法】前缀和 下

【Java算法】前缀和 下

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【算法工作坊】算法实战揭秘 一.连续数组 题目链接&#xff1a;525.连续数组 代码 public int findMaxLength(int[] nums) {HashMap<Integer,Integer> mapnew HashMap<>();map.put(0,-1);…
阅读更多...
Camera Raw：移去

Camera Raw：移去

Camera Raw 中的移去 Remove模块主要用于去除照片中的不需要的元素&#xff0c;比如污点、电线或其它干扰元素。 快捷键&#xff1a;B 移去面板中提供了三种移去模式&#xff1a;移除、修复以及仿制。 移除 Remove 通过智能算法和生成式 AI 来去除不需要的元素。 对象识别 Obje…
阅读更多...
php 小白新手从入门到精通教程（第3版）

php 小白新手从入门到精通教程（第3版）

前言 PHP&#xff08;PHP: Hypertext Preprocessor&#xff09;即“超文本预处理器”&#xff0c;是在服务器端执行的脚本语言&#xff0c;尤其适用于Web开发并可嵌入HTML中。PHP语法学习了C语言&#xff0c;吸纳Java和Perl多个语言的特色发展出自己的特色语法&#xff0c;并根…
阅读更多...
FastAPI 学习之路（五十二）WebSockets(八)接受/发送json格式消息

FastAPI 学习之路（五十二）WebSockets(八)接受/发送json格式消息

前面我们发送的大多数都是text类型的消息&#xff0c;对于text消息来说&#xff0c;后端处理出来要麻烦的多&#xff0c;那么我们可以不可以传递json格式的数据&#xff0c;对于前后端来说都比较友好&#xff0c;答案是肯定的&#xff0c;我们需要做下处理。 首先&#xff0c;…
阅读更多...
云计算安全流程与管控要求的全面解析

云计算安全流程与管控要求的全面解析

华为云安全流程与管控要求的全面解析 引言 在云计算技术迅猛发展的背景下&#xff0c;云安全问题日益凸显其重要性。华为云作为行业的领军企业&#xff0c;其安全流程与管控要求不仅关乎自身的服务稳定性&#xff0c;更直接影响到广大用户的业务安全。本文将深入解析华为云的安…
阅读更多...
mysql、oracle、db2数据库连接参数

mysql、oracle、db2数据库连接参数

mysql、oracle、db2数据库连接参数 参数/数据库driverurlMysqlcom.mysql.jdbc.Driver 或 com.mysql.cj.jdbc.Driverjdbc:mysql://localhost:3306/数据库名Oracleoracle.jdbc.driver.OracleDriverjdbc:oracle:thin:localhost:1521:orcl 注&#xff1a;orcl为数据库SIDDB2com.ib…
阅读更多...
InterSystems IRIS使用python pyodbc连接 linux环境,odbc驱动安装，DSN配置，数据源配置，linux中文不展示问题

InterSystems IRIS使用python pyodbc连接 linux环境,odbc驱动安装，DSN配置，数据源配置，linux中文不展示问题

1、官方文档 ODBC Installation and Validation on UNIX Systems | Using the InterSystems ODBC Driver | InterSystems IRIS for Health 2024.1 By default, a full ODBC installation is performed with a standard InterSystems installation. If you perform a custom i…
阅读更多...
beego框架_golang web框架_使用介绍

beego框架_golang web框架_使用介绍

beego简介 beego是一个用于快速开发Go应用的http框架&#xff0c;由Go语言方面的技术大牛设计。beego可以用来快速开发API、Web、后端服务等各种应用&#xff0c;是一个RESTful的框架&#xff0c;主要设计灵感来源于tornado、sinatra、flask这三个框架&#xff0c;但结合了Go本…
阅读更多...
《Windows API每日一练》10.3 公用对话框

《Windows API每日一练》10.3 公用对话框

Windows最初发行时的主要目标之一就是提倡一种标准化的用户界面。对于公用菜单 项来说&#xff0c;这一目标实现得很快。几乎所有的软件制造商都采用了Alt-File-Open组合来打开 文件。但是&#xff0c;真正用来打开文件的对话框却经常很不一样。 从Windows 3.1开始&#xff0c…
阅读更多...
【JVM基础02】——组成-程序计数器解读

【JVM基础02】——组成-程序计数器解读

目录 1- 引言&#xff1a;程序计数器1-1 程序计数器是什么&#xff1f;为什么用程序计数器&#xff1f;(What)(Why) 2- 核心&#xff1a;程序计数器的原理&#xff08;How&#xff09;2-1 使用 javap 查看程序计数器的作用2-2 多线程下程序计数器原理举例 3- 小结&#xff1a;什…
阅读更多...
object-C 解答算法:移动零(leetCode-283)

object-C 解答算法:移动零(leetCode-283)

移动零(leetCode-283) 题目如下图:(也可以到leetCode上看完整题目,题号283) 解题思路: 本质就是把非0的元素往前移动,接下来要考虑的是怎么移动,每次移动多少? 这里需要用到双指针,i 记录每次遍历的元素值, j 记录“非0元素值”需要移动到的位置; 当所有“非0元素值”都移…
阅读更多...
【C++】错误处理机制

【C++】错误处理机制

C 提供了多种错误处理机制&#xff0c;用于在程序中检测和处理异常情况。这些机制包括异常处理、错误返回码、断言&#xff08;assert&#xff09;以及其他自定义的错误处理方法。以下是对 C 错误处理机制的详细介绍&#xff1a; 1. 异常处理&#xff08;Exception Handling&a…
阅读更多...
vue3前端开发-小兔鲜项目-热门品牌推荐栏目

vue3前端开发-小兔鲜项目-热门品牌推荐栏目

vue3前端开发-小兔鲜项目-热门品牌推荐栏目&#xff01;这一期内容&#xff0c;大家一定要认真的看完。因为&#xff0c;黑马官方教程视频里面老师没有讲这个&#xff0c;但是内容其实不难。只是按照之前的流程操作就行了。我把自己写好的代码分享给大家。做个参考demo。 第一步…
阅读更多...
最新文章

Copyright @ 2022~2023