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 = vueErrorHandler

3、引入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+s4mRTS8FQQo3z5ImgEDZ0xDOjqWGOJJAwwBK+P/BKbvoOiBBvnE2yGD5FN398zh7xS1QNQDGXpUS/qTpA6WLYDJr3/rMINRQGr5P5OnypYnJbJwzVgHQDf3sMH5me9LsO+Z1ZuEQT8mvA98vCQ6+z9aAc1e4RxMG+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.originconst { serveIp, serveUrl, userCenterIp } = window.configwindow.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.removePif (removeP) removePending(config, true)// 记录本次HTTP请求// eslint-disable-next-line new-capconfig.cancelToken = new cancelToekn((c) => {pending.push({name: config.url + JSON.stringify(config.data) + '&' + config.method,fun: c})})// do something before request is sentif (getToken()) {}return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)
let errNum401 = 0
let errNum403 = 0
// let errNum404 = 0
// response interceptor
service.interceptors.response.use(response => {const data = response.dataconst codeList = [200, 201]if (!codeList.includes(data.code)) {switch (data.code) {case 401:breakcase 402:// 找不到资源breakcase 403:if (errNum403) {break}errNum403++// Message.error(data.msg)breakcase 404:breakcase 407:// 没有权限breakcase 502:// 连接服务器失败break}}return data},error => {console.log(error, 'error')if (error.response) {console.log('err' + error.response) // for debugswitch (error.response.status) {case 401:breakcase 400:error.message = '请求错误'breakcase 403:error.message = '拒绝访问'breakcase 404:error.message = `请求地址出错: ${error.response.config.url}`breakcase 408:error.message = '请求超时'breakcase 422:Message.error('参数错误')breakcase 500:error.message = '服务器内部错误'breakcase 501:error.message = '服务未实现'breakcase 502:// 连接服务器失败Message.error('服务器内部错误')error.message = '网关错误'breakcase 503:error.message = '服务不可用'breakcase 504:error.message = '网关超时'breakcase 505:error.message = 'HTTP版本不受支持'breakdefault:error.message = '连接服务器异常'}return error} else {if (removeP) {return}error.message = '连接服务器失败'Message.error('连接服务器失败')console.log(error.message)}return Promise.reject(error.message) // 返回接口返回的错误信息}
)export default service

6.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项目的流程以及基本配置