当前位置: 首页 > news >正文

vue搭建项目之后的步骤操作

1.创建router文件夹(里面创建index.js),创建views文件夹(创建index页面)

2.删除assets文件夹里面的内容,删除components文件夹

3.安装路由  npm install vue-router

4.router路由下面的index.js书写内容

// 导入路由
import { createRouter, createWebHashHistory } from "vue-router";
// 导入页面
import index from "../views/index.vue";
// 注册
const routes = [{path: "/",name: "index",component: index,}
];
// 路由实例
const router = createRouter({history: createWebHashHistory(),routes, // 所有的路由
});
// 导出
export default router;

5.把App.vue页面里面的内容替换为以下内容

<template><router-view></router-view>
</template><script setup></script><style scoped></style>

6.view文件夹里面的index.vue页面写入基础格式

<template>测试
</template><script setup></script><style scoped></style>

7.在min.js页面内容替换(导入路由+删除引入的css+router挂载)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'// 引入路由
const app = createApp(App)
app.use(router)// 安装路由
app.mount('#app')// 挂载vue实例

最后即可在页面书写内容


http://www.mrgr.cn/news/68371.html

相关文章:

  • easyexcel实现自定义的策略类, 最后追加错误提示列, 自适应列宽,自动合并重复单元格, 美化表头
  • Redis - 数据库管理
  • 【LeetCode】【算法】206. 反转链表
  • 雷池社区版7.1新版本自定义NGINX配置分析
  • 支持高性能结构化数据提取的 Embedding 模型——NuExtract-v1.5
  • 内网环境下CodeGPT代码助手配置
  • 科研——统计 Markdown 字符数量的插件
  • 贝塞尔曲线的超集即对应的数学模型
  • API返回值:代码界的“快递包裹”说明
  • 旅游社交小程序ssm+论文源码调试讲解
  • 深入理解封装与接口:Java程序设计的核心思想与最佳实践
  • C#中日期和时间的处理
  • java开发程序员职业发展的一些思考
  • 【华为机试题】 [Python] 光伏场地建设规划
  • 【算法设计与分析】期末复习
  • ElasticSearch 添加IK分词器
  • 大型语言模型(LLMs)关键技术指南
  • C加加中的结构化绑定(解包,折叠展开)
  • 国标GB28181公网直播EasyGBS国标GB28181设备管理软件支持的监控设备类型
  • 【C++】哈希表封装 unordered_map 和 unordered_set 的实现过程
  • 如何通过执行计划分析优化SQL查询性能——以`TrainOrderChange`表查询为例
  • UE5.4 PCG 复制关卡实例
  • go中的类型断言详解
  • 动态规划28:376. 摆动序列
  • 【EdgeBox-8120AI-TX2】Ubuntu18.04 + ROS_ Melodic + HP60C上手体验
  • Linux系统的文件系统和日志和管理