web前端-熟悉vue目录结构进行简单开发

最新推荐文章于 2024-05-13 11:14:34 发布

炸天帮陈长生

最新推荐文章于 2024-05-13 11:14:34 发布

阅读量595

点赞数

本文链接：https://blog.youkuaiyun.com/qq_16739131/article/details/90645298

版权

这篇博客主要介绍了Vue项目的目录结构，包括webpack配置、src资源文件、静态资源、单元测试、项目入口等。重点讲解了如何在src目录下创建新页面，包括在components中新建.vue文件，编写template、script和style内容。同时，还阐述了注册路由的过程，通过编辑router/index.js文件添加新路由。最后，文章分析了代码结构，指出main.js是程序入口，而App.vue作为主程序页面，承载所有页面的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录结构

首先对默认构造的vue项目就行分析
目录结构

从上到下说明：

webpack相关配置
config vue基本配置文件
node_modules library root 用node安装的依赖包
src 资源文件主要在这里面写代码
static 静态资源图片之类的
test 单元测试
index.html 页面入口
package.json 项目基本信息，需要的模块等

针对src文件夹详细说明
src下

assets 静态资源可以存放css，js，图片…
components 公用组件编写的地方
router 路由文件夹配置页面跳转
app.vue是项目的主组件，所有页面都是在app.vue下切换的
main.js 页面程序入口文件，加载各种公共组件

添加一个新页面

在components创建一个.vue文件
从 SayHello.vue

<template>
    
</template>

<script>
export default {
  name: 'SayHello'
}
</script>

<style scoped>

</style>

template 标签里写html模板代码
script 标签里写js代码以及定义vue
style 写css代码的

注册路由

编辑index.js文件
添加内容

    {
      path: '/new',
      name: 'NewPage',
      component: newPage
    }

最后访问http://localhost:8080/new就可以访问到新添加的页面

代码分析

jindex.html作为整个vue程序的主页，其程序主体都在

<div id="app"></div>

在看到main.js文件，其中

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

定义的实例正是index文件中的app

这个Vue程序是整个程序的主体，其他所有页面都在这个程序内。

App,vue就是一个主程序页面

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <img src="./assets/logo.png">
  </div>
</template>

 <router-view/>

指向的就是HelloWorld.vue