vue2工程目录

石榴16
1 阅读7分钟

image.png

image.png image.png

image.png

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

这是一个基本的HTML模板，通常用于Vue.js或其他前端框架的项目中。这个模板通过Webpack进行构建，并使用了html-webpack-plugin插件来动态地注入一些内容。下面是该模板的逐行解释： HTML 部分

  1. <!DOCTYPE html>: 定义文档类型为HTML5。
  2. <html lang="">: HTML文档的根元素。lang属性用于定义文档的语言，但在这里它是空的，通常你会看到像lang="en"或lang="zh-CN"这样的值。 <head> 部分
  3. <meta charset="utf-8">: 设置文档的字符编码为UTF-8。
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">: 这是一个针对Internet Explorer的兼容性设置，告诉IE使用其最新的渲染模式。
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">: 用于控制页面在移动设备上的显示。这里它确保页面宽度等于设备的屏幕宽度，并且初始缩放级别为1。
  6. <link rel="icon" href="<%= BASE_URL %>favicon.ico">: 设置网页的图标（favicon）。这里使用了Webpack模板语法来动态插入BASE_URL变量的值。
  7. <title><%= htmlWebpackPlugin.options.title %></title>: 设置网页的标题。这里使用了htmlWebpackPlugin.options.title来动态设置标题。 <body> 部分
  8. <noscript>: 这个标签用于在不支持JavaScript或JavaScript被禁用的浏览器中显示内容。 9-10. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>: 如果浏览器不支持或禁用了JavaScript，用户会看到这条消息。
  9. <div id="app"></div>: 这是一个空的div元素，通常用于挂载Vue或其他前端框架的应用实例。构建过程中，Webpack会将构建好的JavaScript文件注入到这个div中。
  10. <!-- built files will be auto injected -->: 这是一个注释，提示开发者构建后的文件（如JavaScript、CSS等）将自动注入到HTML中。这通常是通过html-webpack-plugin插件实现的。 总结 这个HTML模板是一个标准的、用于前端框架（如Vue.js）项目的结构。它包含了一些必要的meta标签，以及用于注入动态内容（如页面标题和构建后的文件）的Webpack模板语法。

image.png

  <div id="app">
    <FormTable msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import FormTable from './components/FormTable.vue'
export default {
  name: 'App',
  components: {
    FormTable
  }
}
</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>

这是一个 Vue.js 的单文件组件（Single File Component），通常用于构建 Vue 应用。这个组件叫做 App，是 Vue 应用的根组件。下面是对这个组件的详细解释：

<template> 部分

html复制代码
	<template>  

	  <div id="app">  

	    <FormTable msg="Welcome to Your Vue.js App"/>  

	  </div>  

	</template>

这部分定义了组件的 HTML 结构。它包含一个 div 元素，其 id 为 app，并且这个 div 中有一个自定义组件 FormTable。FormTable 组件接收一个 msg 属性，其值为 "Welcome to Your Vue.js App"。

<script> 部分

javascript复制代码
	<script>  

	import FormTable from './components/FormTable.vue'  

	export default {  

	  name: 'App',  

	  components: {  

	    FormTable  

	  }  

	}  

	</script>

这部分是组件的 JavaScript 部分，它定义了组件的行为和逻辑。

  • import FormTable from './components/FormTable.vue': 这一行导入了名为 FormTable 的另一个 Vue 组件，这个组件位于当前目录下的 components 文件夹中。
  • name: 'App': 定义了组件的名字为 App。
  • components: { FormTable }: 这是一个对象，它告诉 Vue 这个 App 组件内部要使用 FormTable 组件。这样，在模板中就可以使用 <FormTable> 标签了。

<style> 部分

css复制代码
	<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>

这部分定义了组件的样式。它针对 id 为 app 的元素设置了字体、字体平滑、文本对齐、颜色和上边距等样式。

整体而言，这个 App 组件是一个简单的 Vue 应用入口点，它引入了一个 FormTable 组件，并为其提供了一个欢迎消息。同时，它还定义了整个应用的基础样式。在实际应用中，FormTable 组件可能会包含表单和表格相关的功能，但具体的实现细节会在这个组件的单独文件中定义。

image.png

import ElementUI from'element-ui';
import'element-ui/lib/theme-chalk/index.css';
import App from'./App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

这段代码是一个简单的 Vue.js 应用程序的启动配置。它主要做了以下几件事：

  1. 导入依赖：

    • import Vue from 'vue';: 导入 Vue.js 库，这是构建 Vue 应用程序的基础。
    • import ElementUI from 'element-ui';: 导入 Element UI，这是一个流行的 Vue UI 组件库，它提供了一套丰富的组件和样式，用于快速构建用户界面。
    • import 'element-ui/lib/theme-chalk/index.css';: 导入 Element UI 的默认主题样式。这是确保组件正确显示所必需的。
    • import App from './App.vue';: 导入根组件 App.vue。这通常是 Vue 应用程序的入口点。

  2. 安装 ElementUI 插件：

    • Vue.use(ElementUI);: 使用 Vue 的 use 方法安装 ElementUI 插件。这使得你可以在 Vue 组件中直接使用 ElementUI 提供的组件。

  3. 创建 Vue 实例：

    • new Vue({...});: 创建一个新的 Vue 实例。

      • el: '#app': 指定 Vue 实例挂载的 DOM 元素。在这里，它将挂载到页面上 id 为 app 的元素上。
      • render: h => h(App): 这是一个渲染函数，它告诉 Vue 如何渲染这个实例的根组件。在这里，它渲染的是从 App.vue 导入的 App 组件。

总之，这段代码设置了 Vue.js 应用程序的基本结构，并引入了 ElementUI 作为 UI 组件库。之后，你可以在 App.vue 文件中定义你的应用的主要结构和行为，并在其中使用 ElementUI 提供的组件来构建用户界面。

注意：确保你的 HTML 文件中有一个元素，其 id 为 app，以便 Vue 实例可以挂载到这个元素上。例如：

html复制代码
	<div id="app"></div>

这样，当 Vue 实例被创建时，它会接管这个 div 元素，并渲染 App 组件的内容。

image.png

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

这是一个常见的 .gitignore 文件的内容，用于指定在 Git 版本控制中应该忽略的文件和目录。下面我将解释每一行的含义：

  1. .DS_Store

    • .DS_Store 是 macOS 系统在文件夹中创建的隐藏文件，用于存储该文件夹的自定义属性，如窗口的位置、大小等。由于这些文件是系统特有的，并且经常变化，因此通常不希望在版本控制中跟踪它们。

  2. node_modules

    • node_modules 目录通常包含通过 npm 或 yarn 安装的 Node.js 项目的依赖。由于这些依赖可以从 package.json 文件和 package-lock.json 或 yarn.lock 文件中恢复，所以不需要在版本控制中跟踪它们。

  3. /dist

    • /dist 目录通常用于存放构建后的文件。这些文件是由源代码编译或打包生成的，并且可以从源代码重新生成，因此不需要在版本控制中跟踪。

  4. # local env files

    • 这是一个注释，用于说明接下来的条目是用于忽略本地环境文件的。

  5. .env.local

    • .env.local 文件通常包含本地环境的配置信息，这些信息不应该被提交到版本控制中，因为它们可能包含敏感信息或特定于开发者的配置。

  6. .env.*.local

    • 这是一个通配符模式，用于匹配任何以 .env. 开头并以 .local 结尾的文件。这些文件通常也是用于本地环境的配置，并且应该被忽略。

  7. # Log files

    • 这是一个注释，用于说明接下来的条目是用于忽略日志文件的。

  8. npm-debug.log*

    • npm-debug.log* 是一个通配符模式，用于匹配所有以 npm-debug.log 开头的文件。这些通常是 npm 命令生成的日志文件，通常不需要在版本控制中跟踪。

  9. yarn-debug.log*
    yarn-error.log*
    pnpm-debug.log*

    • 这些条目与上面的类似，但是是用于匹配 yarn 和 pnpm 命令生成的日志文件。

  10. # Editor directories and files

  • 这是一个注释，用于说明接下来的条目是用于忽略编辑器生成的目录和文件的。
  1. .idea
  • .idea 目录通常是由 IntelliJ IDEA 或其他 JetBrains 编辑器创建的，用于存储项目的特定于编辑器的配置。
  1. .vscode
  • .vscode 目录通常包含 Visual Studio Code 编辑器的配置文件，如工作区设置、推荐的扩展等。
    • .suo
      .ntvs
    • .njsproj
    • .sln
    • .sw?
  • 这些条目是用于匹配由不同编辑器或工具生成的各种特定于项目或工作区的文件。它们通常包含与版本控制无关的信息，因此应该被忽略。

总的来说，这个文件的目的是保持 Git 仓库的整洁，避免跟踪不必要的或敏感的文件和目录。

image.png

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

这段代码是一个 Node.js 模块的导出对象，具体是针对 Babel 的配置。Babel 是一个广泛使用的 JavaScript 编译器，可以将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 版本，以便在老版本的浏览器或环境中运行。

让我们逐行解释这段代码：

javascript复制代码
	module.exports = {

这行代码开始了一个模块的导出对象。在 Node.js 中，module.exports 是用来定义该模块导出的内容，这样其他模块就可以通过 require 语句来引用和使用它。

javascript复制代码
	presets: [  

	    '@vue/cli-plugin-babel/preset'  

	  ]

这里定义了一个名为 presets 的属性，其值是一个数组。presets 是 Babel 的一个关键概念，它允许你使用一组预定义的插件集合，从而简化 Babel 的配置。

在这个数组里，只有一个元素，即 '@vue/cli-plugin-babel/preset'。这是一个指向 Vue CLI 插件提供的 Babel 预设的字符串。Vue CLI 是一个为 Vue.js 项目提供标准化构建配置的工具，它集成了 Babel 并提供了一个预设来简化 Vue.js 项目的 Babel 配置。

使用 @vue/cli-plugin-babel/preset 预设，你可以确保 Vue.js 的特定语法和特性（如 JSX、单文件组件等）在编译时被正确处理。

javascript复制代码
	}

这行代码结束了模块的导出对象。

总的来说，这段代码定义了一个 Babel 配置，该配置使用了 Vue CLI 提供的 Babel 预设来简化 Vue.js 项目的 Babel 设置。这通常用于 Vue.js 项目中，以确保代码可以被正确编译和转换，以便在各种环境中运行。

image.png

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

这段代码是一个 TypeScript 的配置文件（通常是 tsconfig.json 文件）的片段，它定义了 TypeScript 编译器的各种选项。下面我将逐一解释这些选项：

  1. target: "es5"

    • 这个选项定义了 TypeScript 编译后的 JavaScript 代码的目标版本。在这里，它被设置为 "es5"，意味着 TypeScript 代码将被编译成 ECMAScript 5（ES5）版本的 JavaScript，这样可以确保代码在较老的浏览器或环境中也能运行。

  2. module: "esnext"

    • 这个选项定义了 TypeScript 应该使用哪种模块系统来组织代码。"esnext" 表示使用 ECMAScript 的下一个版本（即最新的、尚未成为标准的）的模块系统。这通常意味着使用 ECMAScript 的模块语法（import 和 export）。

  3. baseUrl: "./"

    • baseUrl 是解析非相对模块名的基路径。在这个例子中，它被设置为 "./"，表示当前目录。这与其他选项（如 paths）一起使用，可以帮助你自定义模块解析。

  4. moduleResolution: "node"

    • 这个选项定义了模块解析的策略。"node" 表示使用 Node.js 的模块解析策略，这通常意味着编译器会查找 node_modules 目录中的模块。

  5. paths:

    • paths 允许你配置模块名的别名。在这个例子中，"@/*" 被映射到 "src/*"。这意味着当你在 TypeScript 代码中导入一个以 @ 开头的模块时（例如 import something from '@/someModule'），编译器会查找 src 目录下的对应模块。

  6. lib:

    • lib 数组列出了在编译过程中应该包含的类型声明文件。这些类型声明文件定义了 TypeScript 中的全局变量、函数和其他类型。

      • "esnext": 包含最新的 ECMAScript 标准中的类型声明。
      • "dom": 包含浏览器提供的全局 DOM API 的类型声明。
      • "dom.iterable": 包含一些可迭代的 DOM API 的类型声明。
      • "scripthost": 包含宿主环境的类型声明，例如 window 对象。

通过配置这些选项，你可以控制 TypeScript 编译器的行为，确保代码按照你的期望进行编译，并且与你的项目需求相匹配。

image.png

"name": "hello_vue2",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "hello_vue2",
      "version": "0.1.0",
      "dependencies": {
        "axios": "^1.6.8",
        "core-js": "^3.8.3",
        "element-ui": "^2.15.14",
        "vue": "^2.6.14"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
        "vue-template-compiler": "^2.6.14"
      }
    },
    "node_modules/@aashutoshrathi/word-wrap": {
      "version": "1.2.6",
      "resolved": "https://registry.npmmirror.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
    },

image.png

{
  "name": "hello_vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.6.8",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.14",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

这是一个项目的 package.json 文件的部分内容，主要描述了项目的依赖和版本信息。下面是对每个部分的解释：

  1. name:

    • "hello_vue2": 这是项目的名称，通常用于在npm或其他包管理器中唯一标识该项目。

  2. version:

    • "0.1.0": 这是项目的版本号。

  3. lockfileVersion:

    • 2: 这表示项目使用的锁文件版本是2。锁文件（如package-lock.json或yarn.lock）用于确保每次安装依赖时都能得到相同的版本，避免版本冲突。

  4. requires:

    • true: 这意味着项目依赖于其他的npm包。

  5. packages:

    • 这是一个对象，其中包含了项目的主要依赖信息。

      • "" :

        • 这是一个空字符串键，它通常表示项目的主入口点或根目录。

        • name 和 version: 与文件顶部的name和version相同。

        • dependencies:

          • 这些是项目的运行时依赖。

            • "axios": "^1.6.8": 表示项目依赖于axios库，且接受的版本是1.6.8或更高但低于2.0.0的任意版本（^符号表示允许安装最新的小版本更新）。
            • "core-js": "^3.8.3", "element-ui": "^2.15.14", "vue": "^2.6.14": 类似地，这些是其他运行时依赖。

        • devDependencies:

          • 这些是项目的开发时依赖，即在开发过程中需要但在运行时可能不需要的依赖。

            • 这里的依赖主要用于Vue.js项目的构建、代码检查和格式化等任务。

从这段package.json中，我们可以得知这是一个基于Vue 2的项目，它使用了axios进行HTTP请求，element-ui作为UI库，以及一系列其他工具（如Babel、ESLint等）进行代码编译和检查。

注意：package.json通常还包含其他信息，如项目的描述、脚本命令、仓库链接、贡献者等，但在这段代码中并没有提供这些信息。

image.png

# hello_vue2

## Project setup

npm install


### Compiles and hot-reloads for development

npm run serve


### Compiles and minifies for production

npm run build


### Lints and fixes files

npm run lint


### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

hello_vue2

项目设置

复制代码
	npm install

运行上述命令将安装package.json文件中列出的所有依赖项。npm（Node Package Manager）会检查package-lock.json文件（如果存在）或package.json中的依赖信息，并从npm仓库下载所需的包及其依赖项。

开发环境下编译并热重载

复制代码
	npm run serve

这个命令会启动一个开发服务器，并且当源代码发生变化时，服务器会自动重新编译并刷新页面，实现所谓的“热重载”功能。这非常有助于在开发过程中实时查看代码更改的效果。

为生产环境编译并压缩代码

复制代码
	npm run build

这个命令会编译并压缩项目代码，生成用于生产环境的优化过的文件。通常，这些文件会被部署到服务器上供用户访问。

检查并修复代码格式

复制代码
	npm run lint

这个命令会使用ESLint工具检查项目中的代码格式和潜在的错误，并尝试自动修复一些问题。这有助于保持代码的一致性和可读性。

自定义配置

Vue CLI提供了丰富的配置选项，允许用户根据项目需求进行个性化设置。你可以参考配置参考文档来了解更多关于Vue CLI配置的信息，并根据需要进行调整。

总之，这些命令和配置选项为Vue 2项目提供了从开发到部署的完整工作流程，使开发者能够高效地构建和维护Vue应用。

image.png

module.exports = {
    devServer: {
      proxy: {
        '/api': {
          // 这里是后台提供给我们的接口地址
          target: 'http://localhost:8081/',
          changeOrigin: true,  //允许跨域
          pathRewrite:{
            /* 当我们在浏览器看到的请求地址为：http://localhost:8080/api/demo_war/login */
            /* 实际上我们访问的地址为：http://localhost:8081/demo_war/login 因为重写了/api */
            /* 如果后台提供的接口本身就带有api，则无需执行重写路径这个步骤 例如:http://localhost:8081/api/demo_war/login */
            '^/api':''  //重写路径
          }
        }
      }
    }
  }

这段代码是一个用于配置 Vue.js 项目的开发服务器的 JavaScript 对象。特别地，它使用了 webpack-dev-server 的代理功能来将特定的请求转发到另一个服务器。以下是对这段代码的详细解释：

  1. module.exports: 这是 Node.js 中的一个模块导出机制。这意味着该对象会被导出，以便其他文件或模块可以导入并使用它。在 Vue.js 项目中，这通常用于配置 webpack 或其他构建工具。
  2. devServer: 这是 webpack-dev-server 的配置对象。webpack-dev-server 是一个用于开发环境的轻量级 Node.js Express 服务器，它使用 webpack 打包项目，并提供实时重新加载功能。
  3. proxy: 在 devServer 对象中，proxy 用于设置代理规则。代理通常用于在开发环境中将 API 请求转发到另一个服务器（例如后端服务器）。
  4. '/api' : 这是一个匹配模式。它表示所有以 /api 开头的请求都应该被代理。
  5. target: 这是代理的目标地址，即请求应该被转发到的服务器的地址。在这个例子中，所有的 /api 开头的请求都会被转发到 http://localhost:8081/。
  6. changeOrigin: 设置为 true 时，它告诉代理在请求中更改 origin 头，使得请求看起来像是从 webpack-dev-server 发出的，而不是从客户端浏览器发出的。这有助于处理跨域请求。
  7. pathRewrite: 这是一个对象，用于重写请求的 URL 路径。在这个例子中，它使用正则表达式 '^/api' 来匹配所有以 /api 开头的路径，并将它们重写为空字符串。这意味着，例如，请求 /api/demo_war/login 会被重写为 /demo_war/login 并发送到 http://localhost:8081/。

最后一段注释解释了路径重写的目的和用法。它指出，如果后端接口本身已经带有 /api 前缀，那么可能不需要进行路径重写。但是，如果前端代码中的请求路径包含 /api，而后端接口的路径不包含，那么就需要使用路径重写来确保请求被正确地转发到后端服务器。

简而言之，这段代码配置了 webpack-dev-server 的代理功能，以便在开发过程中将 /api 开头的请求转发到 http://localhost:8081/，并可能根据需要进行路径重写。

avatar
文章
阅读
粉丝
相关推荐
UE GAS进阶-深入GE
850阅读
 · 
1点赞
关于Node WebSocket中WS库的简单使用
27阅读
 · 
0点赞
十九、CSS 布局之元素垂直对齐方式
134阅读
 · 
0点赞
连续时间折线图的前后端实现
219阅读
 · 
0点赞
一文搞懂==中的隐式类型转换🔥🔥
68阅读
 · 
1点赞