1.项目搭建
利用vite+ts框架进行搭建
npm create vite
启动项目
npm run dev
2.项目配置
①运行项目，浏览器自动打开
package.json
"scripts": {"dev": "vite --open",}②配置src文件夹的别名
在根目录下配置tsconfig.json文件
{"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { //路径映射，相对于baseUrl"@/*": ["src/*"] }}
}③安装scss
npm install -D sass
④跨域请求配置
在根目录下配置vite-config.ts文件
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve("./src"), // 相对路径别名配置，使用 @ 代替 src},},server: {host: "localhost",port: 51741,proxy: {"/api": {// 实际请求地址target: " http://xxx",// 是否允许跨域，在本地会创建一个虚拟的服务器// 然后发送请求数据changeOrigin: true,ws: true,// rewrite: (path) => path.replace(/^\/api/, ""),},},},
});3.项目框架
①main.ts入口文件
// 创建App
import App from "./App.vue";
const app = createApp(App);// 引入路由
import router from "./router";
app.use(router);// 引入仓库
import pinia from "./stores";
app.use(pinia);// 全局组件注册，以TypeNav为例
import TypeNav from "@/components/TypeNav/index.vue";
app.component("TypeNav", TypeNav);// App绑定
app.mount("#app");②public文件夹
放置静态资源，css样式可在index.html中link引入
③src文件夹
1）api文件夹
封装请求接口，分为request.ts（封装拦截器）和index.js（封装接口，可进行二次拆分）
// request.ts// 对于axios进行二次封装
import axios from "axios";
import { error } from "console";
// 引入进度条
import nprogress from "nprogress";
import "nprogress/nprogress.css";const request = axios.create({// 基础路径，发请求时，路径出现apibaseURL: "/api",// 请求超时时间timeout: 5000,
});// 请求拦截器：发送请求前进行检测处理
request.interceptors.request.use((config) => {nprogress.start();return config;
});// 相应拦截器：服务器返回数据后进行检测处理
request.interceptors.response.use((res) => {nprogress.done();return res.data;},(error) => {return Promise.reject(new Error("faile"));}
);export default request;
// index.ts// 对API进行统一管理
import request from "./request";export const reqCategoryList = () => {return request({url: "/product/getBaseCategoryList",method: "get",});
};
2）components文件夹
放置非路由组件，按板块细分文件夹，每个文件夹封装对应index.vue文件
3）pages / views文件夹
放置非路由组件，可在路由组件配置，当跳转对应路由时显示
4）router文件夹
配置相对应路由
// 配置路由
import { createRouter, createWebHashHistory } from "vue-router";//引入路由组件
import Home from "@/pages/Home/index.vue";
import Search from "@/pages/Search/index.vue";let router = createRouter({history: createWebHashHistory(),routes: [{path: "/home",component: Home,meta: {show: true,},},{path: "/search",component: Search,meta: {show: true,},name: "search",}],scrollBehavior() {return {left: 0,top: 0,};},
});export default router;
5）stores文件夹
包含index.ts文件夹
import { createPinia } from "pinia";let pinia = createPinia();export default pinia;
每个板块再按需制定仓库
import { defineStore } from "pinia";export let useSearchStore = defineStore("SearchStore", {state: () => {return {count: 33,};},actions: {add() {this.count = this.count + 1;},},
});export default useSearchStore;
4.部分功能实现
1.路由跳转
1）编程式导航路由跳转
采用router-link的方式，添加to+地址
2）编程时导航路由跳转
// 方式一
const $router = useRouter()
$router.push('字符串跳转')// 方式二
const $router = useRouter()
$router.push('{"name":"search"},"query":{"id":"id"}')2.事件委托
采用事件委托方式，给父组件添加点击按钮，给子组件添加自定义标签
获取自定义标签进行判断，注意标签都是小写形式！！
let element = event.target// 获取当前事件的节点，需带有data-categoryname则是a标签// 节点有dataset属性，可以获取当前节点自定义属性与属性值let { categoryname, category1id, category2id, category3id } = element.dataset
)
