我只是使用命令行(CLI)来初始化Vue.js项目。CLI创建了src/components和src/views文件夹。
我已经有几个月没有使用Vue项目了,文件夹结构对我来说似乎是新的。
用Vue -cli生成的Vue项目中的视图和组件文件夹有什么区别?
我只是使用命令行(CLI)来初始化Vue.js项目。CLI创建了src/components和src/views文件夹。
我已经有几个月没有使用Vue项目了,文件夹结构对我来说似乎是新的。
用Vue -cli生成的Vue项目中的视图和组件文件夹有什么区别?
当前回答
您可以将视图视为页面和组件之类的可重用代码块,可以在任何页面或组件中使用(两者都是Vue文件,这些术语只是为了演示)
其他回答
通常可重用视图建议放在src/components目录下。例如页眉,页脚,广告,网格或任何自定义控件喜欢样式的文本框或按钮。可以在视图中访问一个或多个组件。
视图可以有组件,视图实际上是通过导航url访问的。它们通常放在src/views中。
请记住,您并不是必须通过url访问组件。你可以自由地向router.js添加任何组件并访问它。但如果你打算这样做,你可以把它移动到src/views,而不是放在src/components中。
组件是类似于asp.net web表单的用户控件。
它只是为了更好地维护和可读性而构建代码。
首先,src/components和src/views这两个文件夹都包含Vue组件。
关键的区别在于一些Vue组件充当路由的视图。
在Vue中处理路由时,通常使用Vue Router,定义路由是为了切换< Router -view>组件中使用的当前视图。这些路由通常位于src/router/routes.js,在这里我们可以看到如下内容:
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
export default [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
component: About,
},
]
位于src/components下的组件不太可能在路由中使用,而位于src/views下的组件将被至少一条路由使用。
Vue CLI的目标是成为Vue的标准工具基线 生态系统。它确保了各种构建工具顺利地协同工作 使用合理的默认值,这样您就可以专注于编写应用程序,而不是 花几天时间和配置争论。与此同时,它 仍然提供了调整每个工具配置的灵活性 弹射的需要。
Vue CLI旨在快速开发Vue.js,它使事情变得简单并提供灵活性。它的目标是使具有不同技能水平的团队能够建立一个新项目并开始工作。
归根结底,这是一个便利性和应用程序结构的问题。
有些人喜欢把视图文件夹放在src/router下面 这是企业的样板。 有些人称之为页面而不是视图。 有些人将所有组件都放在同一个文件夹下。
选择最适合您正在处理的项目的应用程序结构。
您可以将视图视为页面和组件之类的可重用代码块,可以在任何页面或组件中使用(两者都是Vue文件,这些术语只是为了演示)
不同之处在于它们所起的作用。视图用于正确地表示您的页面,以便您可以来回导航,而组件是组成页面的部分
这两个文件夹基本上是相同的,因为它们都包含组件,但Vue的美学是将作为页面(路由到类似的页面进行导航)的组件保存在/views文件夹中,而可重用的组件(如表单字段)保存在/components文件夹中。