vue目录结构梳理(详细 图文混排)

最新推荐文章于 2022-07-31 17:49:32 发布
最新推荐文章于 2022-07-31 17:49:32 发布
阅读量1.3k 收藏 2
点赞数 2
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48594741/article/details/118394237
版权
本文介绍了如何梳理和优化Vue项目的目录结构，通过删除不必要的组件和视图，整理router/index.js文件，并对Home.vue进行内容替换。在删除About.vue后，需要更新相关路由配置。同时展示了删除Home.vue中默认内容并替换为自定义模板的过程，强调了修改name属性的重要性。
摘要由CSDN通过智能技术生成

目录结构梳理

用idea或VS code打开创建的项目，我们看到的目录结构如图所示我们将删除不需要的文件以目录结构整洁
在这里插入图片描述
我们将直接删除compoents目录和views目录中的About.vue，(因为用不到)。删除完毕后的目录结构如下图所示，此时再回到浏览器的GUI界面，我们会发现，编译报错。所以我们还得去整理并删除相关文件中的无用内容
在这里插入图片描述
先来整理router/index.js文件，因为我们刚才把views/About.vue删除掉了。再次文件中仍有导入，所以要把相关导入（下图蓝色部分）直接删除掉。这样index.js文件中就ok了
在这里插入图片描述
再来看Home.vue
这个文件当中基本上都是初始化时自带文字，我们肯定用不到，所以直接ctrl+A
全选删除，然后将我们的页面模板全选粘贴过来

最低0.47元/天 解锁文章
一只慵懒的程序喵
关注
【前端框架开发 | Vue.js | 第二篇】Vue.js目录结构及模板语法
等风来
09-03 1万+
Vue.js 的目录结构可以根据项目的规模和需求而有所不同，但通常遵循一种基本的约定和最佳实践。当 Vue 实例挂载到 #app 容器中时，Vue.js 会监听 message 数据属性的变化并将其更新到模板中。这意味着，如果 message 的值发生变化，对应的``元素也会随之更新以显示最新的值。v-bind 指令用于动态地将表达式的值绑定到 HTML 元素的属性上。它的主要作用是在模板中实现数据和属性的绑定。
vue2.0详细目录结构注解
删库跑路
06-04 2740
sell # 项目根目录名称 —-build #(webpack配置相关) —-config #(webpack配置相关) —-node_modules #npm install 安装的依赖代码库 —-src #存放项目源码 —-static #存放第三方静态资源 ————.gitkeep #为了当static目录为空Git也可以
图解Vue.js项目及其目录结构
我为编程狂,我为外语狂
08-15 4977
  项目包含： 基础库: vue.js、vue-router、vuex、whatwg-fetch 编译/打包工具：webpack、babel、node-sass 单元测试工具：karma、mocha、sinon-chai 本地服务器：express build：最终发布的代码的存放位置。   config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。   node_mod...
vue项目的目录结构图及目录详解
Ays的博客
03-31 3458
简单介绍目录结构 build目录是一些webpack的文件，配置参数什么的，一般不用动 config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹，基本上文件都应该放在这里。 —assets 资源文件夹，里面放一些静态资源 —components这里放的都是各个组件文件 —App.vue App.vue组件 —mai...
vue实现图文混合输入
One_And_One的博客
06-09 1527
需求 实现的原理 1.利用div的contenteditable属性,让div可编辑 2.document.execCommand（）方法插入图片 实现过程 html <!-- 我这里是监听鼠标右键 --> <div class="input-panel" ref="msgInputContainer" @contextmenu.prevent="mouseclick()" contenteditable="true" spellcheck="false" style="
Linux笔记梳理：目录结构
唯柳独斓
04-17 228
一。目录结构（命令：ls查看目录结构） 目录解释： /bin: 该目录存放常用命令（Binary） /boot: 该目录存放Linux启动核心文件（包含连接文件及镜像文件） /dev: 该目录存放Linux...
图文混排的实现
weixin_42433480的博客
06-14 2505
下载地址 : https://github.com/AlanZhangQ/CoreTextLabel.git, 求Star..如果有好的建议或者意见，请留言指出，谢谢 1 .普通图片文字混排 _coretextLabel = [[MYCoreTextLabel alloc]init]; _coretextLabel.delegate = self; _coreTextLabel...
Vue实现图片与文字混输效果
10-15
用多了 JQuery ，习惯了使用JQuery的API操作 DOM ，几乎忘记了原生JS对DOM操作，今天在项目中遇到了文字和图片混输的情况，小编给大家分享Vue实现图片与文字混输效果，感兴趣的朋友一起看看吧
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
JZevin的博客
10-15 9429
Vue项目的详细目录结构解析
vue.js 体系结构导图
07-09
vue.js 体系结构导图/vue快速入门/vue前端技术前瞻/Vue.js 2.0 参考
Vue.js知识结构图.jpg
04-08
Vue.js知识结构图从基础、工具、生态、相关知识四个方面梳理了Vue.js框架所涉及的的所有知识点。
vue-quill-editor 整合上传图片 图片大小 附件 图文混排 数据回显等问题
Avadakur的博客
09-01 2919
根据网上的各类教程总结了一下 再根据我自己项目的需求 进行添加和修改 实现的图如下 首先安装需要的插件 cnpm install vue-quill-editor -S cnpm install quill -S cnpm install quill-image-resize-module -S cnpm install quill-image-drop-module -S 在project.config.js下写入如下代码 const webpack = require("webpack") const
vue项目开发基本目录结构
weixin_34124651的博客
10-31 250
§ 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录（开发都在这里进行） │ ├── assets/ # 放置需要经由 Webpack 处理的静态文件 │ ├─...
Android开发技巧：像QQ一样输入表情图像
weixin_34194379的博客
10-06 172
本文截选自《Android开发权威指南》，转载请注明作者和出处！ EditText和TextView一样，也可以进行图文混排。所不同的是，TextView只用于显示图文混排效果，而EditText不仅可显示， 也可混合输入文字和图像，让我们先回顾一下图5.2所示的QQ聊天输入框，在输入框中可以同时输入文字和表情图像。实际上，这种效果在Android SDK中只需要几行代码就可以实现。为了使读者更...
vue目录结构
翱翔-蓝天
07-31 144
src/views目录存放视图相关页面，@/views/vod/subject/list与\src\views\vod\subject\list.vue对应。src/api目录存放前后端数据交互接口。src/router目录存放前端路由信息。
Vue 基础结构图
lgt13579的专栏
01-14 2470
vue-cli 项目结构目录简介
热门推荐
chao2458的博客
07-30 1万+
上一篇文章介绍了怎样使用vue-cli搭建一个项目 ，那么这篇来大致的介绍一下整个项目的目录。 首先来看一下整个结构目录   接下来从上到下的看一下每个文件以及文件是干嘛的    build 文件夹 及 子目录 这里面是一些webpack的配置，主要用于项目打包时的一些设置。这里不去更详细的深入，相关的文件及配置会在后面用到时在详细的介绍。 config 文件 及 子目录...
Vue学习笔记 —— Vue项目目录结构（思维导图）
weixin_43340295的博客
09-24 355
Vue+webpack项目配置：打造易维护的目录结构
"本文将详细讲解如何在Vue和webpack项目中构建一个利于维护的目录结构，帮助开发者在项目开发过程中保持代码的清晰和组织性。" 在开发Vue.js项目时，选择一个良好的目录结构至关重要，它能提升项目的可读性和可维护...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只慵懒的程序喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值