本章概要

• 项目结构
• 编写一个 Hello 组件
• package.json

13.4 项目结构

通过 Vue CLI 生成的项目的目录结构及各文件夹和文件的用途说明如下：

|--node_modules           //项目依赖的模块
|--public                 //该目录下的文件不会被 Webpack 编译压缩处理，医用第三方库的js
|  |--favicon.ico         //图标文件
|  |--index.html          //项目的主页面
|--src                    //项目代码的主目录
|  |--assets              //存放项目中的静态资，如 CSS、图片等
|     |--logo.png         //logo图片
|  |--components          //编写的组件放在这个目录下
|     |--HelloWorld.vue   //Vue CLI 创建的 HelloWrold 组件
|  |--App.vue             //项目的根组件
|  |--main.js             //程序入口js，加载各种公共组件和所需要用到的插件
|--.browserslistrc        //配置项目目标浏览器的范围
|--.eslintrc.js           //ESLint 使用的配置文件
|--.gitignore             //配置在 git 提交项目代码时忽略哪些文件或文件夹
|--babel.config.js        //Babel 使用的配置文件
|--package.json           //npm 的配置文件，其中设定了脚本和项目依赖的库
|--package-lock.json      //用于锁定项目实际安装的各个 npm 包的具体来源和版本号
|--README.md              //项目说明文件

然后看一下几个关键文件的代码。

App.vue

这就是一个典型的单文件组件，在一个文件中包含了组件代码、模板代码和 CSS 样式规则。在这个组件中引入了 HelloWorld 组件，然后在 template 元素中使用它。使用 export 语句将 App 组件作为模块的默认值导出。
App 组件是项目的主组件，可以替换它，也可以保留它。如果保留，就是修改代码中的导入语句，将其替换为导入的组件即可。

main.js 是程序入口 JavaScript 文件，该文件主要用于加载各种公共组件和项目需要用到的各种插件，并创建 Vue 的根实例。

main.js

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

在该文件中，使用 import 语句按需导入 createApp，这就是 Vue 3.0 引入的 Tree-shaking 支持。不同于在 HTML 文件中的引用方式，前面章节是通过 script 元素引入 Vue 的 js 文件。后面基于脚手架项目的开发，对模块的引入都会采用这种方式。
接下来使用 import 语句导入 App 组件，调用 createApp 方法创建应用程序实例，调用 mout 方法在 id 为 app 的 DOM 元素上装载应用程序实例的根组件。

index.html

favicon.ico">

可以看到一个 id 属性为 app 的空的 div 元素，组件实例会动态挂载到该元素上。在这种方式下，就没有 v-cloak 指令的用武之地了。

13.5 编写一个 Hello 组件

在《二、准备开发与调试环境》章节，已经介绍并安装了 Visual Studio Code ，并对它进行了配置，以支持基于 Vue.js 的项目开发，现在启动 Visual Studio Code，选择【文件】——>【打开文件夹】选项，选中前面使用 Vue CLI 创建的脚手架项目所在的文件夹并打开。
在左边窗口中可以看到项目的目录接口，如下：

右击 components 目录，从弹出的快捷菜单中选择【新建文件】选项，输入 Hello.vue ，创建一个单文件组件。编写代码如下所示：

打开 App.vue 文件，将 HelloWorld 组件替换为 Hello 组件，修改的代码如下：

导入语句中的 @ 符号表示 src 目录，该符号用于简化路径的访问。Hello 组件没有写扩展名，这没有问题，因为项目内置的 webpack 能够自动添加后缀“.vue”。
接下来，在 Visual Studio Code 的菜单栏中选择【终端】——>【新终端】选项，在弹出的终端窗口中输入命令 npm run serve，开始运行项目，如图：

打开浏览器，在地址栏输入 http://localhost:8080。显示效果如下：

13.6 package.json

这是一个 JSON 格式的 npm 配置文件，定义了项目所需要的各种模块，以及项目的配置信息（如名称、版本、许可证等元数据），在项目开发中经常会需要修改该文件的配置内容，所以这里单独对这个文件的内容说明一下。代码如下所示：

{"name": "helloworld",  //项目名称"version": "0.1.0",    //项目版本"private": true,       //是否私有项目"scripts": {           //值是一个对象，其中指定了项目声明周期各个环节需要执行的命令"serve": "vue-cli-service serve",   //执行 npm run serve 运行项目"build": "vue-cli-service build",   //执行 npm run build 构建项目"lint": "vue-cli-service lint"      //执行 npm run lint ，运行ESLint验证并格式化代码},"dependencies": {   //配置项目依赖的模块列表，key 是模块名称，value 是版本范围"core-js": "^3.6.5","vue": "^3.0.0"},"devDependencies": {   //这里的依赖是用于开发环境的，不发布到生产环境"@vue/cli-plugin-babel": "~4.5.9","@vue/cli-plugin-eslint": "~4.5.9","@vue/cli-service": "~4.5.9","@vue/compiler-sfc": "^3.0.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0"}
}

在使用 npm 安装依赖的模块时，可以根据模块是否需要在生产环境下使用而选择附加 -S（即–save，生产环境）或 -D （即 --save-dev，开发环境）参数。例如，项目中使用了界面 UI 组件库 element-ui，它肯定是要在生产环境中用到的，就可以执行下面的命令来安装。

npm install element-ui -S
# 等同于
npm install element-ui --save

安装后会在 dependencies 中写入依赖项，在项目打包发布时，dependencies 中写入的依赖项也会一起打包。
如果某个模块只是在开发环境中使用，则可以使用 -D 参数安装，在安装完成后将依赖项写入 DevDependencies，而在 DevDependencies 中的依赖项，在项目打包发布时并不会一起打包。
在发布代码时，项目下的 node_modules 文件夹都不会发布，那么在下载了别人的代码后，怎样安装依赖呢？这时可以在项目根路径下执行 npm install 命令，该命令会根据 package.json 文件下载所需依赖。