第一个vue项目
项目目录
启动vue项目
npm run serve
1.vue.config.js文件
(CLI通过vue-cli-serve启动项目，解析配置配置文件vue-condig-js）
// vue.config.js
//引入path板块，这是Node.js的一个内置模块，用于处理文件路径，这里引用它是为了方便后面设置路径
const path = require('path');//便于处理文件路径
//module.exports 用于导出模块的内容
module.exports = {
//用于自定义Webpack的配置
configureWebpack: {
//可以为路径设置别名
resolve: {
alias: {
// 设置 '@' 别名指向 'src' 文件夹，@/components 就表示 src/components
'@': path.resolve(__dirname, 'src')
}
}
},
//用于配置开发服务器
devServer: {
host: '0.0.0.0', // 允许外部访问
port: 8080 // 设置开发服务器端口
}
};
2.public/index.html
（项目入口文件，webpack会将打包的js文件注入到index-html文件内）
<!-- 项目入口的HTML文件，webpack会将打包后的javascript文件注入到这个html文件内 -->
<!DOCTYPE html>
<!-- html的根元素 -->
<html lang="">
<!-- 包含文档的元数据 -->
<head>
<!-- 设置字符编码为utf-8支持多种语言 -->
<meta charset="utf-8">
<!-- 提示ie浏览器以最高版本的渲染引擎渲染页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置视图，使得页面在浏览器上面可以自适应页面 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 目的是为了设置网页图标，绿色的那个vue,这里的BASE_URL是webpack的环境变量，指向公共资源favicon-ico -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 通过webpack的htmlWebpackPlugin插件动态注入标题 -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<!-- 包含页面的主题内容 -->
<body>
<!-- 如果当前浏览器禁用js，就会显示如下部分 -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 用于挂载vue应用的容器，将app的内容渲染到此处 -->
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 打包后的Javascrip文件会自动注入此处 -->
</body>
</html>
3.src/App-vue
（档 Vue 应用挂载到 index.html 中的 <div id="app"></div> 元素上的时候就会开始启动vue项目，其中App.vue是根组件）
<!-- 这是vue应用的主组件，其他的组件都会嵌套到这个组件内，档主html文件运行之后，-->
<!-- app挂载到html上面之后，就会开始启动vue项目，从这里开始 -->
<!-- template部分用于定义组件的html（即页面上显示的内容） -->
<template>
<!-- app这是一个容器元素，整个组件的内容都包裹在这个div内部，挂载在main.js的文件中的app上 -->
<div id="app">
<!-- 这是vue的插值语法用于动态绑定数据 -->
<h1>{{ message }}</h1>
<!-- 这是一个自定义组件HelloWorld的用法 -->
<HelloWorld msg="Welcome to Your Vue.js App"/>
<!-- 是vue router提供的内容，用于显示当前路由对于的组件内容，内部放置了两个导航连接 -->
<router-view>
<router-link to="/">Home</router-link>
<router-link to="/About">About</router-link>
</router-view>
</div>
</template>
<!-- 部分用于定义组件的逻辑，包括数据、方法、生命周期等。 -->
<script>
// 从 ./components/HelloWorld.vue 文件中导入 HelloWorld 组件，这样就可以在当前组件中使用HelloWorld
import HelloWorld from './components/HelloWorld.vue'
// 定义并导出当前组件的配置对象
export default {
name: 'App',
data() {
return {
message: "Hello, Vue!app通过message这里是我添加的vue部分" // 定义响应式数据
};
},
// 注册子组件，使其可以在模板中使用
components: {
HelloWorld
}
}
</script>
<!-- 部分用于定义组件的CSS样式 -->
<style>
#app {
/* 设置字体 */
font-family: Avenir, Helvetica, Arial, sans-serif;
/* 用于优化字体的抗锯齿效果 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* 将文本居中对齐 */
text-align: center;
/* 设置文本颜色。 */
color: #47812b;
/* 设置顶部外边距 */
margin-top: 60px;
}
</style>
4.src/router/index.js
// 路由配置文件
// 需要提前安装vue-router 终端输入命令 npm install vue-router
// 导入必要的模块，其中createRouter和createWebHistory是从vue-router包中导入的，
// 其中createRouter用于创建一个路由实例
// createWebHistory是一种路由模式，用于实现基于浏览器历史记录的路由导航
import { createRouter, createWebHistory } from 'vue-router';
// 从../views/Home.vue 文件中导入 Home 组件
import Home from '../views/Home.vue';
// 包含了路由规则的数组，每个路由规则定义了路径path和对应的组件component
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
];
// 用于创建一个路由实例，接受一个配置对象
const router = createRouter({
// 指定路由的模式。在这里，使用了 createWebHistory()，表示使用浏览器的历史记录模式
history: createWebHistory(),
// 提供路由规则数组，定义了路径和组件的映射关系
routes
});
// 导出路由实例
export default router;
5.页面级组件Home.vue和About.vue
(Vue Router 会根据当前 URL 加载对应的组件，并将其渲染到 <router-view> 中)
5-1 Home.vue
<template>
<div>
<h1>这里是Home页面级别Page</h1>
</div>
</template>
<!-- 定义组件逻辑 -->
<script>
// export default这是 ES6 的模块导出语法，用于将当前组件定义导出，使其可以在其他地方被导入和使用。
// 在 Vue 中，每个 .vue 文件都是一个独立的模块
export default {
name: 'Home' //定义组件名为Home
};
</script>
5-2 About.vue
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<script>
export default {
name: 'About'
};
</script>
6. src/assets/
（用于放置一些静态资源）
7.components
（用于放置一些可复用的子组件）
8.views
（用于放置一些页面级组件，通常是路由的直接目标）
特性 src/componentssrc/views用途 可复用的子组件 页面级组件 依赖性 独立，不依赖于页面逻辑 依赖于路由配置 嵌套关系 可以嵌套在其他组件或页面中 组合多个子组件构建页面 路由管理 不直接参与路由管理 直接作为路由目标被渲染 示例 按钮、输入框、导航栏等 首页、关于页、详情页等
other解释
什么是，en或zh-CN
<html lang="en"> <!-- 页面内容为英语 -->
<html lang="zh-CN"> <!-- 页面内容为简体中文 -->
文档的元数据
关于文档的信息，用于描述HTML文档的属性，但不会直接显示在网页上。它们通常放在HTML的
<head>标签中，常见的元数据包括：
<meta charset="utf-8">：指定字符编码，确保网页支持多种语言。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置网页在移动设备上的显示方式，确保自适应屏幕。
<meta name="description" content="网页描述">：提供网页的简短描述，用于搜索引擎结果页面（SERP）。
<title>：设置网页标题，显示在浏览器标签页上。
<link>：用于引入外部资源，如CSS文件、图标等。
<script>：用于引入JavaScript文件。这些元数据帮助浏览器、搜索引擎或其他工具更好地理解和处理网页内容。
BASE_URL指向公共资源
<div id="app"></div> 挂载应用解释
html文件
<div id="app">
<h1>{{ message }}</h1>
</div>在Vue实例中：
data() {
return {
message: "Hello, Vue!"
};
}最终，浏览器会显示：
<div id="app">
<h1>Hello, Vue!</h1>
</div>
在 Webpack 的构建流程中，
dist文件夹（或你指定的其他输出目录）是专门用于存放构建后的文件的地方。这些文件是经过 Webpack 打包、优化后的最终产物，可以直接部署到生产环境中。以下是将文件输出到dist文件夹的原因：分离开发环境和生产环境
什么是DOM元素？
DOM（Document Object Model，文档对象模型）是HTML文档的编程接口。它将HTML文档表示为一个由节点和对象组成的树状结构，允许开发者通过JavaScript动态访问和操作文档内容
在Vue.js中，Vue接管了DOM操作，开发者不需要直接操作DOM，而是通过声明式的数据绑定来实现页面的更新。