免费兼职一单一结_北京建站方案_seo和点击付费的区别_百度平台营销软件

0 前言

黑马程序员视频地址：Vue3大事件项目-项目介绍和pnpm创建项目

接口文档：登录 - 黑马程序员-大事件

1 准备工作

1.1 安装pnpm

官网：pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm中文文档 | pnpm中文网

安装pnpm命令：

npm i pnpm -g

pnpm创建vue项目命令：

pnpm create vue

命令对比：

npm	yarn	pnpm
npm install	yarn	pnpm install
npm install axios	yarn add axios	pnpm add axios
npm install axios -D	yarn add axios -D	pnpm add axios -D
npm uninstall axios	yarn remove axios	pnpm remove axios
npm run dev	yarn dev	pnpm dev

1.2 创建vue项目

使用pnpm创建vue项目时，选择以下配置

请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
|  [ ] TypeScript
|  [ ] JSX 支持
|  [+] Router（单页面应用开发）
|  [+] Pinia（状态管理）
|  [ ] Vitest（单元测试）
|  [ ] 端到端测试
|  [+] ESLint（错误预防）
|  [+] Prettier（代码格式化）

标记：警告提示（待解决）

创建完项目需要进入相应文件夹中，安装所有依赖

pnpm install

1.3 Eslint & Prettier的配置

见【VUE3】Eslint 与 Prettier 的配置-CSDN博客

推荐使用里面的方案二，即将 prettier 的规则让 eslint 来执行

因为 1.4 中的检查代码需要 eslint 来检查

1.4 husky 提交代码检查

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

第一步：初始化仓库

git init

第二步：初始化 husky 工具配置

pnpm dlx husky-init; pnpm install

第三步：修改 .husky/pre-commit 文件

pnpm lint

但是这样会有一个问题！

我们可以打开 package.json 文件，看到里面的 lint 命令对应为：

"lint": "eslint . --fix"

即默认进行的是全量检查，耗时问题，历史问题，因此需要再导入一个包 lint-staged ：

第一步：安装

pnpm i lint-staged -D

第二步：配置 package.json 文件

{// ... 省略 ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}{"scripts": {// ... 省略 ..."lint-staged": "lint-staged"}
}

第三步：修改 .husky/pre-commit 文件

pnpm lint-staged

这样就会只检查修改过的文件，哪怕以前提交的文件有问题，也不会检查报错

可以通过控制 1.3 中的那篇文章的第七节中的 'no-undef': 'off'来模拟提交以前有问题的文件

1.5 目录调整

删除默认文件后，增加 api 与 utils 文件夹

如果使用 sass，则需安装对应依赖

pnpm add sass -D

1.6 VueRouter4

更多内容见官网：Vue Router | Vue.js 的官方路由

1.6.1 基础配置

import { createRouter, createWebHistory } from 'vue-router'// createRouter 创建路由实例，===> new VueRouter()
// 1. history模式: createWebHistory()   http://xxx/user
// 2. hash模式: createWebHashHistory()  http://xxx/#/user// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，路由这就会加上 my-path 前缀了const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: []
})export default router

1.6.2 路由跳转

由于 setup 下，this 指向 undefined ，因此需要引入包创建 router 与 router 对象

<script setup>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const gotoCart = () => {console.log(route)router.push('/individual')
}
</script><template><div>我是App</div><button @click="gotoCart()">跳转购物车页面</button>
</template>

1.7 引入 Element Plus 组件库

官方手册：一个 Vue 3 UI 框架 | Element Plus

安装组件库

pnpm install element-plus

按需引入：

第一步：安装插件

pnpm add -D unplugin-vue-components unplugin-auto-import

第二步：把下列代码插入到你的 Vite 的配置文件中

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

全部引入此处不赘述

注意：

1.在引入之后，无需任何配置，即可使用组件库内的组件

2.并且components下的vue组件也可以直接使用，无需导入

1.8 Pinia

见文档：【VUE3】Pinia-CSDN博客

注意：由于创建项目时勾选了Pinia，所以此处不需要再手动安装配置Pinia，直接可以使用

但是持久化还需手动配置，此处不再赘述

1.8.1 优化

将 main.js 中关于 pinia 的代码抽离到 store/index.js 中，并且将 store/modules 中的所有仓库文件统一从 index.js 中导出，方便管理且简化代码

// main.js
// ...
import pinia from './stores'// ...
app.use(pinia)// ...

// store/index.jsimport { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(persist)export default piniaexport * from '@/stores/modules/user'
export * from '@/stores/modules/count'// 上面的代码等同于
// import { useUserStore, ... } from '@/stores/modules/user'
// export { useUserStore, ... }

// 组件.vueimport { useUserStore, useCountStore } from '@/stores'const userStore = useUserStore()
const userCount = useCountStore()

1.9 封装请求工具

手册：axios中文文档|axios中文网 | axios

1.9.1 安装 axios 与配置框架

1.安装 axios

pnpm add axios

2.框架代码

// utils/request.jsimport axios from 'axios'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间
})instance.interceptors.request.use((config) => {// TODO 2. 携带tokenreturn config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// TODO 3. 处理业务失败// TODO 4. 摘取核心响应数据return res},(err) => {// TODO 5. 处理401错误return Promise.reject(err)}
)export default instance

1.9.2 示例代码

// utils/request.jsimport axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import { router } from '@/router'
const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间baseURL,timeout: 100000
})instance.interceptors.request.use((config) => {// TODO 2. 携带tokenconst userStore = useUserStore()if (userStore.token) {config.headers.Authorization = userStore.token}return config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// TODO 3. 处理业务失败if (res.data.code === 0) {return res}ElMessage({ message: res.data.message || '服务异常', type: 'error' })// TODO 4. 摘取核心响应数据return Promise.reject(res.data)},(err) => {ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })// TODO 5. 处理401错误if (err.response?.status === 401) {router.push('/login')}return Promise.reject(err)}
)export default instance

2 开发

2.1 路由配置

示例：采用路由懒加载

// router/index.jsimport { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: '/login', component: () => import('@/views/login/LoginPage.vue') },{path: '/',component: () => import('@/views/layout/LayoutContainer.vue'),redirect: '/article/manage',children: [{ path: '/article/manage', component: () => import('@/views/article/ArticleManage.vue') },{ path: '/article/channel', component: () => import('@/views/article/ArticleChannel.vue') },{ path: '/user/profile', component: () => import('@/views/user/UserProfile.vue') },{ path: '/user/avatar', component: () => import('@/views/user/UserAvatar.vue') },{ path: 'user/password', component: () => import('@/views/user/UserPassword.vue') }]}]
})export default router

记得准备路由出口，如：

// App.vue<template><router-view></router-view>
</template>

2.2 登录

2.2.1 静态页面

1.安装 element-plus 图标库

pnpm i @element-plus/icons-vue

2.静态结构准备

注意：登录页面与注册页面使用 v-if 与 v-else 控制切换

// views/login/LoginPage.vue<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
</script><template><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><el-form ref="form" size="large" autocomplete="off" v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"></el-input></el-form-item><el-form-item><el-button class="button" type="primary" auto-insert-space> 注册 </el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false"> ← 返回 </el-link></el-form-item></el-form><el-form ref="form" size="large" autocomplete="off" v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-inputname="password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码？</el-link></div></el-form-item><el-form-item><el-button class="button" type="primary" auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true"> 注册 → </el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
.login-page {height: 100vh;background-color: #fff;.bg {background:url('@/assets/logo2.png') no-repeat 60% center / 240px auto,url('@/assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

持续更新