Vue3项目初始化与集成

一.项目初始化

从0开始搭建一个vue3版本的项目。

1. 环境准备

• node v16.14.2

• pnpm 8.0.0

2. 初始化项目

本项目使用vite进行构建，vite官方中文文档参考：cn.vitejs.dev/guide/

pnpm:performant npm ，意味“高性能的 npm”。pnpm由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。被誉为“最先进的包管理工具”

pnpm安装指令

npm i -g pnpm

 项目初始化命令:

pnpm create vite

输入你个项目名称，选择开发框架和开发语言。 

 进入到项目根目录pnpm install安装全部依赖.安装完依赖运行程序:pnpm run dev

运行完毕项目跑在http://127.0.0.1:5173/,可以访问你得项目啦

安装一下项目配置：

pnpm install

 

二、项目集成

1. 集成element-plus

Vue3项目UI组件库一般采用的element-plus，因此需要集成element-plus插件！！！

官网地址:一个 Vue 3 UI 框架 | Element Plus

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文件

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

配置完毕可以测试element-plus组件与图标的使用.

2. src别名的配置

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

 vite.config.ts文件 

// 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
            //"@": path.resolve(__dirname, 'src') 或者这么写
        }
    }
})

TypeScript 编译配置  tsconfig.json文件

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

3. 浏览器自动打开

找到 package.json 配置文件!

 "scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
 },

4. 集成sass

npm install -D sass-loader node-sass

组件内可以使用scss语法！！！需要加上lang="scss"

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

5. 配置全局变量

接下来我们为项目添加一些全局的样式

在src/styles目录下创建一个index.scss文件，当然项目中需要用到清除默认样式，因此在index.scss引入reset.scss（清除默认样式一般是固定的）

@import reset.scss

在入口文件（main.ts）引入

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提供这些全局变量可以在组件样式中使用了！！！

6. axios二次封装

在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候，我们经常会把axios进行二次封装。

目的:

1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

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

import axios from "axios";
import { ElMessage } from "element-plus";
//创建axios实例
let request = axios.create({
    baseURL: '/admin',
    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;

7. API接口统一管理

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

//统一管理咱们项目用户相关的接口
import request from '@/utils/request' //引入二次封装的axios，用于发送请求和接收请求
import type {     //引入ts类型文件
 loginFormData,
 loginResponseData,
 userInfoReponseData,
} from './type'

//项目用户相关的请求地址
enum API {  //使用枚举
 LOGIN_URL = '/acl/index/login',
 USERINFO_URL = '/acl/index/info',
 LOGOUT_URL = '/acl/index/logout',
}
//登录接口接口
export const reqLogin = (data: loginFormData) =>
 request.post<any, loginResponseData>(API.LOGIN_URL, data)
//获取用户信息接口
export const reqUserInfo = () =>
 request.get<any, userInfoReponseData>(API.USERINFO_URL)
//退出登录接口
export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)