今天滴学习目标！！！
- 项目结构介绍
- 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 App</title>
<!-- 引入Vue框架（这里以CDN方式引入为例） -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Vue Router（如果使用了路由） -->
<!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
<!-- 引入其他必要的库或样式 -->
<!-- <link rel="stylesheet" type="text/css" href="path/to/your/stylesheet.css"> -->
<!-- <script src="path/to/your/library.js"></script> -->
</head>
<body>
<!-- Vue实例挂载的容器 -->
<div id="app"></div>
<!-- 引入构建后的JavaScript文件（通常由Webpack等构建工具生成） -->
<!-- 注意：在实际项目中，这个路径可能会根据构建配置有所不同 -->
<script src="/dist/build.js"></script>
<!-- 引入自定义脚本（可选） -->
<!-- <script src="./path/to/custom-script.js"></script> -->
</body>
</html>
关键点说明：
- DOCTYPE和HTML标签：
<!DOCTYPE html>声明文档类型，确保浏览器以标准模式渲染页面。<html lang="en">定义HTML文档的根元素，并设置语言属性为英语（可以根据需要更改为其他语言）。
- 头部（head）部分：
<meta charset="UTF-8">设置文档的字符编码为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">设置视口，确保页面在移动设备上正确显示。<title>设置页面的标题，这将在浏览器的标签页上显示。- 引入Vue框架和其他必要的库（如Vue Router），这里以CDN方式引入Vue为例。
- 主体（body）部分：
<div id="app"></div>是Vue实例挂载的容器，Vue应用将在这个容器内进行渲染。- 引入构建后的JavaScript文件（如/dist/build.js），这个文件通常由Webpack等构建工具生成，包含了Vue应用的编译结果。
- 自定义脚本（可选）：
如果需要在index.html中引入自定义脚本，可以在</body>标签之前添加<script src="./path/to/custom-script.js"></script>。
注意：在实际的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项目中的典型代码示例：
// 引入Vue框架
import Vue from 'vue';
// 引入App组件（根组件）
import App from './App.vue';
// 引入Vue Router（如果使用了路由）
import router from './router';
// 引入Vuex（如果使用了状态管理）
// import store from './store';
// 引入全局样式或插件（可选）
// import './assets/styles.css';
// import SomePlugin from 'some-plugin';
// 如果使用了Vuex，则在创建Vue实例时传入store
// Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
// 渲染挂载点
el: '#app',
// 挂载的组件实例
render: h => h(App),
// 如果使用了Vue Router，则传入router配置
router,
// 如果使用了Vuex，则传入store实例
// store,
// 其他Vue实例的配置选项（如全局混入、全局指令等）
// ...
}).$mount('#app'); // 这一步在render函数中已经隐式完成了，通常不需要显式调用$mount
// 注意：在Vue 2.x中，通常不需要显式调用$mount('#app')，因为render函数已经指定了挂载点。
// 但在某些情况下（如需要在JavaScript中动态创建Vue实例时），可能需要显式调用$mount。
// 在上面的示例中，由于render函数已经指定了挂载到#app，所以$mount('#app')是多余的。
// 如果使用了插件，如Vuex或第三方UI库，则需要在Vue实例创建之前或之后调用它们的安装方法。
// 例如：Vue.use(SomePlugin);
关键点说明：
- 引入Vue框架：使用 import Vue from ‘vue’; 引入Vue框架。
- 引入App组件：使用 import App from ‘./App.vue’; 引入根组件 App.vue。
- 引入Vue Router：如果项目使用了Vue Router进行路由管理，则使用 import router from ‘./router’; 引入路由配置。
- 引入Vuex：如果项目使用了Vuex进行状态管理，则使用 import store from ‘./store’; 引入状态管理配置，并在创建Vue实例时传入 store。
- 创建Vue实例：使用 new Vue({…}) 创建一个新的Vue实例，并传入必要的配置选项，如 el（挂载点，但通常与 render 函数一起使用而不需要显式指定）、render（渲染函数，用于指定挂载的组件）、router（路由配置）、store（状态管理配置）等。
- 挂载Vue应用：在Vue 2.x中，由于 render 函数已经指定了挂载点，所以通常不需要显式调用 .$mount(‘#app’)。但在某些特殊情况下，可能需要显式调用 $mount 方法来挂载Vue实例。
- 全局配置：可以在创建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项目中的典型代码示例：
<template>
<div id="app">
<!-- 应用的顶级模板内容 -->
<router-view/> <!-- 如果使用了Vue Router，则这个组件用于显示当前路由对应的组件 -->
<!-- 或者你可以在这里直接放置其他组件 -->
<!-- <MyComponent /> -->
</div>
</template>
<script>
// 引入需要的组件（可选）
// import MyComponent from './components/MyComponent.vue';
export default {
name: 'App', // 组件名称，用于调试
// 组件的props（如果有的话）
// props: { ... },
// 组件的数据
data() {
return {
// ...
};
},
// 组件的计算属性
computed: {
// ...
},
// 组件的方法
methods: {
// ...
},
// 组件的生命周期钩子
created() {
// ...
},
mounted() {
// ...
},
// ... 其他生命周期钩子
// 组件的样式（可选，通常使用单文件组件的<style>标签）
// styles: { ... }, // 注意：这不是Vue的标准属性，仅用于说明
// 如果使用了Vue Router，则不需要在这里处理路由逻辑，<router-view>会自动处理
};
</script>
<style>
/* 组件的CSS样式 */
#app {
/* 样式定义 */
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
关键点说明：
- 模板（template）：定义了组件的HTML结构。在这个例子中，
<div id="app">是根元素，<router-view/>是Vue Router用于显示当前路由对应组件的插槽。如果你没有使用Vue Router，你可以在这里直接放置其他组件的标签，如<MyComponent />。 - 脚本（script）：包含了组件的JavaScript逻辑。在这个例子中，我们导出了一个包含组件选项的对象。这个对象可以包含组件的名称、数据、计算属性、方法、生命周期钩子等。
- 样式（style）：定义了组件的CSS样式。在这个例子中，我们为 #app 元素添加了一些基本的样式。注意，在单文件组件中，样式是局部作用于当前组件的，除非你使用了全局样式或特殊的CSS预处理器指令。
在实际的Vue项目中，App.vue 的内容会根据项目的需求和结构有所不同。例如，你可能会在 <template> 中添加更多的HTML结构，在 <script> 中引入和使用Vuex store、Vue Router的钩子、第三方库等，或者在 <style> 中使用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：
<template>
<div class="my-component">
<!-- 组件的HTML结构 -->
<h1>{{ title }}</h1>
<button @click="handleClick">Click Me</button>
</div>
</template>
<script>
export default {
name: 'MyComponent', // 组件名称
props: {
// 接收来自父组件的数据
initialTitle: {
type: String,
default: 'Hello, World!'
}
},
data() {
return {
// 组件的局部状态
title: this.initialTitle
};
},
methods: {
// 组件的方法
handleClick() {
this.title = 'Button Clicked!';
}
}
// 还可以包含计算属性、生命周期钩子、监听器等
};
</script>
<style scoped>
/* 组件的局部样式 */
.my-component {
text-align: center;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
关键点说明：
- 模板（template）：定义了组件的HTML结构。在这个例子中，有一个标题和一个按钮。
- 脚本（script）：包含了组件的JavaScript逻辑。在这个例子中，我们导出了一个包含组件选项的对象，如组件名称、接收的props、局部状态（data）、方法（methods）等。
- 样式（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/ 目录中可能存在的文件类型及其引用方式的示例：
- 图片文件：
- 文件类型：.png、.jpg、.svg 等。
- 引用方式：在Vue组件的模板中，可以使用相对路径来引用这些图片。例如，如果有一张图片位于 src/assets/images/logo.png，则可以在模板中这样引用它：
<img src="@/assets/images/logo.png" alt="Logo">。注意，@ 符号通常在Vue项目中配置为 src 目录的别名。
- 字体文件：
- 文件类型：.woff、.woff2、.ttf、.eot 等。
- 引用方式：这些字体文件通常会在CSS文件中被引用，用于定义自定义字体。例如，在Vue组件的
<style>标签内或单独的CSS文件中，可以这样引用字体文件：@font-face { font-family: ‘MyFont’; src: url(‘@/assets/fonts/myfont.woff2’) format(‘woff2’); }。
- 样式表（CSS）：
- 文件类型：.css。
- 引用方式：在Vue组件的
<style>标签内，可以通过 @import 语句来引入外部的CSS文件。例如：@import ‘@/assets/css/styles.css’;。然而，更常见的是将样式直接写在组件的<style>标签内，或者使用CSS预处理器（如Sass、Less）来编写样式。
- 其他静态数据文件：
- 文件类型：.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 <your.email@example.com>",
"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": {
// ESLint规则配置
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
关键点说明：
- name：项目的名称。
- version：项目的版本号。
- description：项目的描述。
- author：项目的作者信息。
- private：如果设置为 true，表示这是一个私有包，不会被发布到npm上。
- scripts：定义了项目可以运行的脚本命令。在Vue项目中，通常包括 serve（启动开发服务器）、build（构建生产环境的包）和 lint（运行ESLint代码检查）等命令。
- dependencies：列出了项目在生产环境中需要安装的npm包及其版本号。
- devDependencies：列出了项目在开发环境中需要安装的npm包及其版本号。这些包通常用于开发过程中的构建、测试和调试。
- eslintConfig：ESLint的配置信息，用于定义代码检查规则。
- browserslist：指定了项目支持的浏览器范围，这有助于Babel和Autoprefixer等工具根据目标浏览器自动调整代码。
在Vue项目中，package.json 文件通常是通过Vue CLI（Vue脚手架）在创建项目时自动生成的。你可以通过运行 npm install 命令来安装所有依赖的包，运行 npm run serve 命令来启动开发服务器，以及运行 npm run build 命令来构建生产环境的包。
3. 项目启动
在Vue项目中，从项目启动到网页访问的过程涉及多个步骤和组件的交互。下面是一个简化的顺序描述，以及在这个过程中可能涉及的代码和概念。
-
项目启动
当你运行 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 会监听文件系统的变化，以便在文件被修改时重新编译。
-
构建Vue实例和挂载根组件
在编译后的代码中，会有一个入口文件（通常是 main.js 或 main.ts），它负责创建Vue实例并挂载根组件。// main.js 或 main.ts 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 的元素上。
-
路由和组件加载
一旦Vue实例被挂载，Vue Router 就会接管路由的管理。当用户访问不同的URL时，Vue Router 会根据路由配置加载相应的组件。// router/index.js 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加载相应的组件，并将其渲染到页面上。
从项目启动到网页访问的过程涉及多个步骤和组件的交互，包括：
- 运行 npm run serve 启动开发服务器。
- webpack 编译和打包项目文件。
- 在 main.js 中创建Vue实例并挂载根组件。
- Vue Router 管理路由和组件加载。
- 浏览器访问开发服务器并加载Vue应用。
这些步骤共同构成了Vue项目从启动到网页访问的完整流程。
