【Vue】项目目录介绍和运行流程

洛上言

于 2024-06-05 09:53:01 发布

阅读量506

点赞数 4

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39921135/article/details/139462137

版权

Vue 专栏收录该内容

228 篇文章 1 订阅

订阅专栏

文章目录

一、项目目录介绍
二、`public/index.html`
三、src/main.js
四、运行流程

一、项目目录介绍

68209214852

虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可，这三个文件就决定了我们项目的运行

main.js 入口文件
App.vue App根组件
index.html 模板文件

我们以后在打开工程化项目的时候，养成一个习惯：直接把这个工程化的项目作为根目录直接在VSCode中打开，不要出现多个项目并行的情况，否则

维护起来不是很好维护，光一个项目就有很多文件了
有一些相关的配置项，比如语法的检测，也会不稳定
es检测可能会有问题

babel.config.js：跟babel有关的，进行语法降级的

jsconfig.json是用来配js语法提示的，

二、`public/index.html`

<body>
  <!-- 兼容：给不支持js的浏览器一个提示，提示你‘We're sorry’，即：这个项目没有JS是运行不了的 -->
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>

  <!-- Vue所管理的容器：将来创建结构动态渲染这个容器 -->
  <div id="app">
    <!-- 
        工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染，而App.vue通常需要配合main.js里的render来创建
        即这里面不再放东西了，说白了这里就是个容器
      -->
  </div>

  <!-- built files will be auto injected -->
</body>

三、src/main.js

通常这里会写false，这个配置不写都可以

// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from 'vue'

// 2. 导入 App.vue 根组件，一般称它为根组件
import App from './App.vue'

// 提示：当前处于什么环境 (生产环境 / 开发环境)
Vue.config.productionTip = false

// 3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
    // el: '#app', 作用：和$mount('选择器')作用一致，用于指定Vue所管理容器
    // render的简写: h => h(App),
    // 完整写法：
    render: (createElement) => {
        // 基于App创建元素结构，并且将创建完的元素结构return，这个结构就用于将来我们渲染index
        // 它直接将形参改写成了h，这样就简短很多
        return createElement(App)
    }
}).$mount('#app')