Vue项目三、项目中碰到的问题详解
一、组件的划分创建
方法一:
SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。把页面上需要复用的模块,拆分成组件。比如,页面的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页面)应用的资源放在这里。
三、关于项目组件导入资源文件
css导入-->直接可以用import导入。eg:导入base.css。在script中,用 import './../assets/css/base.css' 直接导入。
组件导入-->import NavHeader from '@/components/Header'
注意:import导入文件地址需要加引号(双引号/单引号),import导入文件后,结尾不需要符号(比如,逗号或者分号)
组件导入后,还要定义组件。用components:{Header,Footer}
四:命名
vue的组件的命名支持驼峰命名,不支持连接线命名,使用是用连接线链接名称,包括属性的命名!
Vue局部注册 或者全局注册 组件时,组件定义要用 分隔命名,用驼峰命名是不生效的
如果组件以驼峰式命名,那么导入的时候,需要用分隔命名加载到Dom中,否则不生效
持续更新中......
