硅谷甄选运营平台_学习记录

admin 管理员组

文章数量: 887021

Vue3创建项目

npm init vue@latest

清除默认样式

reset.css下载地址

reset.css - npm

配置element-plus

安装 | Element Plus

 在Element Plus中,组件转换为中文

main.js中导入如下

import zhCn from 'element-plus/es/locale/lang/zh-cn'

 然后使用zhCn

app.use(ElementPlus,{
    locale:zhCn
})

src别名的配置

在开发项目的时候文件与文件关系可能很复杂，因此我们需要给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/*"] 
    }
  }
}

环境变量的配置

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

开发环境（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获取环境变量

SVG图标配置

在开发项目的时候经常会用到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 cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

入口文件导入

import 'virtual:svg-icons-register'

svg封装为全局组件

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

在src/components目录下创建一个SvgIcon文件夹，并在其下创建一个index.vue文件，内容如下

<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/components文件夹目录下创建一个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) => {
            appponent(key, components[key]);
        })
    }
}

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

import gloablComponent from './components/index';
app.use(gloablComponent);

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

mock数据

 安装依赖:vite-plugin-mock - npm

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/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/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 } = checkUser
            return { code: 200, data: { token } }
        },
    },
    // 获取用户信息
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            //获取请求头携带token
            const 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测试接口！！！

import axios from 'axios'
axios({
  url:'/api/user/login',
  method:'post',
  data:{
    username:'system',
    password:'111111'
  }
})

axios二次封装

在开发项目的时候避免不了与后端进行交互,因此我们需要使用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;

测试request：

request({
  url:'/user/login',
  method:'post',
  data:{
    username:'system',
    password:'111111'
  }
}).then(
  res=>{
    console.log(res);
    
  }
)

API接口统一管理

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

比如:下面方式

//统一管理咱们项目用户相关的接口

import request from '@/utils/request'

import type {

 loginFormData,

 loginResponseData,

 userInfoReponseData,

} from './type'

//项目用户相关的请求地址

enum API {

 LOGIN_URL = '/admin/acl/index/login',

 USERINFO_URL = '/admin/acl/index/info',

 LOGOUT_URL = '/admin/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)

模板的路由的配置

安装依赖

npm install vue-router

在src下新建views文件夹

 在src下新建router文件夹,并在其下新建index.ts和routes.ts两个文件

index.ts

//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './routes';
//创建路由器
let router = createRouter({
    //路由模式hash
    history: createWebHashHistory(),
    routes:constantRoute,
    //滚动行为
    scrollBehavior () {
        return{
            left:0,
            top:0
        }
    }
})

export default router;

routes.ts

//对外暴露配置路由(常量路由)
export const constantRoute = [
    {
        //登录
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login', //命名路由
    },
    {
        //登录成功以后展示数据的路由
        path: '/',
        component: () => import('@/views/home/index.vue'),
        name: 'layout'
    },
    {
        //404
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404'
    },
    {
        //404
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'Any'
    },

]

在入口文件中引入路由并注册模板路由

main.ts

import { createApp } from 'vue'
import 'virtual:svg-icons-register'
import App from './App.vue'
import gloablComponent from './components/index';
import '@/styles/index.scss'
//引入路由
import router from './router'

const app = createApp(App)

app.use(gloablComponent);
//注册模板路由
app.use(router)
app.mount('#app')

显示路由的内容

<router-view></router-view>

31_登录路由静态的搭建

修改src/views/login/index.vue

<template>
    <div class="login_container"> 
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form">
                    <h1>Hello</h1>
                    <h2>欢迎来到硅谷甄选</h2>
                    <el-form-item>
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input :prefix-icon="Lock" type="password" v-model="loginForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item> 
                        <el-button class="login_btn" type="primary" size="default" >登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import {User,Lock} from '@element-plus/icons-vue'
import {reactive} from 'vue'
//收集账号与密码的数据
let loginForm=reactive({username:'admin',password:'111111'})
</script>
<style scoped lang="scss">
.login_container{
    width: 100%;
    height:100vh;
    background:url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;
}

.login_form{
    position:relative;
    width: 80%;
    top: 30vh;
    background:url('@/assets/images/login_form.png')  no-repeat;
    background-size: cover;
    padding: 40px;
    h1{
        color: white;
        font-size: 40px;
    }
    h2{
        font-size: 20px;
        color: white;
        margin: 20px 0px;
    }
    .login_btn{
        width: 100%;
    }

}
</style>

32_模板封装登录业务

 安装依赖pinia

npm install pinia

添加src/store/modules/user.ts

//创建用户相关的小仓库
import {defineStore} from 'pinia'
//引入接口
import {reqLogin} from '@/api/user'
//引入数据类型
import  {loginForm,loginResponseData} from '@/api/user/type'
import { UserState } from './types/type'
//引入操作本地存储的工具方法
import { GET_TOKEN, SET_TOKEN } from '@/utils/token'
//创建用户小仓库
let useUserStore=defineStore('User',{
    //小仓库存储数据的地方
    state:():UserState=>{
        return{
            // token:localStorage.getItem('TOKEN'),//用户的唯一标识token
            token:GET_TOKEN(),//用户的唯一标识token
        }
    },
    //异步|逻辑的地方
    actions:{
        //用户登录的方法
       async userLogin(data:loginForm){
        //登录请求
          let result:loginResponseData = await reqLogin(data)
          console.log(result);
          
          //登录请求：成功200->token
          //登录请求：失败201->登录失败错误的信息
          if(result.code==200){
            //pinia仓库存储一下token
            //由于pinia|vuex存储数据其实利用js对象
            this.token=(result.data.token as string)
            //本地存储持久化存储一份
            // localStorage.setItem('TOKEN',(result.data.token as string))
            SET_TOKEN((result.data.token) as string)
            //能保证当前async函数返回一个成功的promise
            return 'ok'
          }else{
            return Promise.reject(new Error(result.data.message))
          }
          
        }
    },
    getters:{

    }
})

//对外暴露获取小仓库的方法
export default useUserStore

添加src/store/index.ts

//仓库大仓库
import {createPinia} from 'pinia'
//创建大仓库
let pinia=createPinia()
//对外暴露：入口文件需要安装仓库
export default pinia

入口文件配置

import { createApp } from 'vue'
import 'virtual:svg-icons-register'
import App from './App.vue'
import gloablComponent from './components/index';
import '@/styles/index.scss'
//引入路由
import router from './router'
//引入仓库
import pinia from './store'


const app = createApp(App)

app.use(gloablComponent);
//安装仓库
app.use(pinia)
//注册模板路由
app.use(router)
app.mount('#app')

33_用户仓库数据ts类型的定义

用户仓库数据ts类型的定义

34_登录时间的判断与封装

 新建src/utils/time.ts文件

//封装一个函数：获取一个结果：当前早上|上午|下午|晚上
export const getTime=()=>{
    let message=''
    //通过内置构造函数Date
    let hours=new Date().getHours();
    if(hours<=9){
        message='早上'
    }else if(hours<=12){
        message='上午'
    }else if(hours<=18){
        message='下午'
    }else{
        message='晚上'
    }
    return message
    
}

 在src/views/login/index.vue文件中使用

//引入获取当前时间的函数
import {getTime} from '@/utils/time'

//登录成功的提示信息
ElNotification({
             type:'success',
            message:'登录成功'
            message:'欢迎回来',
            title:`HI,${getTime()}好`
        })

35_登录模块表单校验

本文标签： 硅谷 平台