Vue项目三、项目中碰到的问题详解

一、组件的划分创建

方法一:

把页面上需要复用的模块,拆分成组件。比如,页面的header、footer、面包屑、弹出框等拆分成组件。所以在src中应该有一个文件夹(components)专门放这些会复用的组件。

页面中不被复用的模块,比如content主体内容。会被做为一个主页面,在这个主页面中会去导入可复用组件组成一个可以被用户浏览的完整网页。所以在src中应该有一个文件夹(views)专门放这些主体页。

方法二:

把页面上所有的模块能拆分的都拆分成小组件。那些复用的组件,比如页面的header、footer、面包屑、弹出框等,放入一个文件夹(components)。

其它拆分的小组件,按照页面的名称的不同,放入以页命名不同的文件夹,过程:创建一个文件夹(pages),之后创建以页命名不同的文件夹。比如Home页,除了header、footer,可以把代表主体内容的,展示1内容、展示2内容、展示3内容等放入一个文件夹(home),home中再创建一个Home.vue把这些组件导入进来,组成一个可以被用户浏览的完整网页。

二、关于项目静态资源的存放

src目录中有assets文件夹。再src目录外有一static文件夹。那项目中引用的静态资源文件应该如何选择存放位置呢?

assets:资源目录(放置一些图片等),这里的资源会被webpack构建,更倾向于放置组件(那些可以被复用的模块)中引用的资源(css及img),如果图片足够小会被打包成Base64

static:纯静态资源(不会变动的资源,如图片、字体),不会被webpack构建,直接被复制到打包目录。页面中(不被复用的vue页面)应用的资源放在这里。

持续更新中......

原文地址:https://www.cnblogs.com/qdwz/p/10840174.html

时间: 2024-10-10 16:14:37

Vue项目三、项目中碰到的问题详解的相关文章

Android的学习之路(三)项目的启动过程和安装过程详解

应用的安装和启动过程: 安装:第一步:java的编译器会把这个.java文件编译成.class文件 第二部:Android的SDK提供了一个dx工具,这个工具把.class文件转义成.dex文件 第三部:打包操作,把.dex文件和资源文件进行打包,打包成一个压缩文件,然后进行签名.最后就打包成为了.apk文件 第四部:调用adb指令:adb install c:/x.apk安装到模拟器 具体过程:.JAVA---->.class--.dx-->.dex--->打包签名--->.ap

20155326《网络对抗》免考项目—— 深入恶意代码之恶意代码详解

20155326<网络对抗>免考项目--深入恶意代码之恶意代码详解 什么是恶意代码 恶意代码是一种程序,它通过把代码在不被察觉的情况下镶嵌到另一段程序中,从而达到破坏被感染电脑数据.运行具有入侵性或破坏性的程序.破坏被感染电脑数据的安全性和完整性的目的. 恶意代码生命周期 攻击目标: 个人计算机 服务器 移动智能终端 手机.平板等 智能设备 特斯拉汽车.智能家居.智能手表等 通信设备 路由器.交换机等 安全设备等 防火墙.IDS, IPS. VDS 攻击目标范围: 定点攻击 邮件.IP.域名.

unity中camera摄像头控制详解

目录 1. 缘起 2. 开发 2.1. 建立项目 2.2. 旋转 2.2.1. 四元数 2.3. 移动 2.3.1. 向量操作 2.4. 镜头拉伸 2.5. 复位 2.6. 优化 1 缘起 我们的产品是使用unity开发水利BIM(水利建筑信息模型),项目中需要控制摄像 头对模型进行360度查看,请注意所有操作都是移动摄像头,不是移动模型.摄 像头能进行移动.旋转.改变焦距操作,类似于SketchUp的控制操作: 摄像头移动时,根据当前旋转方向(Rotation)进行移动 摄像头距离模型越远,摄

JDK中的URLConnection参数详解

JDK中的URLConnection参数详解 来自:http://www.blogjava.net/supercrsky/articles/247449.html 针对JDK中的URLConnection连接Servlet的问题,网上有虽然有所涉及,但是只是说明了某一个或几个问题,是以FAQ的方式来解决的,而且比较零散,现在对这个类的使用就本人在项目中的使用经验做如下总结: 1:> URL请求的类别: 分为二类,GET与POST请求.二者的区别在于:      a:) get请求可以获取静态页面

javascript中=、==、===区别详解

javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题,却有着大影响,所以决定深入分析下.1.= 赋值运算符 //例: var n=1; console.log(n);//1 n=n+1; console.log(n);//2 2.== 值比较运算符 值比较运算符在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较. //例: var a=

Mysql中关于 group_concat函数详解

group_concat()主要功能:能将相同的行组合起来 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔符']) 基本查询 Sql代码   select * from aa; +------+------+| id| name |+------+------+|1 | 10||1 | 20||1 | 20||2 | 20||3 | 200 ||3 | 500 |+------+---

VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)

步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" action-data="http%3A%2F%2Fs8.sinaimg.cn%2Fmw690%2F6988593etx6DhZWSOATc7%26690" action-type="show-slide" style=&

iOS中UIWebView的使用详解

iOS中UIWebView的使用详解 一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种: 第一种: - (void)loadRequest:(NSURLRequest *)request; 这是加载网页最常用的一种方式,通过一个网页URL来进行加载,这个URL可以是远程的也可以是本地的,例如我加载百度的主页:     UIWebView * view = [[UIWebView al

delphi中的Format函数详解

首先看它的声明:[[email protected]][@21ki!] function Format(const Format: string; const Args: array of const): string; overload;[[email protected]][@21ki!] 事实上Format方法有两种形式,另外一种是三个参数的,主要区别在于它是线程安全的,[[email protected]][@21ki!]但并不多用,所以这里只对第一个介绍:[[email protect