用户登录

项目下面的这个 src 目录里的结构我们可以自己根据实际需求来定义。现在你看到的是用 vue-cli 创建的默认的项目的结构,这个结构我们可以随便改。

在默认的这个项目里面有一个 assets,里面是应用需要的一些静态资源,这里有一个图片 logo.png。 components 里面,有一个 HelloWorld 组件,Vue 框架支持我们创建单文件的组件,这些组件文件的后缀就是这个 .vue。

你可以在 VSCode 编辑器里面安装一个叫 vetur 的扩展,这样会高亮显示 vue 类型的文件里的代码,另外还提供了一些其它的功能,可以辅助我们开发 vue 应用。

在用 Vue CLI 创建 Vue 项目的时候,我们选择使用了 vue 的 router 还有 vuex,所以默认创建的这个项目里面,会有一个 router 目录,还有一个 store 目录。

在 rotuer 里面定义的是应用的路由,store 里的东西就是应用的 store。 在后面的课程里我们会详细再介绍 vue 的 router 还有 vuex 的 store。

views 下面有个 .vue 文件,它们其实也是 Vue 的组件,一个叫 About ,还有一个是 Home 。

在 src 的根目录下面,有一个 App.vue,它是应用的主组件,创建 Vue 应用的时候,要告诉 Vue 框架,应用的主组件是谁。

main.ts 就是应用的入口文件,你会发现,这里先导入了一些东西,比如从 vue 里面,创建了这个 createApp,创建 Vue 应用的时候,会用到这个 createApp。

下面又导入了应用的主组件,App,还有应用的路由,还有 Store 。 然后用 createApp 创建了一个 Vue 应用,创建这个应用的时候,把应用的主组件告诉给这个 createApp,这里就是 App 组件。

然后又在这个应用里添加了一些东西,比如说应用的 Store,还有应用的路由。最后用 mount 这个方法,把应用挂载到了页面的某个地方。这里就是带 app 这个 id 的元素。

也就是在 public 目录下面的 index.html 这个文件里的这个带 app id 的 div 元素。

了解 Vue 应用的结构《 Vue.js 前端应用 #1:理解框架 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点