浅谈vue 脚手架文件结构及加载过程

1. 初始化脚手架

　　1.1 全局安装 @vue/cli npm install -g@vue/cli

　　1.2 切换到创建项目的目录，执行 vue create projectname

　　1.3 选择符合自己要求的项进行Y/N，最终生成项目文件

2. 脚手架文件结构

|-- node_modules: 存放下载依赖的文件夹
|-- public: 存放不会变动静态的文件，它与src/assets的区别在于，public目录中的文件不被webpack打包处理，会原
样拷贝到dist目录下
    |-- index.html: 主页面文件
    |-- favicon.ico: 在浏览器上显示的图标
|-- src: 源码文件夹
    |-- assets: 存放组件中的静态资源
    |-- components: 存放一些公共组件
    |-- views: 存放所有的路由组件
    |-- router: 存放路由配置信息
    |-- store: 存放公共状态 vuex
    |-- App.vue: 应用根主组件
    |-- main.js: 应用入口 js
|-- .browserslistrc: 指定了项目可兼容的目标浏览器范围, 对应是package.json 的 browserslist选项
|-- .eslintrc.js: eslint相关配置
|-- .gitignore: git 版本管制忽略的配置
|-- babel.config.js: babel 的配置,即ES6语法编译配置
|-- package-lock.json: 用于记录当前状态下实际安装的各个包的具体来源和版本号等, 保证其他人在 npm install 项
目时大家的依赖能保证一致.
|-- package.json: 项目基本信息,包依赖配置信息等
|-- postcss.config.js: postcss一种对css编译的工具，类似babel对js的处理
|-- README.md: 项目描述说明的 readme 文件

• package.json ：这是一个重要的配置文件，用于定义项目的依赖项、脚本命令和其他元数据。它包含了项目的名称、版本号、作者等信息，还列出了项目所需的各种包依赖。这个文件是使用npm（Node Package Manager）进行包管理和构建的基础。
• public 文件夹：这个文件夹包含了一些静态资源，如HTML文件、图标和其他非编译的文件。在构建过程中，这些文件会直接复制到最终的构建目录中，可以在这里放置一些全局的资源。
• src 文件夹：这是你开发项目的主要目录。它包含了Vue组件、样式文件、JavaScript文件和其他资源。下面是 src 文件夹中的一些重要文件和文件夹：
  • main.js ：这是项目的入口文件，用于初始化Vue应用实例，并将根组件挂载到DOM中。你可以在这里引入全局样式、插件和其他配置。
  • App.vue ：这是根组件，是整个应用的容器。它可以包含其他组件，并定义应用的整体结构和布局。
  • components 文件夹：这个文件夹用于存放应用的各种Vue组件。你可以根据需要创建子文件夹来组织组件。
  • assets 文件夹：这个文件夹用于存放应用所需的静态资源，如图像、字体文件等。
  • router 文件夹：如果你在初始化项目时选择了Vue Router插件，这个文件夹将包含用于定义路由的文件。
  • views 文件夹：这个文件夹通常用于存放与路由对应的视图组件，每个视图组件对应应用中的一个页面。
• node_modules 文件夹：这个文件夹包含了项目所需的所有依赖包，这些包是通过 package.json 文件中的配置来安装的。你不需要手动管理这个文件夹，npm会自动安装和更新依赖。

注： components 文件夹通常用于存放可复用的、通用的组件，这些组件可以在应用的不同部分进行重复使用。 views 文件夹通常用于存放与路由对应的视图组件，每个视图组件对应应用中的

一个页面。这些组件通常较大粒度，包含了特定页面的整体结构和布局，可能由多个小组件组成。

2.1 src文件下各文件使用示例说明：

main.js ：

• main.js 是项目的入口文件，用于初始化Vue应用实例并将根组件挂载到DOM中。
• 你可以在 main.js 中引入全局样式、插件和其他配置。
• 例如，在 main.js 中引入全局CSS文件：

import Vue from 'vue';
import App from './App.vue';
import './assets/global.css';
new Vue({
  render: h => h(App)
}).$mount('#app');

App.vue ：

• App.vue 是根组件，是整个应用的容器，定义应用的整体结构和布局。
• 它可以包含其他组件，并通过插槽（slot）或路由（Vue Router）加载不同的内容。
• 例如，一个简单的 App.vue 可能包含一个导航栏和一个内容区域：

<template>
  <div>
    <Navbar />
    <router-view />
  </div>
</template>
<script>
import Navbar from './components/Navbar.vue';
export default {
  components: {
    Navbar
  }
};
</script>

components 文件夹：

• components 文件夹用于存放应用的各种Vue组件。
• 你可以根据需要创建子文件夹来组织组件。
• 例如，你可以在 components 文件夹下创建一个 Button.vue 组件，并在其他组件中引用它：

<template>
  <button class="button">{{ label }}</button>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    }
  }
};
</script>
<style scoped>
.button {
  /* 样式定义 */
}
</style>

assets 文件夹：

• assets 文件夹用于存放应用所需的静态资源，如图像、字体文件等。
• 这些资源可以在组件中通过相对路径引用。
• 例如，你可以将应用的Logo图像放置在 assets 文件夹下，并在组件中使用它：

<template>
  <img src="@/assets/logo.png" alt="Logo">
</template>

router 文件夹：

• 如果你在初始化项目时选择了Vue Router插件， router 文件夹将包含用于定义路由的文件。
• 你可以在这里配置应用的路由规则和相应的组件。
• 例如，在 router/index.js 文件中定义一个简单的路由规则：

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

3. 脚手架整体的加载过程：

• 当你启动开发服务器或构建项目时，Vue CLI会读取package.json文件中的配置信息，并执行相应的脚本命令。
• 在执行脚本命令之前，Vue CLI会使用Webpack等工具根据配置文件（如vue.config.js）进行项目的构建和打包。
• 在构建过程中，Webpack会根据main.js文件作为入口文件，逐个解析和加载其他组件、样式文件和资源文件。
• 当main.js文件被加载时，它会创建Vue应用实例，并将根组件App.vue挂载到HTML页面的特定DOM元素上。
• 根组件App.vue可以包含其他组件，这些组件会在需要时被动态加载和渲染。
• 当应用程序运行时，Vue会根据路由配置（如果有）动态加载和渲染相应的视图组件。

到此这篇关于浅谈vue 脚手架文件结构及加载过程的文章就介绍到这了,更多相关vue 脚手架加载过程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论