小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
上一次介绍如何安装 Vue3 ，使用脚手架来创建一个 Vue3 项目，现在用于 vscode 打开项目，来看项目结构，如下图。
pakcage.json
在包管理文件 package.json 文件中列出了开发和发布时候依赖的包(库)。
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
开发过程依赖库都列在 "devDependencies" 下
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
在 scripts 中列出了 serve 、build 和 lint 来运行项目、构建项目以及检测项目
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
package-lock.json
这个文件只有在 npm 在 5 以上版本才存在这个文件，也就是说在 npm 5 版本后才引进这个问个 package-lock.json，好处是让 npm 安装依赖时速度更快了。这是因为起初 npm 安装依赖时速度比较慢，所以 google facebook 就自己写了一个 yarn 工具来快速从 npm 仓库里拉取依赖。所以后来 npm 在 5 以后也引入 yarn 安装方式，当时 yarn 引入第三方依赖时就会引入 pakcage-lock.json。
这里既然说了就是把为什么有 pakcage-lock.json 这个文件就会下载比较快，当你用 npm init -y 初始化一个项目时候，这时并不会产生 package-lock.json 而是当你开始安装依赖时候就会产生 package-lock.json 文件，这个文件详细记录下载依赖的版本、下载地址以及hash 值等信息，所以在下一次安装时就可以通过读取这个文件快速定位到依赖的包，从而实现快速安装依赖包。
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
项目中的文件夹
| 项目 | 描述 | |
|---|---|---|
| Node_modules | 放置依赖库的文件 | |
| public | 其中放置一些静态资源，这里暂时包含两个文件 favicon.icon 和 index.html | |
| src | 项目开发都在这个目录下进行开发 |
项目源文件(src)
main.js
这是主入口文件，通常在这个文件中做一些全局的事情。这里包管理支持 ESM，我们从 vue 导入 createApp 方法，然后将根组件传入这个方法返回对象就可以挂载到指定的元素上。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
这里将 Vue 的根组件 App 绑定到 id 为 app 的 div 的 DOM 元素上，这里与 Vue2.0 略有不同，这里使用 createApp 来创建一个应用。
App.vue
<template>
<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>
看这个文件主要有三部分组成，template 标签内为视图 script 间为脚步代码而 style 为样式代码。在 script 中通常返回一个对象，这就是 Vue 的组件，Vue 也是由 component(组件)构成，业务逻辑主要定义在这个对象里。随后我们主要就是了解这个对象，其中 name 属性定义名称，components 属性注册一下在当前组件中使用到组件。
