上一章我介绍了Vue3-TS-Vite-pnpm个人博客-项目结构的规划本篇文章就开始创建项目并且安装一些非常重要的配置。通过vite脚手架搭建项目为自己项目确定名称vue3ts-blog-dome# 安装命令 pnpm create vite vue3ts-blog-dome --template vue-ts # 进入框架文档 cd vue3ts-blog-dome # 安装框架依赖 pnpm install 或 pnpm i # 初次运行项目 pnpm dev 获得此链接并点击 http://localhost:5173/以管理员身份运行cmd进行操作操作步骤如图进入链接后如下图显示及证明安装成功。安装重要配置-安装顺序可根据自身喜好调整一、配置路径别名# 安装 path 和 types/node pnpm install path --save pnpm install types/node --save-dev // 配置有就可以不要重复安装1.在框架vite.config.ts文件中进行相关配置具体代码小编直接写好可以全部复制到该文件内。# vite.config.ts import { defineConfig } from vite; import vue from vitejs/plugin-vue; import path from path; // https://vite.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { : path.resolve(__dirname, src) }, }, });2.找到tsconfig.app.json文件并进行相关配置代码位置也已经写好可以直接全部复制到该文件内。# tsconfig.app.json { extends: vue/tsconfig/tsconfig.dom.json, compilerOptions: { tsBuildInfoFile: ./node_modules/.tmp/tsconfig.app.tsbuildinfo, types: [vite/client], /* Linting */ strict: true, noUnusedLocals: true, noUnusedParameters: true, erasableSyntaxOnly: true, noFallthroughCasesInSwitch: true, noUncheckedSideEffectImports: true, baseUrl: ., // 设置基路径为 tsconfig.json 所在目录 paths: { /: [src/] } }, include: [src/**/*.ts, src/**/*.tsx, src/**/*.vue] }以上配置路径别名就已经完成了当我们在使用的过程中习惯用/的形式来让整体代码的美观得到提升同时简化路径个人认为非常实用。二、main.ts格式调整在没有引入任何工具时直接将以下代码直接复制即可到本片文章后面安装路由时再分享如何书写。# main.ts import { createApp } from vue; import ./style.css; import App from ./App.vue; const app createApp(App); app.mount(#app);三、安装 sass# 安装 sass pnpm install sass安装完成后我们暂时不用去管它小编会单独拿出来一个章节来说如何重置样式等内容。四、安装路由vue-router# 安装路由 vue-router pnpm install vue-router4首先第一篇文章中我们将结构进行了细致地规划没有印象的小伙伴可以点击查看初学者系列-个人博客丨Vue3-TS-Vite-pnpmA01-项目结构规划1.我们在src文件下创建router文件夹并创建文件名为index.ts的文件并在该文件中配置。# index.ts import { createRouter, createWebHistory } from vue-router; import HomeView from /views/home/index.vue; import AboutView from /views/about/index.vue; const router createRouter({ history: createWebHistory(), routes: [ { name: home, path: /, component: HomeView }, { name: about, path: /about, component: AboutView }, ], }); export default router;2.在main.ts中安装路由此时我们已经将main.ts文件格式进行微调所以在安装时就要按照下面的方式哦~# main.ts import { createApp } from vue; import ./style.css; import router from ./router; import App from ./App.vue; const app createApp(App); app.use(router); app.mount(#app);3.把跟组件App.vue进行重新编辑,加上router-view /或router-view/router-view# App.vue template router-view / /template4.不要以为现在路由就配置完了喽接下来还需要在src文件下创建views文件夹并分别创建home和about两个文件夹并在两个文件夹下分别创建一个index.vue文件除了测试路由是否安装正常外也是我们博客必备的两个组件。同时要给两个文件home/index.vue 和 about/index.vue 编辑添加简单内容# home/index.vue template p首页入口主布局容器、展示文章列表等/p /template # about/index.vue template p作者介绍、博客说明等内容/p /template配置完成后我们重新通过端口命令启动项目运行命令pnpm dev 丨我们将看到两个已经配置完成的两个链接界面就说明我们已经配置成功啦http://localhost:5173/ 点击该链接显示如图http://localhost:5173/about 点击该链接显示如图五、安装 Element Plus 与图标全局安装根据需求而定1.安装 Element Plus 是根据官网全局安装进行的如果有小伙伴想按需安装的话可以到Element Plus官网自行配置如有小伙伴不想到官网看的话可以暗示我哈# 安装 Element Plus 与图标 pnpm install element-plus pnpm install element-plus/icons-vue2.在main.ts中安装Element Plus和图标小伙伴可以直接全部复制因为上面路由也是配置好的。# main.ts import { createApp } from vue; import ./style.css; import router from ./router; import ElementPlus from element-plus; import element-plus/dist/index.css; import * as ElementPlusIconsVue from element-plus/icons-vue; import App from ./App.vue; const app createApp(App); for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); } app.use(router); app.use(ElementPlus); app.mount(#app);自此以上重要的配置基本已经完成肯定有小伙伴想看看配置完成以后的效果所以小编就给各位做写测试同时小伙伴可以直接使用找到熟悉的成就感我们在src/views/home/index.vue中添加代码如下template p首页入口主布局容器、展示文章列表等/p el-button typeprimaryPrimary/el-button el-button typesuccessSuccess/el-button el-button typeinfoInfo/el-button el-button typewarningWarning/el-button el-button typedangerDanger/el-button /template展示效果请欣赏并为自己鼓掌庆祝吧