网站建设及运营,做竞价网站访问突然变少,软件技术培训机构,网站定制论坛今天开始使用 vue3 ts 搭建一个电商项目平台#xff0c;因为文章会将项目的每处代码的书写都会讲解到#xff0c;所以本项目会分成好几篇文章进行讲解#xff0c;我会在最后一篇文章中会将项目代码开源到我的github上#xff0c;大家可以自行去进行下载运行#xff0c;希…
今天开始使用 vue3 ts 搭建一个电商项目平台因为文章会将项目的每处代码的书写都会讲解到所以本项目会分成好几篇文章进行讲解我会在最后一篇文章中会将项目代码开源到我的github上大家可以自行去进行下载运行希望本文章对有帮助的朋友们能多多关注本专栏学习更多前端vue知识然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面阅读本文章能够学习到的技术 vite快速轻量且功能丰富的前端构建工具帮助开发人员更高效构建现代Web应用程序。 pnpm高性能、轻量级npm替代品帮助开发人员更加高效地处理应用程序的依赖关系。 vue3vue最新版本的用于构建用户界面的渐进式JavaScript框架。 typescriptjavascript的超集提供了静态类型检查使得代码更加健壮。 vue-routerVue.js官方提供的路由管理器与Vue.js紧密耦合非常方便与Vue.js一同使用。 piniavue3构建的Vuex替代品具有响应式能力提供非常简单的 API进行状态管理。 element-plus基于Vue.js 3.0的UI组件库用于构建高品质的响应式Web应用程序。 axios基于Promise的HTTP客户端可以在浏览器和node.js中使用。 vueuse/core针对vue3功能性的API库提供了许多实用的功能。 当然还有许多其他的需要安装的第三方库这里就不再一一介绍了在项目中用到的地方自行会进行讲解大家自行学习即可现在就让我们走进vue3ts的实战项目吧。
目录
初始化项目
包管理工具
src别名配置
重置默认样式
配置elementPlus
自定义全局样式
axios基础配置
API接口统一管理
全局组件封装
路由配置管理
store仓库配置
git管理配置 初始化项目
找到自己想要创建项目的文件夹在地址栏输入cmd从而进入当前文件路径在当前路径下执行如下命令使用vite构建工具进行创建vue3项目具体的操作这里就不再赘述不了解 vite 构建工具的朋友可以先去看 vite脚手架的搭建与使用 因为我这里使用 vite3 版本其安装命令如下 我这里就使用 pnpm 进行安装项目了没有安装过pnpm的朋友cmd进行全局安装即可命令为npm i -g pnpm 。
pnpm create vite
安装过程与我上面分享的文章基本一致cd到项目路径安装下依赖最后的结果如下表明创建项目成功 然后将项目文件拖到编辑器中打开终端执行 pnpm run dev 打开项目结果如下 包管理工具
团队开发项目的时候需要统一包管理器工具因为不同包管理器工具下载同一个依赖,可能版本不一样,导致项目出现bug问题,因此包管理器工具需要统一管理 只需在 package.json 中加入一行代码来限制如下含义只允许使用 pnpm 来进行安装
scripts: {// ... 其他命令preinstall: npx only-allow pnpm}
直接将上面的代码复制如下preinstall 是包安装工具的 钩子函数在上例中作为 install 之前的拦截判断也就是在 install 之前触发 配置完成之后当你使用的不是pnpm命令之后控制台直接报错警告 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(__dirname, src) // 相对路径别名配置使用 代替 src}}
})
如果红色语法提示请安装 type/node 其是TypeScript 的一个文件包用于描述 Node.js 核心模块和常用的第三方库的类型信息需要终端执行如下命令才能解决下图的警告
pnpm i types/node --save-dev 找到 tsconfig.json 配置文件找到配置项 compilerOptions 添加配置这一步的作用是让 IDE 可以对路径进行智能提示
// tsconfig.json
{compilerOptions: {baseUrl: ., // 解析非相对模块的基地址默认是当前目录paths: { //路径映射相对于baseUrl/*: [src/*] }}
}
验证我们是否配置成功我们可以在main.js入口文件处进行校验如果有提示说明配置成功 重置默认样式
在项目中我们都会用到一些标签但是这些标签可能本身自带一些默认样式这些默认样式可能会影响我们的排版布局如果每次引用就去清除一遍默认样式有点太过繁琐因此这里需要我们清除一下默认样式。执行如下命令安装第三方包
pnpm install reset.css --save
安装完成之后我们在入口文件处进行引入即可如下 配置elementPlus
因为本项目需要采用 element-plus 组件库进行创建项目其官方地址为element-plus 所以接下来需要对组件库进行一个安装配置具体的实现过程如下终端执行如下安装命令
pnpm install element-plus
这里我们采用自动按需导入的方式如下需要安装两个插件
pnpm install unplugin-auto-import unplugin-vue-components -D
因为我们可以还需要用到elementplus中的图标所以这里也采用自动导入的方式
pnpm install unplugin-icons -D
因为本次使用的是vite ts的模板所以我们需要对下面文件进行如下操作修改
// vite.config.ts
import {defineConfig} from vite
import vue from vitejs/plugin-vue
import path from path
// 配置按需导入
import Icons from unplugin-icons/vite
import IconsResolver from unplugin-icons/resolver
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolversconst pathSrc path.resolve(__dirname, src)export default defineConfig({plugins: [vue(),AutoImport({// 自动导入 Element Plus 相关函数如ElMessage, ElMessageBox... (带样式)resolvers: [ElementPlusResolver(),// 自动导入图标组件IconsResolver({}),],}),Components({resolvers: [// 自动注册图标组件IconsResolver({enabledCollections: [ep],}),// 自动导入 Element Plus 组件ElementPlusResolver(),],}),Icons({autoInstall: true,}),],resolve: {alias: {: pathSrc // 相对路径别名配置使用 代替 src}}
})
接下来我们直接在项目中引入一个button组件尝试一下如下说明我们自动按需引入成功 接下来我们需要对elementPlus进行一个主题色的配置这里我们采用sass样式系统sass是一种预编译的css作用类似于less这里我们在vue项目中采用该预处理器进行处理样式终端执行如下命令安装相应的插件
pnpm install sass -D
接下来在src目录下新建styles文件夹用于存放全局样式组件该文件夹下新建element.scss文件设置定制化样式如下 forward element-plus/theme-chalk/src/common/var.scss with ($colors: (primary: (// 主色base: #f94417,),success: (// 成功色base: #f72f18,),warning: (// 警告色base: #fd5e1d,),danger: (// 危险色base: #e26237,),error: (// 错误色base: #cf4444,),)
)
然后我们需要在vite.config.ts文件夹下修改下面两处的内容 回到页面可以看到我们的主题色已经生效了 因为elementPlus默认是英文的接下来我们还需要对其设置一下国际化配置打开main.ys入口文件进行如下配置
import { createApp } from vue
import reset.css
import App from ./App.vue
// 配置国际化
import ElementPlus from element-plus
import zhCn from element-plus/es/locale/lang/zh-cncreateApp(App).use(ElementPlus, { locale: zhCn }).mount(#app)
接下来我们引入一个分页器看看是否变成中文了如下看来是没毛病了 自定义全局样式
在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为var.scss的文件中正常组件中使用需要先导入scss文件再使用内部的变量比较繁琐自动导入可以免去手动导入的步骤直接使用内部的变量如下
我们在公共样式文件夹styles中新增一个var.scss文件里面存放着全局公共样式 然后我们在vite.config.ts中进行引入该文件夹 可以看到我们的样式已经生效了 axios基础配置
axios是一个基于promise的http客户端用于浏览器和node.js环境中发起http请求。它提供了简单易用的api可以用于执行各种类型的http请求包括get、post、put、delete等。接下来对其进行简单的配置讲解
终端执行如下命令进行安装axios
pnpm install axios
然后我们在src文件夹下新建utils工具文件夹在该文件夹下新建http.ts文件对axios进行二次封装 目的 使用请求拦截器可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数) 使用响应拦截器可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误) // axios基础封装
import axios from axiosconst http axios.create({baseURL: 服务器接口根地址,timeout: 5000,
})// 请求拦截器
http.interceptors.request.use(config {// 请求拦截器return config
}, error {return Promise.reject(error)
})// 响应拦截器
http.interceptors.response.use(res {return res.data
}, error {//处理网络错误let msg const status error.response.statusswitch (status) {case 401:msg token过期breakcase 403:msg 无权访问breakcase 404:msg 请求地址错误breakcase 500:msg 服务器出现问题breakdefault:msg 网络出现问题break}ElMessage({type: error,message: msg,})return Promise.reject(error)}
)export default http
因为我们是自动按需导入所以不需要像以前那样用到elementPlus组件还需要导入这里直接使用相关api即可不过可能ts文件会检索 ElMessage 不存在会报错这里我们需要在tsconfig.json中的include字段中添加auto-imports.d.ts就可以了
include: [src/**/*.ts, src/**/*.d.ts, src/**/*.tsx, src/**/*.vue, auto-imports.d.ts,],
接下来开始对我们封装的axios进行相关测试我们在入口文件main.ts进行接口测试 打开控制台可以看到我们的接口数据已经请求成功了 这里我们把接口地址故意写错试试可以看到如下的效果还不错 API接口统一管理
在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口
统一管理我们项目用户的相关接口
// 统一管理我们项目用户的相关接口
import http from /utils/http
import type { loginForm, loginResponseData, userResponseData } from ./type
// 统一管理接口
enum API {LOGIN_URL /user/login,USERINFO_URL /user/info,
}
// 暴露请求函数
// 登录接口的方法
export const reqLogin (data: loginForm) http.postany, loginResponseData(API.LOGIN_URL, data)// 获取用户信息接口方法
export const reqUserInfo () http.getany, userResponseData(API.USERINFO_URL)
登录接口需要携带参数ts类型
// 登录接口需要携带参数ts类型
export interface loginForm {username: stringpassword: string
}
interface dataType {token: string
}
// 登录接口返回数据类型
export interface loginResponseData {code: numberdata: dataType
}
interface userInfo {userId: numberavatar: stringusername: stringpassword: stringdesc: stringroles: string[]buttons: string[]routes: string[]token: string
}
// 定义服务器返回用户信息相关数据类型
interface user {checkUser: userInfo
}
export interface userResponseData {code: numberdata: user
}
当然后期我们还需要其他的接口这里仅仅作为一个展示接下来进行接口测试 全局组件封装
在vue3项目有很多组件需要在多个地方进行使用所以我们一般都将其封装成全局组件然而单纯的封装成全局组件的话每次使用还需要额外在每个项目中进行引入就很烦这里我们先将所有的全局进行全局注册这样后面使用的话直接使用我们设置的组件名称即可就不需要一次次再单独的进行引入了如下我们封装一个Loading加载组件为全局组件 封装成全局组件之后我们还需要在入口文件main.js进行一个引入注册 上面index.js代码如下方便大家复制直接使用即可
import { defineAsyncComponent } from vue;
// 获取要注册的全局组件
const components import.meta.glob(./global/*.vue);// 对外暴露插件
export default function install(app: any) {for (const [key, value] of Object.entries(components)) {const name key.slice(key.lastIndexOf(/) 1, key.lastIndexOf(.));app.component(name, defineAsyncComponent(value as any));}
}
然后Loading组件的加载的话大家可以仿照 网站 里面的案例进行使用还是有免费的找找就行 然后这里我们将本次使用的Loading加载组件代码也分享出来供大家使用
templatediv classloaddiv classloadingdiv classvsgsvg viewBox0 0 50 50circle classring cx25 cy25 r20/circlecircle classball cx25 cy5 r3.5/circle/svg/divdiv classtextLoading/div/div/div
/templatestyle langscss scoped
.load {width: 100%;height: 100%;position: absolute;z-index: 3;display: flex;justify-content: center;align-items: center;background-color: rgb(0, 0, 0);.loading {display: flex;flex-direction: column;align-items: center;justify-content: center;.vsg {display: flex;justify-content: center;align-items: center;keyframes spin {to {transform: rotate(360deg);}}svg {width: 3.75em;animation: 1.5s spin ease infinite;}.ring {fill: none;stroke: hsla(106, 97%, 59%, 0.3);stroke-width: 2;}.ball {fill: #00ff85;stroke: none;}}.text {text-align: center;font-size: 16px;background: linear-gradient(to right, #00ff85, #5090ff);background-clip: text;-o-background-clip: text;-ms-background-clip: text;-moz-background-clip: text;-webkit-background-clip: text;color: transparent;}}
}
/style
接下来我们在App.vue组件进行引入loading组件如下 回到浏览器可以看到我们的loading组件已经加载出来了后期可以根据情况使用异步加载的组件或者使用v-if来进行操作博主这里不再赘述 路由配置管理
我们在开始搭建后台项目之前都要仔细考虑一下路由应该如何配置以下是本项目配置路由的详细步骤如果想更加深入了解vue3路由知识推荐参考我之前的文章Vue 3 路由进阶——从基础到高级的完整指南
安装配置路由的第三方包
pnpm install vue-router
安装完路由包之后接下来我们要先创建路由组件因为项目仅仅是一个后台所以我们只需要在src目录下新进views文件再创建3个路由组件即可 创建完路由组件之后接下来开始进行相关router配置
// 通过vue-router插件实现模板路由配置
import { createRouter, createWebHistory } from vue-router
import { constantRoute } from ./routes// 创建路由器
const router createRouter({// 路由模式history: createWebHistory(),routes: constantRoute,// 滚动行为scrollBehavior() {return {left: 0,top: 0,}},
})
export default router
这里我单独将routes的属性对象抽离出一个js文件出来 便于后期的维护代码如下
// 对外暴露路由(常量路由)
export const constantRoute [{path: /login,name: login, // 命名路由component: () import(/views/login/index.vue),meta: {title: 登录页面,},},{path: /,name: home,component: () import(/views/home/index.vue),meta: {title: 后台页面,},},{path: /404,name: 404,component: () import(/views/404/index.vue),meta: {title: 404界面,},},{path: /:pathMatch(.*)*,name: any,redirect: /404,},
]
接下来在入口文件 main.ts 处进行路由router的挂载 如果想把写好的路由进行展示的话需要通过 router-view 作为路由出口路由匹配到的组件将进行响应的渲染这里在App根组件上进行展示 最终呈现的效果如下所示 store仓库配置
接下来我们需要对我们项目进行一个仓库管理这里用到了pinia状态管理工具不了解pinia的朋友推荐看一下我之前讲解的文章探索PiniaVue状态管理的未来 本项目就不再着重讲解其具体知识了。具体讲解如下
终端执行如下命令安装pinia仓库
pnpm install pinia
在src目录下新建store文件夹文件夹下新建 index.ts 文件暴露如下代码
// 设置pinia仓库
import { createPinia } from pinia
const pinia createPinia()
// 对外暴露入口文件需要安装仓库
export default pinia
在main.ts入口文件出进行pinia的挂载
import { createApp } from vue
import reset.css
import App from ./App.vue
// 配置国际化
import ElementPlus from element-plus
import zhCn from element-plus/es/locale/lang/zh-cn
// 引入自定义插件对象注册整个项目的全局组件
import globalComponents from /components
// 导入路由配置
import router from /router
// 导入仓库
import pinia from /storecreateApp(App).use(ElementPlus, { locale: zhCn }) // 配置中文国际化.use(globalComponents) // 安装全局路由组件.use(router) // 安装路由.use(pinia) // 安装仓库.mount(#app)
接下来在store中新建文件夹modules用于存储仓库文件在该文件夹创建一个login.js文件用来存储登录相关数据这里采用组合式API的写法如下案例
import { defineStore } from pinia;
import { ref } from vueexport const useMemberStore defineStore(login, () {const profile ref();const setProfile (val: number) {profile.value val;}const clearProfile () {profile.value undefined}return { profile, setProfile, clearProfile }
})
git管理配置
接下来我们需要对我们上面撰写的项目初始化模板进行一个git上传进行版本管理操作这里我们使用可视化工具 github desktop 工具进行操作不了解这个工具的参考文章 里面详细记录了这个工具的操作然后我们先创建存储库 点击新建存储库之后这里我们需要给仓库中输入一些相应的信息这里我将之前写的一个项目作为本地路径上传上去然后点击新建存储库即可 然后这里我们点击右上角的发布存储库按钮将本地创建的存储库推送到远程仓库上 点击之后会出现弹框这里我们需要取消勾选让仓库成为公共仓库任何人都能访问到然后点击发布即可 打开github之后就可以看到我们的创建的仓库已经出现了 然后我们把之前写的一个电商项目里面的文件copy一下放到仓库当中去如下github desktop出现了我们文件的差异提示每个更改的文件以及里面具体的内容都能看到 如下 刷新浏览器之后可以看到我们的项目已经全部推送到远程仓库上去了很方便不需要再像git命令行那样一个一个的命令去敲 后期我们在本地进行什么样的修改github desktop工具都能识别到我们哪些地方进行了修改如下我在本地代码文件中main.ts文件下面输入两行空行工具都识别到我的更改是不是很方便 注意如果已经学习过我上一个项目的朋友可能已经了解过项目开始前的一些基础配置觉得我再在新的项目再讲一遍有点啰嗦但是我仍然坚持不厌其烦的去再讲一遍一方面是培养自己的习惯另一方面是想不断加深读者对项目开始前基础配置的熟练程度希望大家能够在小事中获得经验。
