Vue及项目结构介绍

今天滴学习目标！！！

• 项目结构介绍
• • 1.Vue 项目文件结构
  • 2. 文件结构详解
  • • 2.1 index.html
    • 2.2 src/main.js
    • 2.3 src/App.vue
    • 2.4 src/components/
    • 2.5 src/assets/
    • 2.6 package.json
  • 3. 项目启动

  首先我们先学习 Vue 项目结构，我们创建 Vue 项目时，它会生成一个标准的项目结构。以下是项目结构介绍。后面我们就开始该怎么用 Vue 的指令。

项目结构介绍

1.Vue 项目文件结构

Vue
│
├── node_modules/          # 依赖包
│
├── public/                # 静态资源
│   └── favicon.ico        # 图片资源 ( 网站图标)
│
├── src/                   # 源代码
│   ├── assets/            # 资源模板 (静态资源目录 如：图片、样式等)
│   ├── components/        # 通用组件 (存放 Vue 组件)
│   ├── App.vue            # 根组件 (所有页面的入口)
│   ├── main.js            # 入口 JS 文件 (项目的主入口文件)
│
├── index.html             # 入口 HTML 文件
├── package.json           # 项目的依赖和配置
├── package-lock.json      # 记录了项目中所有依赖的精确版本信息
├── vue.config.js          # Vue 配置文件

大家喜欢哪个嘞？

2. 文件结构详解

2.1 index.html

  在 Vue 项目中，index.html 是项目的入口文件，用于初始化 Vue 应用程序并定义其 HTML 结构。以下是 index.html 在 Vue 项目中的典型代码示例：

DOCTYPE html>  
html lang="en">  
head>  
    meta charset="UTF-8">  
    meta name="viewport" content="width=device-width, initial-scale=1.0">  
    title>Vue Apptitle>  
      
    script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>  
      
      
      
      
      
head>  
body>  
      
    div id="app">div>  
  
      
      
    script src="/dist/build.js">script>  
  
      
      
body>  
html>

关键点说明：

1. DOCTYPE 和 HTML 标签：
   • 声明文档类型，确保浏览器以标准模式渲染页面。
   • 定义 HTML 文档的根元素，并设置语言属性为英语（可以根据需要更改为其他语言）。
2. 头部（head）部分：
   • 设置文档的字符编码为 UTF-8。
   • 设置视口，确保页面在移动设备上正确显示。
   • 设置页面的标题，这将在浏览器的标签页上显示。
   • 引入 Vue 框架和其他必要的库（如 Vue Router），这里以 CDN 方式引入 Vue 为例。
3. 主体（body）部分：
   • 是 Vue 实例挂载的容器，Vue 应用将在这个容器内进行渲染。

   • 引入构建后的 JavaScript 文件（如 /dist/build.js），这个文件通常由 Webpack 等构建工具生成，包含了 Vue 应用的编译结果。
4. 自定义脚本（可选）：
   如果需要在 index.html 中引入自定义脚本，可以在 标签之前添加。

注意：在实际的 Vue 项目中，index.html 的内容可能会根据项目的构建配置和使用的工具链有所不同。例如，如果你使用了 Vue CLI 来创建项目，那么 index.html 文件通常会位于 public 目录下，并且构建工具会自动处理 JavaScript 和 CSS 文件的引用。此外，在开发过程中，你可能会使用热重载（hot-reload）功能来实时查看更改效果，而在生产环境中，构建工具会生成优化后的代码以提高性能。

2.2 src/main.js

  在 Vue 项目中，src/main.js 是项目的入口 JavaScript 文件，它负责初始化 Vue 实例、配置 Vue Router（如果使用）、引入 Vuex（如果使用状态管理）、注册全局组件、安装 Vue 插件以及挂载 Vue 应用到 DOM 元素上。以下是 src/main.js 在 Vue 项目中的典型代码示例：

import Vue from 'vue';  
  

import App from './App.vue';  
  

import router from './router';  
  


  



  


  
new Vue({  
  
  el: '#app',  
    
  
  render: h => h(App),  
    
  
  router,  
    
  
  
    
  
  
}).$mount('#app'); 
  



  

关键点说明：

1. 引入 Vue 框架：使用 import Vue from‘vue’; 引入 Vue 框架。
2. 引入 App 组件：使用 import App from‘./App.vue’; 引入根组件 App.vue。
3. 引入 Vue Router：如果项目使用了 Vue Router 进行路由管理，则使用 import router from‘./router’; 引入路由配置。
4. 引入 Vuex：如果项目使用了 Vuex 进行状态管理，则使用 import store from‘./store’; 引入状态管理配置，并在创建 Vue 实例时传入 store。
5. 创建 Vue 实例：使用 new Vue({…}) 创建一个新的 Vue 实例，并传入必要的配置选项，如 el（挂载点，但通常与 render 函数一起使用而不需要显式指定）、render（渲染函数，用于指定挂载的组件）、router（路由配置）、store（状态管理配置）等。
6. 挂载 Vue 应用：在 Vue 2.x 中，由于 render 函数已经指定了挂载点，所以通常不需要显式调用 .$mount(‘#app’)。但在某些特殊情况下，可能需要显式调用 $mount 方法来挂载 Vue 实例。
7. 全局配置：可以在创建 Vue 实例之前或之后进行全局配置，如引入全局样式、插件、混入、指令等。

注意：上述代码示例是基于 Vue 2.x 版本的。在 Vue 3.x 中，由于引入了 Composition API 和全局 API 的变更，main.js 的内容可能会有所不同。例如，Vue 3.x 中不再推荐使用 Vue.use() 来安装插件（尽管它仍然有效），而是推荐使用 app.use() 方法来安装插件到特定的 Vue 应用实例上。

2.3 src/App.vue

  在 Vue 项目中，src/App.vue 是项目的根组件文件，它通常包含了整个 Vue 应用的顶级模板、脚本和样式。App.vue 组件是 Vue 实例挂载的组件，所有其他组件都会作为其子组件或后代组件被引入和使用。

以下是 src/App.vue 在 Vue 项目中的典型代码示例：

关键点说明：

1. 模板（template）：定义了组件的 HTML 结构。在这个例子中，
   是根元素， 是 Vue Router 用于显示当前路由对应组件的插槽。如果你没有使用 Vue Router，你可以在这里直接放置其他组件的标签，如 。

2. 脚本（script）：包含了组件的 JavaScript 逻辑。在这个例子中，我们导出了一个包含组件选项的对象。这个对象可以包含组件的名称、数据、计算属性、方法、生命周期钩子等。
3. 样式（style）：定义了组件的 CSS 样式。在这个例子中，我们为 #app 元素添加了一些基本的样式。注意，在单文件组件中，样式是局部作用于当前组件的，除非你使用了全局样式或特殊的 CSS 预处理器指令。

在实际的 Vue 项目中，App.vue 的内容会根据项目的需求和结构有所不同。例如，你可能会在 中添加更多的 HTML 结构，在 中引入和使用 Vuex store、Vue Router 的钩子、第三方库等，或者在

中使用 CSS 预处理器（如 Sass、Less）来编写更复杂的样式。

2.4 src/components/

  在 Vue 项目中，src/components/ 是一个目录，用于存放 Vue 组件的源代码文件。这些组件是 Vue 应用构建块，可以包含模板（HTML）、脚本（JavaScript）和样式（CSS），并且它们可以被其他组件复用。

每个组件通常是一个 .vue 文件，这是一个单文件组件（Single File Component，简称 SFC），它允许你将模板、脚本和样式封装在一个文件中。

以下是一个典型的 Vue 组件文件结构，假设它位于 src/components/MyComponent.vue：

关键点说明：

1. 模板（template）：定义了组件的 HTML 结构。在这个例子中，有一个标题和一个按钮。
2. 脚本（script）：包含了组件的 JavaScript 逻辑。在这个例子中，我们导出了一个包含组件选项的对象，如组件名称、接收的 props、局部状态（data）、方法（methods）等。
3. 样式（style）：定义了组件的 CSS 样式。在这个例子中，我们使用了 scoped 属性，这意味着这些样式只会应用于当前组件的元素，而不会影响到其他组件。

在 src/components/ 目录下，你可以创建多个 .vue 文件来定义不同的组件。然后，你可以在 App.vue 或其他组件中通过 这样的标签来引入和使用这些组件。

记住，组件化是 Vue 框架的一个核心概念，它允许你将 UI 拆分成可复用的、独立的部分，从而使你的应用更加模块化和可维护。

2.5 src/assets/

在 Vue 项目中，src/assets/ 是一个目录，专门用于存放静态资源文件。这些资源文件包括但不限于图片、字体文件、样式表（CSS）、以及其他可能在项目中用到的媒体文件或静态数据文件。

由于 src/assets/ 目录下的文件主要是静态资源，因此通常不需要编写代码（如 .vue 文件中的模板、脚本和样式）。相反，这些资源文件会被直接引用或导入到 Vue 组件或其他 JavaScript 文件中。

以下是一些在 src/assets/ 目录中可能存在的文件类型及其引用方式的示例：

1. 图片文件：
   • 文件类型：.png、.jpg、.svg 等。
   • 引用方式：在 Vue 组件的模板中，可以使用相对路径来引用这些图片。例如，如果有一张图片位于 src/assets/images/logo.png，则可以在模板中这样引用它：。注意，@ 符号通常在 Vue 项目中配置为 src 目录的别名。
2. 字体文件：
   • 文件类型：.woff、.woff2、.ttf、.eot 等。
   • 引用方式：这些字体文件通常会在 CSS 文件中被引用，用于定义自定义字体。例如，在 Vue 组件的


     标签内或单独的 CSS 文件中，可以这样引用字体文件：@font-face {font-family:‘MyFont’; src: url(‘@/assets/fonts/myfont.woff2’) format(‘woff2’); }。

3. 样式表（CSS）：
   • 文件类型：.css。
   • 引用方式：在 Vue 组件的


     标签内，可以通过 @import 语句来引入外部的 CSS 文件。例如：@import‘@/assets/css/styles.css’;。然而，更常见的是将样式直接写在组件的

     标签内，或者使用 CSS 预处理器（如 Sass、Less）来编写样式。

4. 其他静态数据文件：
   • 文件类型：.json、.txt、.csv 等。
   • 引用方式：这些文件可以通过 JavaScript 的 import 语句或 fetch API 来加载。例如，如果有一个 JSON 文件位于 src/assets/data/config.json，则可以使用 import config from‘@/assets/data/config.json’来导入它（注意，这种方式要求 Webpack 等构建工具支持 JSON 文件的导入）。

注意：由于 src/assets/ 目录下的文件是静态资源，它们通常不会被 Webpack 等构建工具进行代码分割或懒加载。因此，如果项目中包含大量的静态资源文件，可能会对应用的加载性能产生影响。为了优化性能，可以考虑使用 CDN 来托管静态资源、对图片进行压缩和优化、以及使用代码分割和懒加载等技术来减少初始加载时间。

2.6 package.json

  在 Vue 项目中，package.json 是一个非常重要的文件，它位于项目的根目录，并包含了项目的元数据以及项目所依赖的 npm 包（Node Package Manager）。这个文件是 Node.js 项目（包括 Vue 项目）的标准配置文件，用于定义项目的名称、版本、描述、作者、脚本、依赖、开发依赖等信息。

以下是一个 Vue 项目典型的 package.json 文件的内容示例：

{  
  "name": "my-vue-project",  
  "version": "1.0.0",  
  "description": "A Vue.js project",  
  "author": "Your Name ",  
  "private": true,  
  "scripts": {  
    "serve": "vue-cli-service serve",  
    "build": "vue-cli-service build",  
    "lint": "vue-cli-service lint"  
  },  
  "dependencies": {  
    "vue": "^2.6.11",  
    "vue-router": "^3.2.0",  
    "axios": "^0.21.1",  
    
  },  
  "devDependencies": {  
    "@vue/cli-plugin-babel": "~4.5.0",  
    "@vue/cli-plugin-eslint": "~4.5.0",  
    "@vue/cli-service": "~4.5.0",  
    "babel-eslint": "^10.1.0",  
    "eslint": "^6.7.2",  
    "eslint-plugin-vue": "^6.2.2",  
    
  },  
  "eslintConfig": {  
    "root": true,  
    "env": {  
      "node": true  
    },  
    "extends": [  
      "plugin:vue/essential",  
      "eslint:recommended"  
    ],  
    "parserOptions": {  
      "parser": "babel-eslint"  
    },  
    "rules": {  
      
    }  
  },  
  "browserslist": [  
    "> 1%",  
    "last 2 versions",  
    "not dead"  
  ]  
}

关键点说明：

1. name：项目的名称。
2. version：项目的版本号。
3. description：项目的描述。
4. author：项目的作者信息。
5. private：如果设置为 true，表示这是一个私有包，不会被发布到 npm 上。
6. scripts：定义了项目可以运行的脚本命令。在 Vue 项目中，通常包括 serve（启动开发服务器）、build（构建生产环境的包）和 lint（运行 ESLint 代码检查）等命令。
7. dependencies：列出了项目在生产环境中需要安装的 npm 包及其版本号。
8. devDependencies：列出了项目在开发环境中需要安装的 npm 包及其版本号。这些包通常用于开发过程中的构建、测试和调试。
9. eslintConfig：ESLint 的配置信息，用于定义代码检查规则。
10. browserslist：指定了项目支持的浏览器范围，这有助于 Babel 和 Autoprefixer 等工具根据目标浏览器自动调整代码。

在 Vue 项目中，package.json 文件通常是通过 Vue CLI（Vue 脚手架）在创建项目时自动生成的。你可以通过运行 npm install 命令来安装所有依赖的包，运行 npm run serve 命令来启动开发服务器，以及运行 npm run build 命令来构建生产环境的包。

3. 项目启动

在 Vue 项目中，从项目启动到网页访问的过程涉及多个步骤和组件的交互。下面是一个简化的顺序描述，以及在这个过程中可能涉及的代码和概念。

1. 项目启动
   当你运行 npm run serve（或 yarn serve，取决于你使用的包管理器）时，Vue CLI 会执行以下操作：

   • 读取 package.json： 找到与 serve 脚本关联的命令，通常是 vue-cli-service serve。
   • 启动开发服务器： Vue CLI 使用 webpack-dev-server 或类似的工具来启动一个本地开发服务器。
   • 编译和监听文件变化： webpack 开始编译你的项目，包括所有的 .vue 文件、JavaScript、CSS 等，并将它们打包成一个或多个 bundle。同时，webpack 会监听文件系统的变化，以便在文件被修改时重新编译。

2. 构建 Vue 实例和挂载根组件
   在编译后的代码中，会有一个入口文件（通常是 main.js 或 main.ts），它负责创建 Vue 实例并挂载根组件。

   
   import Vue from 'vue';  
   import App from './App.vue';  
   import router from './router';  
   import store from './store';  
   
   Vue.config.productionTip = false;  
   
   new Vue({  
   router,  
   store,  
   render: h => h(App)  
   }).$mount('#app');
   

   • 创建 Vue 实例：通过 new Vue({…}) 创建一个新的 Vue 实例。
   • 配置路由和状态管理：将路由（router）和状态管理（store，如果使用 Vuex 的话）作为选项传递给 Vue 实例。
   • 渲染根组件：使用 render 函数渲染 App.vue 组件，这是你的应用的根组件。
   • 挂载到 DOM：通过 $mount(‘#app’) 将 Vue 实例挂载到页面上 ID 为 app 的元素上。

3. 路由和组件加载
   一旦 Vue 实例被挂载，Vue Router 就会接管路由的管理。当用户访问不同的 URL 时，Vue Router 会根据路由配置加载相应的组件。

   
   import Vue from 'vue';  
   import Router from 'vue-router';  
   import Home from '@/components/Home.vue';  
   import About from '@/components/About.vue';  
   
   Vue.use(Router);  
   
   export default new Router({  
     routes: [  
      {  
         path: '/',  
        name: 'Home',  
         component: Home  
       },  
       {  
         path: '/about',  
         name: 'About',  
         component: About  
      }  
    ]  
   });
   

   • 定义路由：在路由配置文件中（如 router/index.js），你定义了路由规则，将 URL 路径映射到对应的组件。
   • 导航和组件渲染：当用户访问某个 URL 时，Vue Router 会根据路由规则找到对应的组件，并将其渲染到页面上。

网页访问
现在，你的 Vue 应用已经运行在本地开发服务器上，并且可以通过浏览器访问。

• 访问开发服务器：打开浏览器，访问 http://localhost:8080（或你开发服务器运行的其他端口）。
• 加载和渲染：浏览器加载 HTML 页面（通常是 index.html），然后 Vue 应用接管页面的渲染。Vue Router 会根据当前 URL 加载相应的组件，并将其渲染到页面上。

从项目启动到网页访问的过程涉及多个步骤和组件的交互，包括：

1. 运行 npm run serve 启动开发服务器。
2. webpack 编译和打包项目文件。
3. 在 main.js 中创建 Vue 实例并挂载根组件。
4. Vue Router 管理路由和组件加载。
5. 浏览器访问开发服务器并加载 Vue 应用。

这些步骤共同构成了 Vue 项目从启动到网页访问的完整流程。