现代 Web 开发全攻略:Node.js、npm、Webpack、Vue.js 和 Element-UI 的实战指南

现代 Web 开发全攻略:Node.js、npm、Webpack、Vue.js 和 Element-UI 的实战指南

  • 一 . Node.js
    • 1.1 什么是 Node.js ?
    • 1.2 Node.js 的安装
    • 1.3 快速入门
      • 1.3.1 控制台输出
      • 1.3.2 使用函数
      • 1.3.3 模块化编程
  • 二 . npm 包管理器
    • 2.1 什么是 npm ?
    • 2.2 npm 命令
      • 2.2.1 初始化工程
      • 2.2.2 本地安装 (了解)
      • 2.2.3 全局安装
      • 2.2.4 批量下载
      • 2.2.5 淘宝 npm 镜像
      • 2.2.6 运行工程 + 编译工程 (待会使用)
  • 三 . Webpack
    • 3.1 什么是 Webpack ?
    • 3.2 Webpack 安装
    • 3.3 打包操作
      • 3.3.1 Webpack 原始方式
      • 3.3.2 基于 NPM 方式
    • 3.4 webpack-dev-server 开发服务器
      • 3.4.1 介绍
      • 3.4.2 使用
  • 四 . vue-cli 脚手架
    • 4.1 脚手架介绍
    • 4.2 快速入门
    • 4.3 基础介绍
      • 4.3.1 脚手架设置
      • 4.3.2 目录分析
      • 4.3.3 路由
    • 4.4 小案例
  • 五 . Element-UI 组件库
    • 5.1 安装
    • 5.2 快速入门 : 实现 Element-UI 中的表格

探索现代 Web 开发的世界,我们不可避免地会接触到 Node.js、npm、Webpack、Vue.js 和 Element-UI 这些强大的工具。它们不仅极大地提升了开发效率,还为构建高效、可维护的前端应用提供了坚实的基础。在本文中,我们将深入探讨这些技术的核心概念、安装方法和实际应用,并通过一系列示例和案例分析,来去全面掌握前端开发的新技能。

在这里插入图片描述

如果你觉得此专栏对你有帮助的话 , 还可以订阅一下此专栏
https://blog.csdn.net/m0_53117341/category_12778663.html

一 . Node.js

1.1 什么是 Node.js ?

官网 : https://nodejs.org/docs/latest/api/

中文学习网 : http://nodejs.cn/learn

Node.js 是一个开源和跨平台的 JavaScript 运行时环境 . Node.js 在浏览器之外运行 V8 JavaScript 引擎 (Chrome 的内核) , 这使得 Node.js 的性能非常强 .

我们就可以将 Node.js 理解成浏览器即可

前端的底层 HTML、CSS、JavaScript , 这些都不需要编译 , 由 Node.js 内部的浏览器解释运行 (解释型语言)

其实我们可以类比来理解 , 将 Node.js 理解成 Java 的 JDK

其中 , Node.js 还有一个包管理器 npm , 是全球最大的开源库生态系统

小结 : Node.js 是一个开源和跨平台的 JavaScript 运行时环境 , 功能类似于浏览器 .

1.2 Node.js 的安装

番外 2 : Node.js 的安装

1.3 快速入门

1.3.1 控制台输出

我们创建一个 demo1.js 来进行演示

然后在里面随便编写一个方法

let a = 10;
let b = 20;console.log(a + b);

我们可以在控制台利用 Nodejs 来打开

我们执行命令 node demo1.js

1.3.2 使用函数

我们创建 demo2.js 文件

然后输入这段代码

function add(a, b) {return a + b;
}let c = add(100, 200);console.log(c);

之后我们依然通过刚才的方式 , 运行这段代码

执行 node demo02.js 命令

1.3.3 模块化编程

我们先创建一个 demo3_1.js 文件

在这里插入图片描述

然后将该模块的内容进行导出

exports.add = function (a, b) { // 导出return a + b;
}

实际上就是将 let 关键字替换成 exports.

之后我们再创建 demo3_2.js 文件

在这里插入图片描述

然后就可以导入刚才的模块

let demo = require('./demo3_1');  // 导入 ./ 必须书写,表示使用当前路径导入 demo3_1.js 文件的内容console.log(demo.add(400, 600));

那接下来就可以运行了 , 使用 node demo3_2.js 命令来去运行

二 . npm 包管理器

2.1 什么是 npm ?

npm 全称是 Node Package Manager , 是 Node.js 标准的软件包管理器 .

它起初是作为下载和管理 Node.js 包依赖的方式 , 但是现在也已经成为前端 JavaScript 中使用的方式 .

npm 就可以理解成 Maven

2.2 npm 命令

2.2.1 初始化工程

我们先进行这样的操作 : 在当前目录中创建两个文件夹 work1 和 work2 , 然后将我们之前写好的几个 demo 文件移动到 work1 目录下

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

那接下来 , 我们就针对 work2 文件夹进行初始化工程操作

那接下来执行此命令

npm init

此时我们可以看到 , 生成了一个 package.json 文件

我们后续根据需要也可以对这个文件进行修改

2.2.2 本地安装 (了解)

我们可以尝试安装 express 框架 (Node 的 Web 框架)

npm install express

在这里插入图片描述

下载完毕之后 , 我们可以看到几处变化

node_modules 文件夹用于保存下载的 js 库 (就相当于 Maven 的本地仓库) .

package-lock.json 是当 node_modules 或者 package.json 发生变化的时候 , 自动生成的文件 .

package.json 中的 dependencies

关于版本号的定义 :

  1. 指定版本 : 比如 1.2.2, 遵循 “大版本.次要版本.小版本” 的格式规定 , 安装时只安装指定版本 .
  2. 波浪号 + 指定版本 : 比如 ~1.2.2 , 表示安装 1.2.x 的最新版本 (不低于 1.2.2) , 但是不安装 1.3.x , 也就是说安装时不改变大版本号和次要版本号
  3. 插入号 + 指定版本 : 比如 ˆ1.2.2 , 表示安装 1.x.x 的最新版本 (不低于 1.2.2) , 但是不安装 2.x.x , 也就是说安装时不改变大版本号 . 需要注意的是 , 如果大版本号为 0 , 则插入号的行为与波浪号相同 , 这是因为此时处于开发阶段 , 即使是次要版本号变动 , 也可能带来程序的不兼容 .
  4. latest : 安装最新版本 .

2.2.3 全局安装

我们刚才介绍的本地安装 , 会将 js 库安装在当前目录 (node_modules) , 那只对当前工程有效 , 而使用全局安装会将库安装到全局目录下 .

我们可以通过命令查询全局目录在哪里

npm root -g

我的目录 : C:\Users\Ray\AppData\Roaming\npm\node_modules

那我们可以进行全局安装 vue , 命令如下 (先别执行 , 后续有其他方案)

npm install vue -g

2.2.4 批量下载

我们之前介绍过 , 在 package.json 文件中 , 有一个 dependencies 部分

在这里插入图片描述

这一部分是用来存储我们所需要的依赖的 , 那我们就可以将需要的依赖标注到这里 , 然后进入到 package.json 所在的目录 , 执行命令

npm install

此时 , npm 就会自动下载 package.json 中依赖的 js 库 .

2.2.5 淘宝 npm 镜像

请查看 番外 3 : cnpm 报错解决方案

2.2.6 运行工程 + 编译工程 (待会使用)

# 开发阶段测试运行
npm run dev
# 构建编译工程
npm run build

三 . Webpack

3.1 什么是 Webpack ?

Webpack 是一个现代的 JavaScript 应用程序的静态模块打包器 , 我们接下来要学的 vue-cli 脚手架环境 , 就集成了 Webpack , 才能对各类文件进行打包处理

官网如下 : https://webpack.js.org/

Webpack 我们只需要关注他是一个静态模块打包器即可

3.2 Webpack 安装

执行这两条命令即可

我们需要先配置好淘宝 npm 镜像

cnpm install webpack@4.41.5 -g
cnpm install webpack-cli@3.3.12 -g

在这里插入图片描述

在这里插入图片描述

安装之后我们可以查看对应的版本号

webpack -v
webpack-cli -v

全局目录中也成功显示

在这里插入图片描述

3.3 打包操作

3.3.1 Webpack 原始方式

我们新创建一个文件夹 work3 , 然后在该文件夹下创建 src 文件夹

在这里插入图片描述

在这里插入图片描述

然后我们先在 src 文件夹创建 bar.js

在这里插入图片描述

然后编写一个函数 , 将这个函数导出

// 导出 info 函数
exports.info = function (str) {document.write(str);
}

接下来 , 继续在 src 目录下创建 logic.js 文件

然后继续编写函数 , 将这个函数导出

// 将 add 函数导出
exports.add = function (a, b) {return a + b;
}

接下来 , 在 src 目录下创建 main.js 文件

// 导入 bar.js
var bar = require('./bar');// 导入 logic.js
var logic = require('./logic');bar.info('Hello world!' + logic.add(100, 200));

接下来就需要创建配置文件 webpack.config.js , 要求这个文件必须与 src 处于同级目录

在这里插入图片描述

在这里插入图片描述

然后将这段代码复制到 webpack.config.js 中

var path = require("path"); // 导入 node.js 中专门操作路径的模块, 固定写法
// 执行 webpack 命令的时候会读取到 module.exports 中的内容
module.exports = {// 执行 webpack 命令的时候, 读取入口 main.js,// 由于 main.js 关联 bar.js 和 logic.js, 所以会将这三个 js 文件合并到一个 js 文件中entry: './src/main.js', // 打包入口文件的路径// 输出文件位置output: {// __dirname 表示当前工程目录// 将导出的总 js 文件输出到 dist 文件夹下面的 bundle.js 文件path: path.resolve(__dirname, './dist'), // 输出文件的存放路径filename: 'bundle.js' // 输出文件的名称}
};

以上代码的意思是 : 读取当前目录下 src 文件夹中的 main.js (入口文件) 内容 , 把对应的所有的 js 文件打包 , 打包后的文件放入当前目录的 dist 文件夹下 , 打包后的 js 文件名为 bundle.js

webpack 的 4.x 版本中默认约定 :

  • 打包的入口文件为 src -> main.js
  • 打包的输出文件为 dist -> index.js

然后在 webpack.config.js 的上一层目录中执行打包命令

webpack

此时就打包成功了 , 并且成功对前端源码文件进行压缩了

在这里插入图片描述

接下来 , 我们就可以创建一个 index.html 文件来去引入刚才生成的 js 了

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

然后引入 bundle.js 文件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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"><title>Document</title><!-- 引入 dist/bundle.js 文件 --><script src="./dist/bundle.js"></script>
</head>
<body></body>
</html>

此时我们查看一下效果

在这里插入图片描述

3.3.2 基于 NPM 方式

我们依然需要新创建一个目录

在这里插入图片描述

在这里插入图片描述

然后用终端的方式打开该目录

在这里插入图片描述

然后执行命令

npm init -y

-y 可以直接生成默认配置 , 无需手动输入

在这里插入图片描述

然后新创建 src 源代码目录 , 将刚才编写的 bar.js、logic.js、main.js 文件复制到 src 目录中

在这里插入图片描述

然后新创建 index.html , 并引入 bundle.js

在这里插入图片描述

运行 npm install webpack webpack-cli 命令 , 安装 webpack 相关的包

如果全局安装过 webpack 和 webpack-cli 工具 , 就可以跳过了 . (我们已经安装过了)

在项目的根目录下 , 创建名为 webpack.config.js 的 webpack 配置文件 , 内容跟刚才一致

在这里插入图片描述

在 package.json 配置文件中的 scripts 节点下面 , 新增 dev 脚本

在这里插入图片描述

{"name": "work4","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack"},"keywords": [],"author": "","license": "ISC"
}

在终端中运行 npm run dev 命令 , 启动 webpack 进行打包操作

在这里插入图片描述

此时 dist 目录以及 bundle.js 文件已经生成

在这里插入图片描述

3.4 webpack-dev-server 开发服务器

3.4.1 介绍

我们目前如果修改 main.js 的代码 , 并不会生效

在这里插入图片描述

在这里插入图片描述

那我们想要达到的效果是每次都能自动更新 , 不需要我们每次重新进行打包操作

解决方案 : 我们可以开启一个 webpack-dev-server 开发服务器 , 他是在电脑内存中打包 , 缓存一些已经打包过的内容 , 只重新打包修改的文件 , 更直白一点就是热更新 .

3.4.2 使用

第一步 : 修改 package.json 文件

在这里插入图片描述

{"name": "work4","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server"},"keywords": [],"author": "","license": "ISC","dependencies": {"webpack": "^4.41.5","webpack-cli": "^3.3.12"},"devDependencies": { "webpack-dev-server": "^3.11.2"}
}

第二步 : 修改 webpack.config.js 文件 , 添加 devServer

在这里插入图片描述

var path = require("path"); // 导入 node.js 中专门操作路径的模块, 固定写法
// 执行 webpack 命令的时候会读取到 module.exports 中的内容
module.exports = {// 执行 webpack 命令的时候, 读取入口 main.js,// 由于 main.js 关联 bar.js 和 logic.js, 所以会将这三个 js 文件合并到一个 js 文件中entry: './src/main.js', // 打包入口文件的路径devServer: {port: 8099,// 服务器占用 8099 端口open: true  // 自动打开浏览器},// 输出文件位置output: {// __dirname 表示当前工程目录// 将导出的总 js 文件输出到 dist 文件夹下面的 bundle.js 文件path: path.resolve(__dirname, './dist'), // 输出文件的存放路径filename: 'bundle.js' // 输出文件的名称}
};

第三步 : 删除之前生成的 dist 目录

在这里插入图片描述

第四步 : 修改 index.html 中 script 脚本的引用路径

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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"><title>Document</title><!-- 引入 dist/bundle.js 文件 --><script src="/bundle.js"></script>
</head>
<body></body>
</html>

第五步 : 运行 npm run dev 命令

这时候 , 浏览器也会自动打开了

在这里插入图片描述

此时我们修改 main.js 文件 , 修改的效果也会实时更新了

在这里插入图片描述

在这里插入图片描述

四 . vue-cli 脚手架

4.1 脚手架介绍

vue-cli 也叫做 vue 脚手架 , vue-cli 是 vue 官方提供的一个全局命令工具 , 这个命令可以帮助我们快速的创建一个 vue 项目的基础架子 .

官网的文档也给大家贴到这里了 : https://cli.vuejs.org/zh/guide/

4.2 快速入门

第一步 : 切换到当前项目所在的根目录

在这里插入图片描述

第二步 : 执行 vue-cli 相关命令

# 只需要安装一次
cnpm install vue-cli -g# work5 是要创建的模块名称
vue init webpack work5

在这里插入图片描述

这个过程比较依赖网络环境 , 失败多尝试几次

在这里插入图片描述

此时 , 脚手架就安装完毕了

在这里插入图片描述

我们需要重点关注这一部分

在这里插入图片描述

接下来我们可以切换到 work5 模块下运行

cd work5
npm run dev

在这里插入图片描述

之后会给我们一个链接 , 我们访问这个链接就来到了当前模块的主页面

在这里插入图片描述

在这里插入图片描述

4.3 基础介绍

4.3.1 脚手架设置

为什么执行 npm run dev 就可以使用浏览器访问网址呢 ?

我们先来看一下 package.json 这个文件

在这里插入图片描述

然后那就继续看一下 build/webpack.dev.conf.js 这个文件

在这里插入图片描述

那我们再来看一下引入的 webpack.base.conf 文件

我们在这里发现了 vue 的入口

在这里插入图片描述

然后继续查看 webpack.dev.conf.js 这个文件

在这里插入图片描述

那就访问 /config/index.js

在这里插入图片描述

其中这个端口号 , 建议修改成其他的

小结 :

在这里插入图片描述

我们只需要修改 config 目录下的 index.js 文件 , 来去修改端口号或者开启服务器自动打开浏览器功能

在这里插入图片描述

4.3.2 目录分析

我们重点关注这三个文件

在这里插入图片描述

我们先来看 index.html 文件 , 他提供了一个最基础的页面 , 我们不能修改这个文件

在这里插入图片描述

那脚本部分写在了 src 目录下的 main.js 中 , 这个页面也不能修改 , 他渲染了 App.vue 组件

在这里插入图片描述

接下来我们看一下 src 目录下的 App.vue , 他是根组件 , 默认有很多内容 , 可以进行编辑

<template><!-- template 相当于我们之前 HTML 中的 body 标签, 在 template 标签中书写 HTML 标签在该标签内部只能书写一个根标签, 例如: 在 template 标签中不能书写同级别的多个 div 标签--><div id="app"><!-- 引入 Vue 脚手架的官方图片 --><img src="./assets/logo.png"><!-- 引入路由 --><router-view/></div>
</template><script>
export default {// 在这里书写 JS 代码name: 'App'
}
</script><style>
/* 在 style 中书写 CSS 代码 */
/* 这里使用的是 id 选择器, 选择到了上面的 div 标签 */
#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>

在这里插入图片描述

我们可以修改 App.vue 中的内容 , 来实现页面效果的改变

在这里插入图片描述

<template><!-- template 相当于我们之前 HTML 中的 body 标签, 在 template 标签中书写 HTML 标签在该标签内部只能书写一个根标签, 例如: 在 template 标签中不能书写同级别的多个 div 标签--><div id="app"><!-- 引入 Vue 脚手架的官方图片 --><!-- <img src="./assets/logo.png"> --><!-- 引入路由 --><!-- <router-view/> --><!-- 插值表达式 -->{{msg}}</div>
</template><script>
export default {// 在这里书写 JS 代码// name: 'App'data() {return {msg: "修改 App.vue"}}
}
</script><style>
/* 在 style 中书写 CSS 代码 */
/* 这里使用的是 id 选择器, 选择到了上面的 div 标签 */
/* #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;
} */#app {color: dodgerblue;font-size: 50px;
}
</style>

在这里插入图片描述

4.3.3 路由

前端的路由指的就是路径和组件 (.vue 结尾的文件) 之间的映射关系

在这里插入图片描述

那我们看一下 /router/index.js 的内容

在这里插入图片描述

那我们将 App.vue 之前添加的内容注释掉 , 恢复成 App.vue 最原始的样子

<template><!-- template 相当于我们之前 HTML 中的 body 标签, 在 template 标签中书写 HTML 标签在该标签内部只能书写一个根标签, 例如: 在 template 标签中不能书写同级别的多个 div 标签--><div id="app"><!-- 引入 Vue 脚手架的官方图片 --><img src="./assets/logo.png"><!-- 引入路由 --><router-view/><!-- 插值表达式 --><!-- {{msg}} --></div>
</template><script>
export default {// 在这里书写 JS 代码name: 'App'// data() {//   return {//     msg: "修改 App.vue"//   }// }
}
</script><style>
/* 在 style 中书写 CSS 代码 */
/* 这里使用的是 id 选择器, 选择到了上面的 div 标签 */
#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;
}/* #app {color: dodgerblue;font-size: 50px;
} */
</style>

那之前我们已经说了图片的来源 , 那页面中的文字就是 /src/components/HelloWorld.vue 中定义的

在这里插入图片描述

那 标签就是用来引入 HelloWorld 组件的内容

在这里插入图片描述

4.4 小案例

https://music.163.com/

我们看一下几个标签所对应的 URL

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

那他跟我们刚才学到的 vue-cli 脚手架的 URL 有些类似

在这里插入图片描述

那我们就实现这样的效果

第一步 : 在 src 目录下创建 views 文件夹

在这里插入图片描述

在这里插入图片描述

第二步 : 在 views 文件夹下创建 userList.vue 组件文件

在这里插入图片描述

在这里插入图片描述

然后我们敲下 vue , 就会自动生成模板

在这里插入图片描述

我们可以随便写点内容

<template><!-- 有且只能有一个根标签 --><div>{{name}}</div>
</template><script>
export default {data() {return {name: "张三"}}
}
</script><style></style>

那这个组件我们就已经写完了

第三步 : 在 router/index.js 下定义页面路由

在这里插入图片描述

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 自定义路由
import userList from '@/views/userList'Vue.use(Router)export default new Router({routes: [{path: '/', name: 'HelloWorld', component: HelloWorld},{path: '/user', name: 'userList', component: userList}]
})

此时 , 我们用户访问 http://localhost:8080/#/user 就可以看到效果了

**加粗样式
**
第四步 : 修改根组件 App.vue

在这里插入图片描述

<template><!-- template 相当于我们之前 HTML 中的 body 标签, 在 template 标签中书写 HTML 标签在该标签内部只能书写一个根标签, 例如: 在 template 标签中不能书写同级别的多个 div 标签--><div id="app"><!-- 引入 Vue 脚手架的官方图片 --><img src="./assets/logo.png"><!-- 这里必须加 # --><a href="#/">发现 Vue</a><a href="#/user">发现好友</a><!-- 引入路由 --><router-view/><!-- 插值表达式 --><!-- {{msg}} --></div>
</template><script>
export default {// 在这里书写 JS 代码name: 'App'// data() {//   return {//     msg: "修改 App.vue"//   }// }
}
</script><style>
/* 在 style 中书写 CSS 代码 */
/* 这里使用的是 id 选择器, 选择到了上面的 div 标签 */
#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;
}/* #app {color: dodgerblue;font-size: 50px;
} */
</style>

第五步 : 控制台使用 npm run dev 运行

我们可以看一下效果

在这里插入图片描述

五 . Element-UI 组件库

在学习 Element-UI 组件库之前 , 我们新创建一个模块用来演示

在这里插入图片描述

在这里插入图片描述

然后将我们之前已经搭建好的 vue-cli 脚手架复制过来

在这里插入图片描述

那接下来 , 我们就可以在脚手架中引入 Element-UI 组件库了

5.1 安装

https://element.eleme.cn/#/zh-CN/component/installation

在这个链接中 , 给出了安装的指令

在这里插入图片描述

那我们就可以执行一下这条命令

在这里插入图片描述

cnpm i element-ui -S

在这里插入图片描述

那我们按照官方文档的介绍 , 在 main.js 中写入以下内容

https://element.eleme.cn/#/zh-CN/component/quickstart

在这里插入图片描述

在这里插入图片描述

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// 导入 vue 内容
import Vue from 'vue'
// 导入当前目录下 App.vue 根组件
// 在 vue 脚手架中只要以 .vue 结尾的都称为组件
import App from './App'
// 路由
import router from './router'
// 导入 Element-UI 核心组件
import ElementUI from 'element-ui';
// 导入 Element-UI 的 CSS 样式
import 'element-ui/lib/theme-chalk/index.css';// 使用 Element-UI
Vue.use(ElementUI);Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

5.2 快速入门 : 实现 Element-UI 中的表格

第一步 : 在 src/views 目录下新创建 elementui.vue

在这里插入图片描述

在这里插入图片描述

然后输入 v 选择模板

在这里插入图片描述

第二步 : 复制 Element-UI 样式

在这里插入图片描述

粘贴到我们的 elementui.vue 中

  <template><!-- 在 template 中书写 HTML 标签 / 视图 --><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template><!-- 在 script 标签中书写 JS 代码 --><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}}</script><style></style>

此时我们运行一下

npm run dev

第三步 : 在 router/inidex.js 中配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 自定义路由
import userList from '@/views/userList'
// 配置 elementui 路由
import elementui from '@/views/elementui'Vue.use(Router)export default new Router({routes: [{path: '/', name: 'HelloWorld', component: HelloWorld},{path: '/user', name: 'userList', component: userList},{// /element 表示浏览器访问的路径path: '/element', // 这个位置只是一个标识, 随便设置name: 'elementUI', // component 后面的 elementui 必须要和上面的 import elementui from '@/views/elementui' 中的 import 后面的 elementui 一致component: elementui}]
})

第四步 : 修改 App.vue

在这里插入图片描述

<template><!-- template 相当于我们之前 HTML 中的 body 标签, 在 template 标签中书写 HTML 标签在该标签内部只能书写一个根标签, 例如: 在 template 标签中不能书写同级别的多个 div 标签--><div id="app"><!-- 引入 Vue 脚手架的官方图片 --><img src="./assets/logo.png"><!-- 这里必须加 # --><a href="#/">发现 Vue</a><a href="#/user">发现好友</a><a href="#/element">elementui</a><!-- 引入路由 --><router-view/><!-- 插值表达式 --><!-- {{msg}} --></div>
</template><script>
export default {// 在这里书写 JS 代码name: 'App'// data() {//   return {//     msg: "修改 App.vue"//   }// }
}
</script><style>
/* 在 style 中书写 CSS 代码 */
/* 这里使用的是 id 选择器, 选择到了上面的 div 标签 */
#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;
}/* #app {color: dodgerblue;font-size: 50px;
} */
</style>

此时我们执行命令

npm run dev

成功显示

在这里插入图片描述

我们可以梳理一下整体的逻辑
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/423550.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

护眼灯品牌排行第一名出炉!盘点2024年世界公认十大护眼灯

中国拥有全球最多的近视人口&#xff0c;我国学生的近视发病率位居世界第二&#xff0c;人数更是居于首位。如今&#xff0c;越来越多的孩子出现近视现象&#xff0c;许多家长认为这是由于繁重的课业和不健康的用眼习惯所致&#xff0c;但实际上&#xff0c;他们往往忽视了一个…

数据分析-前期数据处理

今天找到一份关于医学体检的数据&#xff0c;在数据分析前期工作需要对数据做处理&#xff0c;在这里我们对原始数据做一些处理&#xff0c;将数据处理为可分析的标准数据。下一篇文章做数据的分析。数据想要获取的话可以到我的资源下载。1 数据读取 import pandas as pd data…

SQL Server详细使用教程(包含启动SQL server服务、建立数据库、建表的详细操作) 非常适合初学者

文章目录 目录 前言 一、启动SQL server服务的三种方法 1.不启动SQL server服务的影响 2.方法一&#xff1a;利用cmd启动SQL server服务 3.方法二&#xff1a;利用SQL Server配置管理器启动SQL server服务 4.方法三&#xff1a;在服务管理器中启动SQL server服务 二、建立数据库…

震撼!AI实时生成游戏,每秒20帧,谷歌扩散模型最新突破一夜爆火,附论文介绍和GitHub代码

震撼&#xff01;AI实时生成游戏&#xff0c;每秒20帧&#xff0c;谷歌扩散模型最新突破一夜爆火&#xff0c;附论文介绍和GitHub代码。 “比Sora还震撼”&#xff0c;AI可以实时生成游戏了&#xff01; 谷歌DeepMind打造出了首个完全AI驱动的实时游戏引擎——GameNGen。 在单…

SpringBoot集成MyBatis-PlusDruid

目录 MyBatis-Plus简介 实例演示 创建Springboot项目 初始化Springboot项目 添加关键依赖 application.properties添加相关配置 启动类 编写实体类 编写mapper接口 条件构造器 分页插件 自定义 SQL 映射 MyBatis-Plus简介 MyBatis-Plus简介‌MyBatis-Plus‌&…

RDD2022 道路瑕疵检测数据集

RDD2022 道路瑕疵数据集 txt标签或者xml标签 一共23767张图片 D00 D01 D20 D40四类 D00纵向裂缝 D10横向裂缝 D20网状裂缝 D40坑洞。 RDD2022 道路瑕疵检测数据集介绍 数据集概述 RDD2022&#xff08;Road Defect Detection 2022&#xff09;是一个专门用于道路瑕疵检测的数…

力扣之1777.每家商店的产品价格

文章目录 1. 1777.每家商店的产品价格1.1 题干1.2 建表1.3 题解1.4 结果截图 1. 1777.每家商店的产品价格 1.1 题干 表&#xff1a;Products -------------------- | Column Name | Type | -------------------- | product_id | int | | store | enum | | price | int | ---…

HarmonyOS 是如何实现一次开发多端部署 -- HarmonyOS自学1

一次开发多端部署遇到的几个关键问题 为了实现“一多”的目标&#xff0c;需要解决如下三个基础问题&#xff1a; 问题1&#xff1a;页面如何适配 不同设备间的屏幕尺寸、色彩风格等存在差异&#xff0c;页面如何适配。 问题2&#xff1a;功能如何兼容 不同设备的系统能力…

《深度学习》OpenCV 高阶 图像直方图、掩码图像 参数解析及案例实现

目录 一、图像直方图 1、什么是图像直方图 2、作用 1&#xff09;分析图像的亮度分布 2&#xff09;判断图像的对比度 3&#xff09;检测图像的亮度和色彩偏移 4&#xff09;图像增强和调整 5&#xff09;阈值分割 3、举例 二、直方图用法 1、函数用法 2、参数解析…

C++——深部解析哈希

好久不见给大家分享一张图片吧 目录 前言 二、库文件 1、哈希冲突 2 哈希函数 3、闭散列 三 、闭散列的实现和底层逻辑 1、哈希表&#xff08;闭散列&#xff09;的定义 2、哈希表&#xff08;闭散列&#xff09;的插入 3、哈希表&#xff08;闭散列&#xff09;的查找 4.哈希表…

【Unity踩坑】No cloud project ID was found by the Analytics SDK

在编译默认的URP 2D项目时&#xff0c;出现这样一个错误&#xff1a;No cloud project ID was found by the Analytics SDK. This means Analytics events will not be sent. Please make sure to link your cloud project in the Unity editor to fix this problem. 原因&…

JavaScript 基础 - 第16天_AJAX入门

文章目录 Day01_Ajax入门目录学习目标01.AJAX 概念和 axios 使用目标讲解小结 02.认识 URL目标讲解小结 03.URL 查询参数目标讲解小结 04.案例-查询-地区列表目标讲解小结 05.常用请求方法和数据提交目标讲解小结 06.axios 错误处理目标讲解小结 07.HTTP 协议-请求报文目标讲解…

【TabBar嵌套Navigation案例-cell重用 Objective-C语言】

一、我们来说这个cell重用(重复使用)的问题啊 1.我们这个比分直播推送页面, 这个里边呢,现在这个cell,涉及到两个样式,上面呢,是Default的,下面呢,是Value1的,然后,我们在这个里边啊,我们每一组就一个cell啊,然后呢,我把这个组,多给它复制几份儿,现在是三个组…

如何利用 CSS 渐变实现多样化背景效果

前言 总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果&#xff0c;通过调整渐变类型和设置&#xff0c;你可以轻松实现从简单到复杂…

灵雀云DevOps:加速应用交付,点燃业务创新引擎

导语 近日&#xff0c;国际知名咨询机构Gartner发布了2024年度DevOps平台魔力象限报告&#xff08;Gartner Magic Quadrant for DevOps Platforms&#xff09;&#xff0c;为信息化决策者在技术战略层面提供了选型和评估DevOps平台供应商的全面视角。报告中&#xff0c;中国云…

UEC++学习(十七)利用SceneCaptureComponent2d进行截图

最近有个需求是需要将场景中的actor进行截图&#xff0c;并且将截图保存成png&#xff0c;png中需要将场景背景忽略掉&#xff0c;只显示特定的actor。 这里是通过SceneCapture2d组件捕捉场景后&#xff0c;将背景的alpha通道设置为0&#xff0c;实现背景透明的功能。 &#x…

计算机网络:概述 - 计算机网络概述

目录 一. 互联网概述 1.1 网络 1.2 互联网 1.3 因特网 二. 互联网发展的三个阶段 三. 互联网的标准化工作 四. 互联网的组成 五. 计算机网络的类别 5.1 计算机网络的定义 5.2 计算机网络的不同类别 一. 互联网概述 起源于美国的互联网现如今已…

力扣213-打家劫舍 II(Java详细题解)

题目链接&#xff1a;213. 打家劫舍 II - 力扣&#xff08;LeetCode&#xff09; 前情提要&#xff1a; 本体是打家劫舍的一个变形题&#xff0c;希望大家能先做198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09;&#xff0c;并看一下我上题的讲解力扣198-打家劫舍&…

sheng的学习笔记-AI-规则学习(rule learning)

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 什么是规则学习 机器学习中的“规则”(rule)通常是指语义明确、能描述数据分布所隐含的客观规律或领域概念、可写成“若……&#xff0c;则……”形式的逻辑规则。​“规则学习”(rule learning)是从训练数据中学习出一组能…

Lua发邮件:实现自动化邮件发送教程指南!

Lua发邮件高级技巧有哪些&#xff1f;如何利用Lua发送电子邮件&#xff1f; 自动化邮件发送是一个非常实用的功能&#xff0c;广泛应用于各种场景&#xff0c;如通知、提醒、报告生成等。Lua作为一种轻量级脚本语言&#xff0c;因其简洁和高效而受到广泛欢迎。AokSend将详细介…