Vue.js基础

最新推荐文章于 2024-09-06 11:32:02 发布

道深

最新推荐文章于 2024-09-06 11:32:02 发布

阅读量211

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_74472152/article/details/140035674

版权

Vue 的基本概念

组件: Vue.js 的核心概念之一，可以理解为自定义元素，具有自己的模板、逻辑和样式。
指令: 在模板中以 v- 开头的特殊属性，用于响应式地作用于 DOM。
Vue Router: Vue.js 官方的路由管理器，用于实现单页面应用中的路由跳转。
Vuex: Vue.js 官方的状态管理库，用于集中管理应用的所有组件的状态。

一个简单的 Vue 文件结构示例可以是这样的：

my-vue-app/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── router/
│   │   └── index.js
│   ├── store/
│   │   └── index.js
│   ├── utils/
│   │   └── api.js
│   ├── App.vue
│   └── main.js
├── babel.config.js
├── package.json
└── vue.config.js

这种结构下，App.vue 是根组件，main.js 是入口文件，router 和 store 文件夹分别存放路由和状态管理相关文件，components 和 views 分别存放通用组件和视图组件，assets 存放静态资源，utils 存放工具函数或 API 相关的文件。

Vue 框架的主要部分和文件结构

src 目录:

    assets: 存放静态资源如图片、字体文件等。
    
    components: 存放 Vue 组件，通常按功能或页面划分子目录。
    
    views: 存放视图组件，通常对应于路由的各个页面。
    
    router: 存放 Vue Router 的路由配置文件。
    
    store: 存放 Vuex 状态管理的相关文件。
    
    utils: 存放工具函数或模块。
    
    App.vue: 根组件，所有页面级组件都在这里组合和渲染。
    
    main.js: Vue 应用的入口文件，通常在这里配置 Vue 插件等全局配置。

public 目录:

    存放不需要经过构建的静态资源，如 index.html、favicon.ico 等。

根目录文件:

    package.json: 项目的配置文件，包含依赖、脚本等信息。
    
    babel.config.js: Babel 配置文件，用于转换 JavaScript 新特性的工具。
    
    vue.config.js: Vue CLI 生成的配置文件，用于配置打包、开发服务器等选项。
    
    README.md: 项目的说明文档，通常包含项目介绍、安装方法、使用方法等信息。

Vue 项目文件结构详解

一个典型的 Vue 项目包含以下几个主要部分：

1.src 目录:

assets: 存放项目中使用的静态资源，如图片、字体文件等。

components: 存放 Vue 组件，通常按照功能或页面划分子目录。例如:

components/
├── common/        # 通用组件
│   ├── Button.vue
│   ├── Header.vue
├── pages/         # 页面级组件
│   ├── Home.vue
│   ├── About.vue

views: 存放视图组件，通常对应于路由的各个页面。

router: 存放 Vue Router 的路由配置文件。

store: 存放 Vuex 状态管理的相关文件。

utils: 存放工具函数或模块，如 API 请求等。

App.vue: 根组件，所有页面级组件都在这里组合和渲染。

main.js: Vue 应用的入口文件，通常在这里配置 Vue 插件等全局配置。

2.public 目录:

存放不需要经过构建的静态资源，例如 index.html、favicon.ico 等。

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Vue App</title>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

3.根目录文件:

    package.json: 项目的配置文件，包含依赖、脚本等信息。

    babel.config.js: Babel 配置文件，用于转换 JavaScript 新特性的工具。

    vue.config.js: Vue CLI 生成的配置文件，用于配置打包、开发服务器等选项。

    README.md: 项目的说明文档，通常包含项目介绍、安装方法、使用方法等信息。