likes
comments
collection
share

（02）Vue 实战准备——② 项目框架源码解析 | Vue.js 项目实战： 移动端“旅游网站”开发

作者站长头像
站长
· 阅读数 51
转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

涉及面试题：
请说出 Vue CLI 项目中 src 目录每个文件夹和文件的用法？

编号：[vue_02]

1 结构解析

在编辑器中打开项目 qdywxs-travel ： （02）Vue 实战准备——② 项目框架源码解析 | Vue.js 项目实战： 移动端“旅游网站”开发

1.1 外层“文件”说明

（02）Vue 实战准备——② 项目框架源码解析 | Vue.js 项目实战： 移动端“旅游网站”开发

  • .babelrc ——这是针对 babel 编译的规范说明，不用管。

  • .editorconfig ——帮助我们配置了编辑器里的语法（如，配置了“点击 tab”是两个空格的缩进： indent_size = 2 ），我们可以自己再添加一些东西，来统一编辑器的一些自动化、格式化代码。

  • eslintignore ——这里边包含的文件是不会受 .eslintrc.js 检测工具检测的。即，这些文件即使写的不标准，也不会进行语法上的提示。

  • .eslintrc.js ——这里配置了一些代码的规范。即，我们写代码时，只有按照这个规范来写，它才不会做错误的提示。

  • .gitignore ——当我们使用 git 的时候，我们希望将代码上传到线上，但有些特殊的文件我并不希望将其上传到线上去。此时，我们就可以将这些文件配置在 .gitignore 里面。

  • .postcssrc.js ——针对 Postcss 的一些配置规则。

  • package-lock.json ——这是 package 的“锁文件”。它可以帮我们确定我们安装的“第三方包”的具体版本，以保持团队编程的统一性。

  • package.json ——这里边记录有很多“依赖包”。在开发项目的时候，我们会有一些“第三方模块”的依赖，而这些“依赖”都记录在这里。

  • README.md ——这是项目说明文件。

1.2 各“文件夹”说明

（02）Vue 实战准备——② 项目框架源码解析 | Vue.js 项目实战： 移动端“旅游网站”开发

  • build ——这个文件夹里边放置的是一些 Webpack 配置文件，这一块可以不动。

  • config ——这里边是针对“开发环境”和“线上环境”的一些配置文件，这一块也可以不动。

  • node_modules ——这里边放置的是我们项目安装的“依赖包”。

  • static ——此目录下放置的是一些静态的资源，如静态图片、后续要 mock 的 JSON 数据等。

  • index.html ——项目默认的首页模板文件。

  • src ——🏆这是我们的“源代码”所放置的目录。也是我们写“工程化”代码的时候，主要编写的地方。我们打开这个目录：

    • 下边有一个 main.js 文件，这个文件是我们整个项目的“入口文件”；（02）Vue 实战准备——② 项目框架源码解析 | Vue.js 项目实战： 移动端“旅游网站”开发
// ❗️请按编号顺序阅读注释！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'  
import App from './App' /* 3️⃣-②：这个“组件”是从当前目录下的 App.vue 引入的一个组件； */
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({ // 1️⃣在这里我们创建了一个 Vue 实例；
  
  el: '#app', // 2️⃣我们让它的“挂载点”在 id 为 app 的节点上；
  
  router,
  components: { App }, /*
  										 3️⃣
                       3️⃣-①：注册了一个“局部组件”；
                        */
  
  template: '<App/>' // 4️⃣它的“模板”就是 App 这个组件的内容；
})

// 5️⃣总结：这个 Vue 实例所展示出来的内容，就是注册进来的（步骤3️⃣-①）这个 App 组件。

  • 接着，我们打开 App.vue ，其代码分为 3 个部分：（02）Vue 实战准备——② 项目框架源码解析 | Vue.js 项目实战： 移动端“旅游网站”开发

  • 这和我们之前看到的 Vue 组件完全不一样。这是因为，在这个“脚手架”工具里边，它给我们提供了一套新的“编码语法”，这种语法叫做“单文件组件”——即，仅在 1 个 .vue 文件里边，它就包含了一个组件必须的所有内容。

  • 我们把 App.vue 里边多余的代码删除掉，并做一些改动。返回页面查看，发现页面也跟着变了（💡因为，如上文所述，主入口“根组件”里边显示的内容就是 App 组件，App 组件里边的内容怎么变，页面也会跟着怎么变）：

<template>
  <div id="app">
    <!-- ❗️去除 img 标签。 -->
    <!-- <img src="./assets/logo.png"> -->
    
    <router-view/>
  </div>
</template>


<script>
export default {
  name: 'App'
}
</script>


<style>

</style>

（02）Vue 实战准备——② 项目框架源码解析 | Vue.js 项目实战： 移动端“旅游网站”开发

  • src 目录下还有几个文件夹，它们分别是指：

    （02）Vue 实战准备——② 项目框架源码解析 | Vue.js 项目实战： 移动端“旅游网站”开发

assets  // 放置的是我们项目里边用到的诸如“图片”之类的资源；
components  // 放置的是我们项目里边要用到的“小组件”；
router  // 我们把项目的所有“路由”，都放在这个目录下的 index.js 里边。

2 使用“脚手架”工具给我们带来的好处

  1. 在编写代码的过程中，我们不必再局限于 ES5 的语法，可以大胆地使用 ES6 的语法。最终，“脚手架”会自动地帮我们把 ES6 的代码打包成 ES5 的代码，然后进行浏览器上的运行；

  2. 在我们写“组件”的时候，我们完全换了一种编码的方式进行“组件”的编写。以前，我们会把 HTML 和各种逻辑耦合在一起进行编码。而现在，我们有了“单文件组件”的编码形式：一个“组件”就是以一个 .vue 后缀的文件定义的，在这个文件里包含了“组件”所有的内容（模板、逻辑、样式）。这样就做了一个非常好的“组件”的封装。

祝好，qdywxs ♥ you！

转载自:https://juejin.cn/post/7374631918112342054
评论
请登录