Vue项目环境配置(尚硅谷笔记)
文章目录
- Vue3项目继承
- 一、项目集成
- 3.1集成element-plus
- 3.2src别名的配置
- 3.3环境变量的配置
- 3.4SVG图标配置
- 3.4.1svg封装为全局组件
- 3.5集成sass
- 3.6mock数据
- 3.7axios二次封装
- 3.8API接口统一管理
Vue3项目继承
一、项目集成
3.1集成element-plus
硅谷甄选运营平台,UI组件库采用的element-plus,因此需要集成element-plus插件!!!
官网地址:https://element-plus.gitee.io/zh-CN/
pnpm install element-plus @element-plus/icons-vue
入口文件main.ts全局安装element-plus,element-plus默认支持语言英语设置为中文
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
//@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale: zhCn
})
Element Plus全局组件类型声明
// tsconfig.json
{"compilerOptions": {// ..."types": ["element-plus/global"]}
}
配置完毕可以测试element-plus组件与图标的使用.
3.2src别名的配置
在开发项目的时候文件与文件关系可能很复杂,因此我们需要给src文件夹配置一个别名!!!
// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src}}
})
TypeScript 编译配置
// tsconfig.json
{"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录"paths": { //路径映射,相对于baseUrl"@/*": ["src/*"] }}
}
3.3环境变量的配置
项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置,把环境状态切换的工作交给代码。
开发环境(development)
顾名思义,开发使用的环境,每位开发人员在自己的dev分支上干活,开发到一定程度,同事会合并代码,进行联调。
测试环境(testing)
测试同事干活的环境啦,一般会由测试同事自己来部署,然后在此环境进行测试
生产环境(production)
生产环境是指正式提供对外服务的,一般会关掉错误报告,打开错误日志。(正式提供给客户使用的环境。)
注意:一般情况下,一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器!!!
项目根目录分别添加 开发、生产和测试环境的文件!
.env.development
.env.production
.env.test
文件内容
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/dev-api'
NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/test-api'
配置运行命令:package.json
"scripts": {"dev": "vite --open","build:test": "vue-tsc && vite build --mode test","build:pro": "vue-tsc && vite build --mode production","preview": "vite preview"},
通过import.meta.env获取环境变量
3.4SVG图标配置
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后,页面上加载的不再是图片资源,
这对页面性能来说是个很大的提升,而且我们SVG文件比img要小的很多,放在项目中几乎不占用资源。
安装SVG依赖插件
pnpm install vite-plugin-svg-icons -D
在vite.config.ts
中配置插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {return {plugins: [createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),],}
}
入口文件导入
import 'virtual:svg-icons-register'
3.4.1svg封装为全局组件
因为项目很多模块需要使用图标,因此把它封装为全局组件!!!
在src/components目录下创建一个SvgIcon组件:代表如下
<template><div><svg :style="{ width: width, height: height }"><use :xlink:href="prefix + name" :fill="color"></use></svg></div>
</template><script setup lang="ts">
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文件夹目录下创建一个index.ts文件:用于注册components文件夹内部全部全局组件!!!
import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
export default {install(app: App) {Object.keys(components).forEach((key: string) => {app.component(key, components[key]);})}
}
在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件
import gloablComponent from './components/index';
app.use(gloablComponent);
3.5集成sass
我们目前在组件内部已经可以使用scss样式,因为在配置styleLint工具的时候,项目当中已经安装过sass sass-loader,因此我们再组件内可以使用scss语法!!!需要加上lang=“scss”
<style scoped lang="scss"></style>
接下来我们为项目添加一些全局的样式
在src/styles目录下创建一个index.scss文件,当然项目中需要用到清除默认样式,因此在index.scss引入reset.scss
@import 'reset.scss'
在入口文件引入
import '@/styles'
但是你会发现在src/styles/index.scss全局样式文件中没有办法使用 变量 . 因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量.
在style/variable.scss创建一个variable.scss文件!
在vite.config.ts文件配置如下:
export default defineConfig((config) => {css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";',},},},}
}
@import "./src/styles/variable.less";
后面的;
不要忘记,不然会报错!
配置完毕你会发现scss提供这些全局变量可以在组件样式中使用了!!!
3.6mock数据
安装依赖:https://www.npmjs.com/package/vite-plugin-mock
pnpm install -D vite-plugin-mock mockjs
在 vite.config.js 配置文件启用插件。
import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {return {plugins: [vue(),viteMockServe({localEnabled: command === 'serve',}),],}
}
在根目录创建mock文件夹:去创建我们需要mock数据与接口!!!
在mock文件夹内部创建一个user.ts文件
//用户信息数据
function createUserList() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '111111',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '111111',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]
}export default [// 用户登录接口{url: '/api/user/login',//请求地址method: 'post',//请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body;//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token;//查看用户信息是否包含有次token用户const checkUser = createUserList().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: {checkUser} }},},
]
安装axios
pnpm install axios
最后通过axios测试接口!!!
3.7axios二次封装
在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候
我们经常会把axios进行二次封装。
目的:
1:使用请求拦截器,可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器,可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
在根目录下创建utils/request.ts
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;
3.8API接口统一管理
创建api/users/type.ts定义类型
// 登录接口data类型定义
export interface loginDataTs {username:string,password:string
}
在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api/users/index.ts文件夹去统一管理项目的接口;
比如:下面方式
// 统一管理用户相关的接口
import request from "@/utils/request";
import {loginDataTs} from '@/api/users/type'
export const LoginApi = (data:loginDataTs)=> request.post<any>('/users/login',data)
Vue项目环境配置(尚硅谷笔记)相关推荐
- Azkaban环境配置-尚硅谷大数据培训
Azkaban(单节点)环境配置 1 安装Git // 安装GIT [bigdata@linux ~]$ sudo yum install git // 通过git下载Azkaban源代码 [bigd ...
- ElasticSearch环境配置-尚硅谷大数据培训
ElasticSearch(单节点)环境配置 // 通过Wget下载ElasticSearch安装包 [bigdata@linux ~]$wget https://artifacts.elastic. ...
- 前端——vue项目环境配置
node类似一个浏览器,npm是包管理器. 搞node的开发者不想维护node了,所以把node交给了好友npm开发者,这个npm开发者就把两个搞一起去了.. 我们配置java环境的流程是下载jdk, ...
- 如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境 一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
- Vue第七章:项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架 回顾: 组件之间的通信 父传子:正向传递 vue允许 自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
- 2、Spring Boot尚硅谷笔记整理高级篇-消息
1.Spring Boot尚硅谷笔记整理高级篇-缓存 2.Spring Boot尚硅谷笔记整理高级篇-消息 3.Spring Boot尚硅谷笔记整理高级篇-检索 4.Spring Boot尚硅谷笔记整 ...
- 【java】项目环境配置
项目环境配置 一.SVN 版本控制 1. 下载安装 2. Checkout同步代码 3. Update更新代码 4. Commit提交代码 5. 撤销本地修改 6. 查看提交记录 二.IntellJ ...
- 【转载】VINS-Mono环境配置与测试笔记
VINS-Mono环境配置与测试笔记 标签: SLAM VINS-mono 本文转载自: VINS-Mono环境配置与测试笔记 error:cv_bridge---opencv和ros连接起来的桥 1 ...
- VINS-Mono环境配置与测试笔记
VINS-Mono环境配置与测试笔记 标签: 旭 linux SLAM 1.简介 VINS-Mono和VINS-Mobile是香港科技大学沈劭劼团队开源的单目视觉惯导SLAM方案.是基于优化和滑动窗口 ...
最新文章
- QCon北京2015:18个热门专题,出品人全部确认,新版网站上线
- 损失函数_SRGAN损失函数(目标函数)详解
- 关于体育的python毕业设计_Python实例13:体育竞技分析
- 开博客第一天!!来几句鸡汤
- linux X11窗口转发配置简记
- NPOI导出Excel表功能实现(多个工作簿)
- 查看一个数是不是2的n次方
- mysql的粒度_MySQL中权限的粒度和时效性
- Idea:新版本Idea底部工具栏Git中没有Local Changes
- vue前期项目搭建所需要安装的插件,idea操作
- 移动ESP分区到磁盘最前端
- iSCSI Target和Initiator安装与操作步骤详解
- 读债务危机0814-08年9月崩溃
- obs多推流地址_手把手教你-OBS录屏使用
- 在学校图书馆里进入WOS却依然无法搜索文献如何解决?
- IKEA宜家社会责任验厂标准
- open3d之体素化Voxelization有关函数详情(笔记6)
- 80端口web服务攻击痕迹
- 87个C#帮助类,各种功能性代码(转载自微信公众号:dotNET全栈开发)
- 数据库软件Toad安装使用教程-详细教程