1、创建vue3项目
1.1 创建vue3项目
确保电脑中安装了nodejs，新建文件夹，输入以下命令：
npm create vue@latest
看是否为自己需要的vue版本，选择Y
各配置具体如下，根据自己的需求选择是或者否
npm create vue@latest
Need to install the following packages:
create-vue@3.10.2
Ok to proceed? (y) y
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'create-vue@3.10.2',
npm WARN EBADENGINE required: { node: '>=v16.20.0' },
npm WARN EBADENGINE current: { node: 'v16.17.0', npm: '8.15.0' }
npm WARN EBADENGINE }
Vue.js - The Progressive JavaScript Framework
√ 请输入项目名称： ... practice-vue3
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是将应用发布到生产环境时，运行以下命令：
npm run build此命令会生成一个dist文件夹，用于生产环境
2、应用配置
在main.js中定义一个应用级的错误处理器，用来捕获所有子组件上的错误：
import vueErrorHandler from '@/utils/errorHandler'
app.config.errorHandler = vueErrorHandler3、引入Element-UI
先安装element，然后在main.js中引入
npm i element-plus --save在main.js中引入（全局注册）并使用
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');注意：element plus 的图标需要单独安装引入：
//安装
npm install @element-plus/icons-vue
//全局引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
// 注册所有图标为全局组件
Object.keys(ElementPlusIconsVue).forEach((iconName) => {
app.component(iconName, ElementPlusIconsVue[iconName])
})4、安装scss
npm install -D sass在vue组件中使用：
<style lang="scss">
.example {
color: blue;
font-size: 20px;
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
.img{
width: 20px;
}
}
</style> 全局SCSS样式，可以在vite.config.js文件中配置：
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`
}
}
}
})vue3中scss样式穿透：
.elinput{
:deep(.el-input__inner) {
height: 38px;
}
}5、安装加密工具
需要先安装jsencrypt，主要用于账号密码登录对密码加密
//安装命令
npm install jsencrypt在utils中新建js文件jsencrypt，内容如下
import { JSEncrypt } from 'jsencrypt'
export default function jsencrypt(data) {
const encryptor = new JSEncrypt()
const publicKey =
`-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCs+s4mRTS8FQQo3z5ImgEDZ0xD
OjqWGOJJAwwBK+P/BKbvoOiBBvnE2yGD5FN398zh7xS1QNQDGXpUS/qTpA6WLYDJ
r3/rMINRQGr5P5OnypYnJbJwzVgHQDf3sMH5me9LsO+Z1ZuEQT8mvA98vCQ6+z9a
Ac1e4RxMG+A2+266qQIDAQAB
-----END PUBLIC KEY-----
`
// 设置公钥
encryptor.setPublicKey(publicKey)// publicKey为公钥
return encryptor.encrypt(data)// data就是需要加密的密码
}
在需要使用的组件中引入jsencrypt,js
//引入
import jsencrypt from "@/utils/jsencrypt.js";
//使用
password: jsencrypt(this.signInFormData.password)6、封装axios
6.1 安装并封装request
需要先安装axios
npm install axios在utils下创建文件request.js
配置内容如下：
import { getToken } from '@/utils/auth';
import axios from 'axios';
import { Message } from 'element-ui';
if (import.meta.env.MODE === 'production') {
const origin = window.location.origin
const { serveIp, serveUrl, userCenterIp } = window.config
window.config.serveIp = `${origin}${serveIp}`
window.config.serveUrl = `${origin}${serveUrl}`
window.config.userCenterIp = `${origin}${userCenterIp}`
// window.config.redirectUrl = origin
}
// create an axios instance
const service = axios.create({
baseURL: window.config.serveUrl,
timeout: 600000 // request timeout
})
// 存储的HTTP请求
const pending = []
const cancelToekn = axios.CancelToken
let removeP = false
const removePending = (config, isAll) => {
for (let i = 0; i < pending.length; i++) {
if (isAll) {
pending[i].fun()
pending.splice(i, 1)
i--
} else {
if (pending[i].name === config.url + JSON.stringify(config.data) + '&' + config.method) {
pending[i].fun()
pending.splice(i, 1)
break
}
}
}
}
// request interceptor
service.interceptors.request.use(
config => {
// 在HTTP请求前取消前面的所有请求
removeP = config.removeP
if (removeP) removePending(config, true)
// 记录本次HTTP请求
// eslint-disable-next-line new-cap
config.cancelToken = new cancelToekn((c) => {
pending.push({
name: config.url + JSON.stringify(config.data) + '&' + config.method,
fun: c
})
})
// do something before request is sent
if (getToken()) {
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
let errNum401 = 0
let errNum403 = 0
// let errNum404 = 0
// response interceptor
service.interceptors.response.use(
response => {
const data = response.data
const codeList = [200, 201]
if (!codeList.includes(data.code)) {
switch (data.code) {
case 401:
break
case 402:
// 找不到资源
break
case 403:
if (errNum403) {
break
}
errNum403++
// Message.error(data.msg)
break
case 404:
break
case 407:
// 没有权限
break
case 502:
// 连接服务器失败
break
}
}
return data
},
error => {
console.log(error, 'error')
if (error.response) {
console.log('err' + error.response) // for debug
switch (error.response.status) {
case 401:
break
case 400:
error.message = '请求错误'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = `请求地址出错: ${error.response.config.url}`
break
case 408:
error.message = '请求超时'
break
case 422:
Message.error('参数错误')
break
case 500:
error.message = '服务器内部错误'
break
case 501:
error.message = '服务未实现'
break
case 502:
// 连接服务器失败
Message.error('服务器内部错误')
error.message = '网关错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网关超时'
break
case 505:
error.message = 'HTTP版本不受支持'
break
default:
error.message = '连接服务器异常'
}
return error
} else {
if (removeP) {
return
}
error.message = '连接服务器失败'
Message.error('连接服务器失败')
console.log(error.message)
}
return Promise.reject(error.message) // 返回接口返回的错误信息
}
)
export default service6.2 使用封装的request
在src根目录下新建api的文件夹，对接口进行分类（例如user.js、login.js等）
以user.js为例：
// 先引入封装的request
import request from '@/utils/request'
// 用户信息
export function userInfo(data) {
return request({
url: '/api/userinfo',
method: 'post',
data,
})
}在需要使用该接口的组件中引入方法，可以直接使用：
<script>
import { userInfo } from "@/api/user";
methods: {
getuserInfo() {
let params = {
id: this.userId,
};
const res = await userInfo(params)
console.log(res,code,data,'res');
},
}
</script>以上就是新建vue3项目的流程以及基本配置
![[实验报告]--基于端口安全](https://img-blog.csdnimg.cn/direct/3b30119c7ac04c6998694267ad8441fd.png)
