Oliver's Blog

Vue项目基本结构

  • Jul 05, 2021

项目初始文件结构

通过Vue-CLI创建的项目文件架构

image-20220924084138521

  • node_modules 依赖库文件夹
  • public/index.html 入口页面
  • src/main.js 主JS
  • src/App.vue 主JS引入的组件
  • src/componets 自定义组件文件夹
  • vue.config.js Vue配置文件

层级结构简析

入口页面

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

预留元素<div id="app"></div>，打包时将组件内容放进此div中

主JS

src/main.js

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

Vue.config.productionTip = false

// 创建Vue实例对象且引入主组件App，并挂载到入口页面index.html的<div id="app"></div>元素中
new Vue({
  render: h => h(App),
}).$mount('#app')

render: h => h(App) 相当于完成了App组件的引入工作

<div id="app">
  <App></App>
</div>

new Vue({
    components: {
        App
    }
});

主组件

主JS引入的App组件

src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

开发的自定义组件，如初始示例HelloWorld，放置在App组件内部

Vue3的一些变化

主JS

引入createApp方法取代Vue2的构造函数，调用createApp方法创建的对象相当于轻量级的Vue实例对象

import { createApp } from 'vue'  
import App from './App.vue'  
  
createApp(App).mount('#app')
Search