从0开始学Vue系列11--脚手架结构分析

清欢爱蹦跶
129 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

我要一步一步往上爬~大家好，我是努力不浪费每分每秒热爱生活的小朋友，今天我们来一起学习一下Vue脚手架的结构！

上一章节我们创建了个Test例子，用VS Code打开文件夹，可以看到如下结构：

配置文件：

图片1.png

  1. .gitignore：git的忽略文件，不想接受git管理的文件和文件夹配置的地方
  2. babel.config.jsbabel的控制文件，ES6转ES5时候会用到，一般情况下不用配置，可以直接使用官方提供的
  3. package.json包的说明书，里面有包的名字、版本、依赖、库、常用命令等
  4. package-lock.json包版本控制文件，控制每次能下载到指定版本的包
  5. README.js对整个工程的说明

src文件夹里的文件

图片2.png

  1. main.js：整个项目的入口文件，import Vue from 'vue'作用是引入vue，import App from './App.vue'作用是引入APP组件，它是所有组件的父组件，Vue.config.productionTip = false作用为关闭vue的生产提示，最后new vue创建实例
  2. App.vue: 它是主组件，是页面的入口文件，也是vue页面资源的首加载项，我们也可以直接把组件写这里，不用 components 目录
  3. components:放置组件的地方，这里只有一个Helloworld组件
  4. assets:放置静态资源的文件夹，这里有一张logo图片

public文件夹里的文件

图片3.png

  1. favicon.ico：网页的页签图标
  2. index.html：整个应用的界面
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">代码是针对IE浏览器的特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面。
  • <meta name="viewport" content="width=device-width,initial-scale=1.0">开启移动端的理想视口
  • <link rel="icon" href="<%= BASE_URL %>favicon.ico">配置页签图标，底层实现了<%= BASE_URL %>直接代表publi路径，我们不用./复杂的表示了
  • <title><%= htmlWebpackPlugin.options.title %></title>配置网页标题，去package.json里面找name作为标题，webpack里面的插件实现的功能
  • <noscript>表示当浏览器不支持JS时，noscript里面的元素就会被渲染

执行流程

我们执行npm run serve命令，会自动找到src文件夹里的main.js文件，引入vue和APP，自动找到APP.vue，里面引用了components的组件，那么就会去执行组件文件中的代码，执行结果会汇总到APP.vue里面， main.js会把APP放入容器中，最后找到index.html里面的<div id="app"></div>代码，放入容器里面

avatar
文章
阅读
粉丝