Vue – Vue-CLI 项目构成

简介

本文介绍使用 Vue-CLI 脚手架生成的基础项目构成说明。能更深入了解Vue项目整个运行原理。

项目构成

public 文件夹：用于存放静态资源文件，不会被打包到 webpack 中

src 文件夹：Vue 开发中的主要目录

assets 文件夹：Vue中构建页面时使用到的资源，会被打包到 webpack 中

components 文件夹：Vue 子页面组件存放位置

App.vue 文件：Vue 父页面，负责搭载 components 文件夹中的子组件载体

main.js 文件：Vue 入口文件

.gitgnore 文件：git 忽略文件列表指定的文件

babel.config.js 文件：babel 模块的配置文件

package.json 文件：webpack 包配置文件

vue.comfig.js 文件：Vue 配置文件

main.js 文件详解

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

入口文件定义

main.js 文件是整个项目中的入口文件，当项目启动时，打开index.html主页时会调用编译好的javascript文件，而编译原文件就来自main.js.

之所以main.js成为程序入口，是因为来自webpack的配置，该配置在下列目录中被定义

\node_modules\@vue\cli-service\lib\config\base.js

其中指定入口文件位置代码

webpackConfig
      .mode('development')
      .context(api.service.context)
      .entry('app')
        .add('./src/main.js')
        .end()
      .output
        .path(api.resolve(options.outputDir))
        .filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
        .publicPath(options.publicPath)

也可以通过新增webpack.config.js文件修改其入口文件定义。

render: h => h(App)

Vue 提供了 render 成员属性，我们可以把它定义为

render: function (handler) {
    handler(App)
},

render 成员为一个方法涵数，Vue会调用 render() , 并传入方法参数 handler

render( handler );

handler 是一个方法，传入 Vue 子组件，则把Vue 组件中的内存成为VM模型。

注意：render 方法会直接替换掉 index.html 中的 <div id="app"> 的元素，而非在 div 元素中添加内容

$mount('#app')

$mount() 方法和 el 属性作用相同，其方法等同于

new Vue({
  el:"#app",
  render: h => h(App),
})

Vue.config.productionTip

productionTip设置为 false ，可以阻止 vue 在启动时生成生产提示
开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的