项目目录
启动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/components
src/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,而是通过声明式的数据绑定来实现页面的更新。