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

Posted 2021-11-28 qdwz

一、组件的划分创建

方法一：

把页面上需要复用的模块，拆分成组件。比如，页面的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页面）应用的资源放在这里。

 

持续更新中......