经过上期内容的学习，我们已经可以构建一个VUE-CLI框架了，接下来我们分析一下这个框架，毕竟知己知彼，百战百胜

我们创建完成后可以看到以下内容

接下来我们分析一下他的文件结构

node_modules用于存放项目所依赖的第三方模块和包。当使用 Vue3-CLI 创建项目并安装依赖后，这些依赖都会被放置在此文件夹中。比如 Vue3 框架本身、各种 UI 组件库、工具库等。public存放静态资源文件，如 HTML 文件、图片、字体等。这些文件在构建项目时会被直接复制到输出目录中，不会被 Vue 项目构建系统处理。通常，index.html 是项目的入口 HTML 文件，在这里可以进行一些全局的配置和引入外部资源。src是项目的核心源代码目录。assets ：存放静态资源，如图片、样式表等，在项目中可以通过相对路径或别名进行引用。components ：存放项目的各种组件，每个组件通常对应一个 .vue 文件，包含模板、脚本和样式三部分，实现了视图和逻辑的分离。views ：存放页面级的组件，通常每个页面对应一个 .vue 文件，这些文件会作为路由的对应组件进行展示。router ：存放路由相关的配置文件，定义了应用的路由规则，包括路径、对应的组件等信息。store ：用于管理应用的状态，通常使用 Vuex 或 Pinia 等状态管理库。在这个目录下可以定义全局的状态、 mutations、actions 和 getters 等。api ：存放与后端接口交互的代码，封装了对后端 API 的请求，方便在组件中调用获取数据。utils ：存放项目的工具函数和公共方法，可以被项目中的多个组件或模块复用。.browserslistrc用于配置目标浏览器的范围，指定项目所支持的浏览器及其版本。这有助于在构建项目时，根据所支持的浏览器对代码进行相应的兼容性处理，确保项目在不同浏览器中的正常运行。.eslintrc.jsESLint 的配置文件，用于定义代码的检查规则和风格指南。通过配置 ESLint，可以自动检查代码中的潜在问题、语法错误以及是否符合团队约定的代码风格，有助于提高代码的质量和可维护性。.gitignore指定哪些文件或目录不应被 Git 版本控制系统跟踪。例如，node_modules 目录、编译后的文件、环境配置文件等，避免将这些不必要的文件提交到版本库中。babel.config.jsBabel 的配置文件，用于将 ES6  +语法转译为向后兼容的 JavaScript 语法。它确保项目中的代码能够在不同环境下正常运行，使得开发者可以使用较新的 JavaScript 特性编写代码，而不用担心兼容性问题。package-lock.json 和 package.jsonpackage.json ：包含了项目的元数据，如项目名称、版本、描述、作者、依赖等信息。同时，还定义了项目的脚本命令，如启动开发服务器、构建生产环境代码等。它是项目配置的核心文件，用于管理项目的依赖和脚本。package-lock.json ：由 npm 自动生成，用于锁定项目中各个依赖的精确版本，确保在不同的开发环境和部署环境中，安装的依赖版本一致，避免因依赖版本差异导致的问题。README.md项目的说明文件，通常包含项目的基本信息、安装步骤、使用方法、项目特点等内容。它为开发者和使用者提供了项目的快速入门和参考资料。tsconfig.json（如果项目使用 TypeScript）TypeScript 的配置文件，用于定义 TypeScript 编译器的选项和项目中的 TypeScript 文件的编译规则。可以指定目标 JavaScript 版本、模块系统、类型检查的严格程度等，以满足项目对 TypeScript 的不同需求。vue.config.jsVue CLI 的配置文件，用于对 Vue CLI 的构建行为进行定制化配置。可以配置构建路径、环境变量、插件选项、页面入口等，以适应项目的特殊需求。

可以看到很复杂，但是我们的目标是逐步熟练，以了解一些常用的vue知识为主

本期内容着重常用的文件进行介绍

App.vue

（没有找到的话打开src文件夹看看）

（以下内容.vue文件都会有，只是以App.vue方便看初始内容的示例）

<template> 部分

这是 App.vue 的 HTML 模板部分，定义了应用的页面结构。

它通常包含应用的主要布局，如 header、main、footer 等通用部分，这些部分可以为整个应用提供统一的外观和导航结构。

<router-view/> 是一个特殊的元素，用于 Vue Router 进行路由切换时渲染对应的组件。当用户访问不同的路由时，对应的组件会在这个位置显示。

还可以引入自己定义的子组件，如示例中的 <MyComponent/>，子组件会在这个位置被渲染。

（实际上当作HTML的本体加拓展就行，看官方术语的话很晦涩）

<script> 部分

这里是组件的 JavaScript 逻辑部分，包含了组件的配置选项。

name ：定义了组件的名称，通常与文件名相同，方便调试和引用。

components ：用于注册子组件，将子组件导入后在这里进行注册，这样在模板中才能使用这些子组件。

data ：定义了组件的响应式数据，这些数据可以用于模板中的动态绑定，例如在页面上显示应用的标题等信息。当数据发生变化时，页面上绑定该数据的部分会自动更新。

methods ：定义了组件的方法，这些方法可以被模板中的事件绑定调用，用于处理用户的交互行为，如点击按钮触发的方法等。

created ：是一个生命周期钩子，在组件实例创建完成后会立即调用。可以在这个钩子中进行一些初始化操作，如发送请求获取数据等。

（在初始内容中没有，在之后我们会有示例）

<style> 部分

这里是组件的样式部分，用于定义应用的样式。

可以为整个应用的页面元素定义样式，如字体、颜色、布局等。

还可以为子组件定义样式，这些样式会作用于子组件的对应元素，从而实现对整个应用的样式控制。

（对于不了解VUE的朋友来说，在实际使用中概念和CSS差不多）

比如这个示例

<template><div id="app"><header><h1>我的 Vue 应用</h1></header><main><router-view /></main><footer><p>&copy; 2024 我的 Vue 应用</p></footer><MyComponent /></div></template><script>import MyComponent from './components/MyComponent.vue'export default {name: 'App',components: {MyComponent},data() {return {appTitle: '我的 Vue 应用'}},methods: {appMethod() {console.log('App method called')}},created() {console.log('App component created')}}</script><style>#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;}header {background-color: #42b983;padding: 20px;margin-bottom: 20px;}footer {background-color: #42b983;padding: 20px;margin-top: 20px;}</style>

事实上，在实际使用过程中以上的内容可能不会全部都用，但是仍然值得了解以便于后期拓展

接下来了解初始显示内容

我们启动vue框架看看

打开pakeage.json文件我们可以看到有调试的按钮

点击后我们选择sever vue-cli-service serve即可

等一会儿后可以看到端口，我们用谷歌浏览器打开

可以看到成功启动

我们再来分析一下显示页面的这几个文件

在这两个文件中HomeView和AboutView分别代表着上面的Home和About

我们再来通过全面的示例分析一下（当然了，不可能直接就能用的，毕竟不是传统前端，有一定的规范性）

HomeView.vue

<template><div class="home"><h1>首页</h1><p>欢迎来到我的 Vue 应用首页！</p><!-- 可以在这里添加更多内容，比如轮播图、产品列表等 --><div v-for="(item, index) in items" :key="index" class="item"><h3>{{ item.title }}</h3><p>{{ item.description }}</p></div></div></template><script>export default {name: "HomeView",data() {return {items: [{ title: "项目1", description: "这是项目1的描述" },{ title: "项目2", description: "这是项目2的描述" },{ title: "项目3", description: "这是项目3的描述" },],};},created() {console.log("HomeView component created");// 这里可以添加页面初始化时的逻辑，比如获取数据},methods: {// 可以在这里定义方法，处理页面上的交互逻辑},};</script><style scoped>.home {font-family: "Avenir", Helvetica, Arial, sans-serif;text-align: center;padding: 20px;}.item {margin: 20px 0;padding: 10px;border: 1px solid #ddd;border-radius: 5px;}</style>

<template>

定义首页的 HTML 结构，比如标题、段落、列表等内容。

使用 v-for 指令循环显示数据。

<script>

定义组件的名称和数据。

数据 items 是一个数组，用于存储首页要展示的项目信息。

created 生命周期钩子在组件创建后执行，可以在这里执行一些初始化操作。

<style scoped>

为首页定义样式，scoped 使这些样式只作用于当前组件。

（实际上只是预先了解一些专业术语而已，本期内容主要以熟悉为主）

AboutView.vue

<template><div class="about"><h1>关于</h1><p>这是一个关于 Vue 应用的页面。</p><p>应用由以下部分组成：</p><ul><li v-for="(part, index) in parts" :key="index">{{ part }}</li></ul></div></template><script>export default {name: "AboutView",data() {return {parts: ["Vue.js", "Vue Router", "Vuex", "Vue CLI"],};},created() {console.log("AboutView component created");},};</script><style scoped>.about {font-family: "Avenir", Helvetica, Arial, sans-serif;text-align: center;padding: 20px;}ul {list-style-type: none;padding: 0;}li {margin: 10px 0;padding: 5px;border-bottom: 1px solid #eee;}</style>

<template>

定义关于页面的 HTML 结构，包括标题、段落和列表等内容。

使用 v-for 指令循环显示应用的组成部分。

<script>

定义组件的名称和数据。

数据 parts 是一个数组，用于存储应用的组成部分。

<style scoped>

为关于页面定义样式，scoped 使这些样式只作用于当前组件。

分析完以后，那他们有什么用呢

HomeView.vue

通常用于展示首页内容，如欢迎信息、最新动态、产品列表等。

是用户进入应用后首先看到的页面，可以包含应用的主要功能入口。

AboutView.vue

用于展示应用的背景信息、开发团队、使用技术等内容。

通常是辅助页面，为用户提供多种信息。

（当然了，之后可以自己更改，毕竟人是活的）

那么问题来了，如果我有找到自己喜欢的东西，改怎么才能用呢

我们再来了解框架的结构

在 Vue 项目中，HomeView.vue 和 AboutView.vue 通常位于 src/views 目录下。这个目录通常用于存放应用的视图组件（即页面级别的组件）。在 Vue Router 的配置中，它们会被注册为路由对应的组件。

我们在 src/router/index.js 中配置好路由

import { createRouter, createWebHistory } from "vue-router";import HomeView from "../views/HomeView.vue";import AboutView from "../views/AboutView.vue";const routes = [{path: "/",name: "home",component: HomeView,},{path: "/about",name: "about",component: AboutView,},];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,});export default router;

然后在App.vue中更改template以更改路由

<template><div id="app"><header><nav><router-link to="/">首页</router-link> |<router-link to="/about">关于</router-link></nav></header><main><router-view /></main></div></template><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}nav {padding: 30px;}nav a {font-weight: bold;color: #2c3e50;}nav a.router-link-exact-active {color: #42b983;}</style>

看一下结果

可以看到没问题

以上便是常用框架分析（实际上就是vue文件的了解和vue框架的特性）不是很难，只要逐渐熟练就好，毕竟这东西开源的，搞废了，直接新建一个，费点时间而已

毕竟，星星之火可以燎原，只要熟练度上来，就都好办了