【Vue.js 3.0】Day-02 Vue.js 分析工程结构目录

Vue3工程结构

|—— node_modules：通过 npm install 下载安装的项目依赖包
|—— public：存放静态资源公共资源，不会被压缩合并

|       |——3DModel：存放.glb3D模型
|       |——favicon.ico：网站图标
|       |——index.html：首页入口.html文件
|——src：项目开发主要文件夹
|       |——api
|       |——assets：静态文件，存放图片
|       |——components：存放组件
|       |——store：与vuex相关
|       |——styles：存放样式
|       |——utils
|       |——views：界面组件
|       |——App.vue：根组件
|       |——main.js：入口文件
|       |———router.js：存放路由，实现界面跳转
|—— .gitignore：用来配置那些文件不归git管理
|—— package.json：项目配置和包管理文件（项目依赖和技术）
|—— README.md：说明文档，主要看项目运行的命令，项目的介绍
|—— vue.config.js：项目配置信息：跨域proxy代理

入口文件 main.js

// 引入的不在是 Vue 构造函数了, 引入的是一个名为 createApp 的工厂函数 
// 工厂函数的特点就是无需通过 new 关键字去调用
import { createApp } from 'vue'

// 引入所有组件的外壳组件 
import App from './App.vue'

/**
 * createApp(App) : 创建应用实例对象--app, 
 *  1.类似vue2中的vm, 但app比vm更`轻`, 属性方法没有之前多了)
 *  2.createApp(App).mount('#app')  简写形式 
 *  3.app的本质就是一个对象！component、mixin、 mount、 unmount 等方法！
 **/
const app =  createApp(App)
console.log("@@@", app);
// 挂载 
app.mount('#app')

// 卸载组件 
// setTimeout(() =>{
//     app.unmount('#app')
// }, 1000)

 根组件|外壳组件 App.vue

<template>
  <!--  Vue3组件模板可以没有根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</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>