十三、Vue CLI（2）

最新推荐文章于 2024-05-29 17:13:16 发布

一只小熊猫呀

最新推荐文章于 2024-05-29 17:13:16 发布

阅读量4.7k

点赞数

分类专栏： # Vue.js 3.0 从入门到实战文章标签： vue.js Vue3.0项目结构编写一个Hello组件 package.json

本文链接：https://blog.csdn.net/GXL_1012/article/details/128152862

版权

Vue.js 3.0 从入门到实战专栏收录该内容

54 篇文章 10 订阅

订阅专栏

本章概要

项目结构
编写一个 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

<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>

这就是一个典型的单文件组件，在一个文件中包含了组件代码、模板代码和 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

<!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>

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

13.5 编写一个 Hello 组件

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

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

<template>
  <p>{{message}}</p>
</template>

<script>
export default {
  data(){
    return {
      message: 'Hello, Vue.js'
    }
  }
}
</script>

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

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <Hello />
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'App',
  components: {
    Hello
  }
}
</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>

导入语句中的 @ 符号表示 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 文件下载所需依赖。