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

  • vue 脚手架文件结构及加载过程浅谈已关闭评论
  • 69 次浏览
  • A+
所属分类:Web前端
摘要

  1.1  全局安装 @vue/cli  npm install -g @vue/cli  1.2 切换到创建项目的目录,执行 vue create projectname


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 文件 

  1. package.json:这是一个重要的配置文件,用于定义项目的依赖项、脚本命令和其他元数据。它包含了项目的名称、版本号、作者等信息,还列出了项目所需的各种包依赖。这个文件是使用npm(Node Package Manager)进行包管理和构建的基础。

  2. public文件夹:这个文件夹包含了一些静态资源,如HTML文件、图标和其他非编译的文件。在构建过程中,这些文件会直接复制到最终的构建目录中,可以在这里放置一些全局的资源。

  3. src文件夹:这是你开发项目的主要目录。它包含了Vue组件、样式文件、JavaScript文件和其他资源。下面是src文件夹中的一些重要文件和文件夹:

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

    • App.vue:这是根组件,是整个应用的容器。它可以包含其他组件,并定义应用的整体结构和布局。

    • components文件夹:这个文件夹用于存放应用的各种Vue组件。你可以根据需要创建子文件夹来组织组件。

    • assets文件夹:这个文件夹用于存放应用所需的静态资源,如图像、字体文件等。

    • router文件夹:如果你在初始化项目时选择了Vue Router插件,这个文件夹将包含用于定义路由的文件。

    • views文件夹:这个文件夹通常用于存放与路由对应的视图组件,每个视图组件对应应用中的一个页面。

  4. 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="vue 脚手架文件结构及加载过程浅谈" 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.  脚手架整体的加载过程:

  1. 当你启动开发服务器或构建项目时,Vue CLI会读取package.json文件中的配置信息,并执行相应的脚本命令。

  2. 在执行脚本命令之前,Vue CLI会使用Webpack等工具根据配置文件(如vue.config.js)进行项目的构建和打包。

  3. 在构建过程中,Webpack会根据main.js文件作为入口文件,逐个解析和加载其他组件、样式文件和资源文件。

  4. main.js文件被加载时,它会创建Vue应用实例,并将根组件App.vue挂载到HTML页面的特定DOM元素上。

  5. 根组件App.vue可以包含其他组件,这些组件会在需要时被动态加载和渲染。

  6. 当应用程序运行时,Vue会根据路由配置(如果有)动态加载和渲染相应的视图组件。