硅胶模具技术支持东莞网站建设,个人网站设计规划,企业策划案例,石家庄做网站和宣传的1.项目搭建 利用vitets框架进行搭建 npm create vite 启动项目 npm run dev 2.项目配置
①运行项目#xff0c;浏览器自动打开
package.json scripts: {dev: vite --open,}
②配置src文件夹的别名
在根目录下配置tsconfig.json文件
…1.项目搭建 利用vitets框架进行搭建 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文件夹
1api文件夹
封装请求接口分为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,});
};2components文件夹
放置非路由组件按板块细分文件夹每个文件夹封装对应index.vue文件
3pages / views文件夹
放置非路由组件可在路由组件配置当跳转对应路由时显示
4router文件夹
配置相对应路由
// 配置路由
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;5stores文件夹
包含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
