这个模块主要是介绍从零开始搭建项目的一些操作，包含一些前端常用的配置，这里只是一部分，会在后续的文章中逐步进行补充和完善
一、创建项目
在项目路径下使用以下命令生成前后端项目
npm create vite
输入项目名称，框架选择Vue，然后选择TypeScript
生成的项目执行以下命令进行运行
# 安装依赖
npm install
# 运行
npm run dev
然后打开浏览器访问生成的地址，能打开如下页面即可
二、常用配置
1、设置打开启动服务后自动打卡浏览器
找到项目的package.json文件，修改启动脚本，增加–open参数，如下图，重启后即可自动打开浏览器页面
2、配置src项目目录别名
可以在引用组件过程中可以使用@进行引用，简化操作，
首先安装对应的依赖组件
npm install @types/node
然后在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')},dedupe: ['vue']}
})
在tsconfig.json文件中增加如下内容：
{"files": [],"references": [// { "path": "./tsconfig.app.json" },// { "path": "./tsconfig.node.json" }],"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["./src/*"]}},"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
}vite-env.d.ts文件中增加如下内容：
// 配置这个文件是 解决错误：找不到模块“@/views/Login.vue”或其相应的类型声明。ts(2307)
// 这段代码告诉 TypeScript，所有以 .vue 结尾的文件都是 Vue 组件，可以通过 import 语句进行导入。这样做通常可以解决无法识别模块的问题。
declare module "*.vue" {import { Component } from "vue";const component: Component;export default component;}
如下图所示，如果references中的内容报错，重启vscode即可
然后将APP.vue文件中引用的HelloWorld.vue改造成从@符号中读取，重启任务依然可以访问
3、添加路由组件
安装路由组件
npm install vue-router@4
在项目src目录下新建router文件夹，并创建index.ts文件，并添加如下内容
import { createRouter, createWebHashHistory } from 'vue-router'
// createRouter方法用于创建路由实例，可以管理多个路由
export default createRouter({history: createWebHashHistory(),routes: [// 路由页面内容]
})
在main.ts中注册路由组件
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入路由组件
import router from '@/router'let app = createApp(App)
app.use(router)
app.mount('#app')测试路由功能，在src下新建两个文件夹，分别是home和about，并分别创建两个index.vue文件，内容随便写，区分开即可
home下的index.vue
<template><div>这是Home页面</div>
</template><script setup lang="ts"></script><style scoped></style>
about下的index.vue
<template><div>这是about页面</div>
</template><script setup lang="ts"></script><style scoped></style>
在路由配置中添加路由
import { createRouter, createWebHashHistory } from 'vue-router'
// createRouter方法用于创建路由实例，可以管理多个路由
export default createRouter({history: createWebHashHistory(),routes: [// 路由页面{path: '/home',component: () => import('@/home/index.vue')},{path: '/about',component: () => import('@/about/index.vue')},{// 默认主页跳转路由path: "/",redirect: '/home'}]
})
修改App.vue文件删除其他组件并添加路由组件
<template><div><router-view /></div>
</template>
<script setup lang="ts"></script>
<style scoped></style>访问主页即可跳转到home页面
4、封装pinia
首先安装pinia
npm install pinia
在src下新建store文件夹，并新建index.ts，代码内容如下：
import { createPinia } from "pinia";
export default createPinia();
由于我们的store要分模块存储数据，因此在store文件夹下新建modules文件夹，新建一个user.ts文件来存放用户相关的数据，如下图所示
代码如下：
import { defineStore } from "pinia"; const useUserStore = defineStore('user', {state: () => {return { }},actions: { },getters: {},
})export default useUserStore;
5、封装操作操作token工具类util
安装js-cookie模块
npm install --save js-cookienpm install --save @types/js-cookie
在utils下新建auth.ts文件内容如下:
import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export const getToken = () => {return Cookies.get(TokenKey)
}export const setToken = (token) => {return Cookies.set(TokenKey, token)
}export const removeToken = (token) => {return Cookies.remove(TokenKey)
}如果上面的代码第一行Cookies报红，就在tsconfig.json 中设置 compilerOptions.esModuleInterop 为 true即可
{"files": [],"references": [// { "path": "./tsconfig.app.json" },// { "path": "./tsconfig.node.json" }],// 作用：让@具有提示效果"compilerOptions": {"esModuleInterop": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]}},"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
}
