• 十三、Vue CLI（2）

    本章概要

    • 项目结构
    • 编写一个 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              //项目说明文件

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

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

    App.vue

    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

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

    • 1
    • 2
    • 3
    • 4

    在该文件中，使用 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>
    
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

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

    13.5 编写一个 Hello 组件

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

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

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

    






    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    导入语句中的 @ 符号表示 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"
  }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

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

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

    • 1
    • 2
    • 3

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

  • 相关阅读:
    【ARM入门】ARM、SOC、ARM授权 概念篇
    k8s单节点部署（仅master）
    软件测试技术之如何编写测试用例（6）
    vue markdown显示为html
    从React源码角度看useCallback，useMemo，useContext
    周老师话职称（陕西省职称申报好处）
    Springboot中使用拦截器、过滤器、监听器
    网工内推 | 深圳网工专场，上市公司、国企，安全认证优先
    武汉凯迪正大—电容电感测量仪
    MATLAB绘图
  • 原文地址：https://blog.csdn.net/GXL_1012/article/details/128152862