Vue项目创建和nodejs使用

Vue项目创建和nodejs使用

  • 一、环境准备
    • 1.1.安装 node.js【下载历史版本node-v14.21.3-x64】
    • 1.2.安装
    • 1.3.检查是否安装成功:
    • 1.4.在Node下新建两个文件夹 node_global和node_cache并设置权限
    • 1.5.配置npm在安装全局模块时的路径和缓存cache的路径
    • 1.6.配置系统变量:Node\node_global\node_modules
    • 1.7.编辑用户变量里的Path:Node\node_global
    • 1.8.安装淘宝镜像
    • 1.9.查看当前的npm镜像设置:
    • 1.10. 通过.npmrc文件更改源
    • 1.11.错误提示淘宝镜像过期
    • 1.12.express 模块进行测试
    • 1.13.全局安装webpack
    • 1.14.webpack : 无法加载文件 D:\Program Files\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本
    • 1.15.全局安装Vue-cli
  • 二、vite对比webpack
    • 2.1.Webpack
    • 2.2.Vite
    • 2.3.使用webpack打包模式
    • 2.4.vite打包模式
  • 三、创建Vue项目
    • 3.1.方法一【UI界面创建】
    • 3.2.方法二:vue init webpack 项目名【vue-cli2.x的初始化方式】
    • 3.3.方法三:vue create 项目名【vue-cli3.x的初始化方式】
    • 3.4.方法四:npm init vue@latest
  • 四、Vite-下一代的前端工具链
    • 4.1.使用vite构建项目
    • 4.2.构建一个 Vite + Vue 项目
  • 五、nvm 安装与使用
  • 六、【Vue2】项目
    • 6.1.axios模块
      • 6.1.1.安装axios模块
      • 6.1.2.在入口文件main.js中配置axios
      • 6.1.3.axios使用案例
      • 6.1.4.vue-axios使用案例
    • 6.2.关闭Vue的生产提示
    • 6.3.vue项目中无router文件夹,vue安装路由
    • 6.4.引入Vue Router路由Vue.js【v.3x】
    • 6.5.引入ElementUI组件库【Vue2 版本】
    • 6.6.main.js完整版
    • 6.7.页面创建UploadImg.vue
    • 6.8.修改App.vue
    • 6.9.创建路由配置router/index.js
    • 6.10.页面效果
  • 七、【Vue3】项目
    • 6.1.axios模块
      • 6.1.1.安装axios模块
      • 6.1.2.在入口文件main.js中配置axios
    • 6.2.关闭Vue的生产提示
    • 6.3.vue项目中无router文件夹,vue安装路由
    • 6.4.引入Vue Router路由Vue.js【v.4x】
    • 6.5.引入Element Plus组件库【Vue3 版本】
    • 6.6.main.js完整版
    • 6.7.页面创建UploadImg.vue
    • 6.8.修改App.vue
    • 6.9.创建路由配置router/index.js
    • 6.10.页面效果
  • endl

一、环境准备

1.1.安装 node.js【下载历史版本node-v14.21.3-x64】

下载地址:https://nodejs.org/en/

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

1.2.安装

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1.3.检查是否安装成功:

npm -v
node -v

在这里插入图片描述

1.4.在Node下新建两个文件夹 node_global和node_cache并设置权限

在这里插入图片描述

1.5.配置npm在安装全局模块时的路径和缓存cache的路径

默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中且占用C盘空间
在这里插入图片描述

在node.js安装目录Node下新建两个文件夹 node_global和node_cache

npm config set prefix "D:\DeveloperTools\Node\node_global"

npm config set cache "D:\DeveloperTools\Node\node_cache"

npm config list

在这里插入图片描述

1.6.配置系统变量:Node\node_global\node_modules

NODE_PATH

D:\DeveloperTools\Node\node_global\node_modules

在path里面加 %NODE_PATH%

在这里插入图片描述
在这里插入图片描述

1.7.编辑用户变量里的Path:Node\node_global

编辑用户变量里的Path,将相应npm的路径改为:

D:\DeveloperTools\Node\node_global

在这里插入图片描述

1.8.安装淘宝镜像

阿里巴巴镜像站官网:http://mirrors.aliyun.com/
官网:http://www.npmmirror.com/

使用管理员身份运行命令

# 国外npm本身
npm config set registry https://registry.npmjs.org/

# 淘宝镜像
npm config set registry https://registry.npmmirror.com

在这里插入图片描述

在这里插入图片描述

1.9.查看当前的npm镜像设置:

命令查看配置

npm root -g

npm config list

npm config get prefix

在这里插入图片描述

1.10. 通过.npmrc文件更改源

可以看到C盘用户目录下的.npmrc文件

.npmrc优先级高于环境变量

在项目的根目录或用户的主目录中,创建或编辑.npmrc文件
在这里插入图片描述
在这里插入图片描述

1.11.错误提示淘宝镜像过期

npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 registry.npmmirror.com

# 原来淘宝镜像
npm config set registry https://registry.npm.taobao.org

# 删除
npm config delete registry

# 清空缓存
npm cache clean --force

# 配置列表
npm config list

在这里插入图片描述

在这里插入图片描述

1.12.express 模块进行测试

//进入安装目录
cd D:\DeveloperTools\Node\node_global\node_modules

//-g代表全局安装
npm install express -g

npm uninstall express -g

在这里插入图片描述

1.13.全局安装webpack

使用管理员身份运行命令

npm install webpack -g 

npm install webpack-cli -g

# 查看安装webpack的版本号
npm webpack -v
npm webpack-cli -v

在这里插入图片描述

1.14.webpack : 无法加载文件 D:\Program Files\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本

解决方案:

以管理员身份运行
执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的
执行:set-ExecutionPolicy RemoteSigned
这时再执行get-ExecutionPolicy,就显示RemoteSigned
get-ExecutionPolicy

#set-ExecutionPolicy Restricted
set-ExecutionPolicy RemoteSigned

get-ExecutionPolicy

在这里插入图片描述

1.15.全局安装Vue-cli

#vue-cli3 可视化,使用vue-cli3.x初始化项目安装这个
npm install -g @vue/cli

#vue-lcli2,使用vue-cli2.x初始化项目安装这个
npm install -g vue-cli

vue --version

在这里插入图片描述
在这里插入图片描述

二、vite对比webpack

2.1.Webpack

将所有的模块提前编译、打包进 bundle 中,不管这个模块是否被用到,随着项目越来越大,打包启动的速度自然越来越慢。

2.2.Vite

瞬间开启一个服务,并不会先编译所有文件,当浏览器用到某个文件时,Vite 服务会收到请求然后编译后响应到客户端。

2.3.使用webpack打包模式

在这里插入图片描述

2.4.vite打包模式

在这里插入图片描述

三、创建Vue项目

vue官网:https://cn.vuejs.org/
在这里插入图片描述

3.1.方法一【UI界面创建】

vue ui

http://localhost:8000/project/select

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2.方法二:vue init webpack 项目名【vue-cli2.x的初始化方式】

#创建项目
vue init webpack test-vue

#进入目录
cd teat-vue

#初始化
npm install

#运行
npm run dev

在这里插入图片描述

#vue 3.0 使用 vue-cli 2.0创建webpack项目时出现
#创建命令
vue init webpack test-vue2

Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.

操作提示Please run npm i -g @vue/cli-init
执行npm i -g @vue/cli-init之后,再次执行创建命令即可
注意:项目名不要出现大写字母

在这里插入图片描述

3.3.方法三:vue create 项目名【vue-cli3.x的初始化方式】

#创建项目
vue create test-vue3

#进入目录
cd teat-vue3

#初始化
npm install

#运行
npm run serve

在这里插入图片描述

3.4.方法四:npm init vue@latest

npm init vue@latest

npm init vue@latest 创建的 vue3 项目是基于 Vite 打包的
npm init vue@latest 安装并执行 create-vue,它是 Vue 官方的项目脚手架工具

在这里插入图片描述

四、Vite-下一代的前端工具链

Vite官网:https://www.vitejs.net/guide/

Vite 需要 Node.js 版本 >= 12.0.0

4.1.使用vite构建项目

npm create vite@latest

npm init vite@latest

在这里插入图片描述

4.2.构建一个 Vite + Vue 项目

# npm 6.x
npm create vite@latest my-vue-app --template vue
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线:
npm create vite@latest my-vue-app -- --template vue
npm init vite@latest my-vue-app -- --template vue

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、nvm 安装与使用

github官网下载:https://github.com/coreybutler/nvm-windows/releases
在这里插入图片描述

六、【Vue2】项目

6.1.axios模块

6.1.1.安装axios模块

vue-axios|axios中文网:http://www.axios-js.com/zh-cn/docs/vue-axios.html
axios官网:https://www.axios-http.cn/docs/intro

npm install --save axios vue-axios

//报错时使用--legacy-peer-deps
npm install --save axios vue-axios --legacy-peer-deps

6.1.2.在入口文件main.js中配置axios

#在入口文件main.js中配置
//引入vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
//引入VueAxios
//安装VueAxios模块后,不需要在每个组件中单独导入axios,只需将axios请求改为this.axios
import VueAxios from 'vue-axios'
//把axios挂载到vue上
Vue.prototype.$axios = axios;

//使用Vue.use来注册安装插件
Vue.use(VueAxios, axios)

new Vue({
  el:'#app',
  render: h => h(App),
})
按照这个顺序分别引入这三个文件: vue, axios and vue-axios

6.1.3.axios使用案例

# 在入口文件main.js中配置
//引入Vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
//把axios挂载到vue上
Vue.prototype.$axios = axios

new Vue({
  el:'#app',
  render: h => h(App),
})
# 第三步:使用案例
this.$axios.get('/user?id=888').then((response) => {
  console.log(response.data)
}).catch( (error) => {
    console.log(error);
});

6.1.4.vue-axios使用案例

#在入口文件main.js中配置
//引入Vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
//引入VueAxios
import VueAxios from 'vue-axios'

//使用Vue.use来注册安装插件
Vue.use(VueAxios, axios)

new Vue({
  el:'#app',
  render: h => h(App),
})
#第三步:使用方式有如下三种
#方式1
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
#方式2
this.axios.get(api).then((response) => {
  console.log(response.data)
})
#方式3
this.$http.get(api).then((response) => {
  console.log(response.data)
})

6.2.关闭Vue的生产提示

#在入口文件main.js中配置
//关闭Vue的生产提示
Vue.config.productionTip = false

6.3.vue项目中无router文件夹,vue安装路由

新建一个router文件夹,在文件夹下新建一个index.js文件

在这里插入图片描述

6.4.引入Vue Router路由Vue.js【v.3x】

Vue2使用v.3x
Vue Router官网【v3.x】:https://v3.router.vuejs.org/zh/
更新记录【3.x】https://github.com/vuejs/vue-router/releases

//报错时使用--legacy-peer-deps
//vue-router@3x 适用于 vue2
npm install vue-router@3

//指定版本号
npm install vue-router@3.5.2 --save

在这里插入图片描述

#在入口文件main.js中配置
//引入VueRouter
import VueRouter from 'vue-router'

//使用Vue.use来注册安装插件
Vue.use(VueRouter)

//新建一个router文件夹,在文件夹下新建一个index.js文件
//引入路由器
import router from './router/index'

// 创建和挂载根实例
new Vue({
  router, //将路由器注入到new Vue实例中,建立关联
  render: h => h(App),
}).$mount('#app');

6.5.引入ElementUI组件库【Vue2 版本】

ElementUI组件库官网:https://element.eleme.cn/#/zh-CN

npm i element-ui -S
//完整引入
//引入ElementUI组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

//使用ElementUI组件库
Vue.use(ElementUI)

6.6.main.js完整版

在这里插入图片描述

import App from './App.vue'
//引入Vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
//引入VueAxios
//安装VueAxios模块后,不需要在每个组件中单独导入axios,只需将axios请求改为this.axios
import VueAxios from 'vue-axios'
//引入VueRouter
import VueRouter from 'vue-router'
//完整引入
//引入ElementUI组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//新建一个router文件夹,在文件夹下新建一个index.js文件
//引入路由器
import router from './router/index'

//把axios挂载到vue上
Vue.prototype.$axios = axios;
//使用Vue.use来注册安装插件
Vue.use(VueRouter)
Vue.use(router)
Vue.use(VueAxios, axios)
//使用ElementUI组件库
Vue.use(ElementUI)
//关闭Vue的生产提示
Vue.config.productionTip = false

// 创建和挂载根实例
new Vue({
  router, //将路由器注入到new Vue实例中,建立关联
  render: h => h(App),
}).$mount('#app');

6.7.页面创建UploadImg.vue

<template>
  <div>
    <el-form>
      <el-form-item label="上传图片">
        <el-upload
          list-type="picture-card"
          :multiple="false"
          :action="uploadUrl"
          :limit="1"
          :on-success="onUploadSuccessIdCard"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "UploadImg",
  data() {
    return {
      dialogImageUrl: "",
      file_id: "",
      dialogVisible: false,
      uploadUrl: "http://localhost:22100/filesystem/uploadFile", //文件上传地址
      datas: {},
    };
  },
  methods: {
    onUploadSuccessIdCard(response) {
      this.file_id = response.data.fileId;
      this.datas = response.data;
      this.dialogImageUrl = "http://192.168.229.141/" + response.data.filePath;
    },
  },
};
</script>

<style scoped>
</style>

6.8.修改App.vue

<template>
  <div id="app">
    <HelloWorld />
    <!-- 导航链接 -->
    <!-- 路由内容展示 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>

6.9.创建路由配置router/index.js

//在路由文件router/index.js中配置
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

//引入组件
import UploadImg from '@/components/UploadImg'//上传页

//创建路由
const routes = [
  //定义路由
  {
    path: '/',
    name: 'UploadImg',
    component: UploadImg
  },
]

//创建并暴露一个路由器
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

6.10.页面效果

npm rn serve

在这里插入图片描述

七、【Vue3】项目

6.1.axios模块

6.1.1.安装axios模块

vue-axios|axios中文网:http://www.axios-js.com/zh-cn/docs/vue-axios.html
axios官网:https://www.axios-http.cn/docs/intro

npm install --save axios vue-axios

//报错时使用--legacy-peer-deps
npm install --save axios vue-axios --legacy-peer-deps

6.1.2.在入口文件main.js中配置axios

#在入口文件main.js中配置
import { createApp } from 'vue'
import App from './App.vue'

//引入axios
import axios from 'axios'
//引入VueAxios
//安装VueAxios模块后,不需要在每个组件中单独导入axios,只需将axios请求改为this.axios
import VueAxios from 'vue-axios'

const app = createApp(App);

//使用Vue.use来注册安装插件
app.use(VueAxios, axios)

app.mount('#app')

//createApp(App).mount('#app')
按照这个顺序分别引入这三个文件: vue, axios and vue-axios

6.2.关闭Vue的生产提示

#在入口文件main.js中配置
//关闭Vue的生产提示
app.config.productionTip = false

6.3.vue项目中无router文件夹,vue安装路由

新建一个router文件夹,在文件夹下新建一个index.js文件

在这里插入图片描述

6.4.引入Vue Router路由Vue.js【v.4x】

Vue3使用v.4x
Vue Router官网【v4.x】:https://router.vuejs.org/zh/
更新记录【4.x】https://github.com/vuejs/router/releases

//vue-router4x 适用于 vue3
npm install vue-router@4

//指定版本号
npm install vue-router@4.2.5 --save
import { createApp } from 'vue'
import App from './App.vue'

//引入路由器
import router from './router/index'

const app = createApp(App);

//使用Vue.use来注册安装插件
app.use(router)

app.mount('#app')

在这里插入图片描述

6.5.引入Element Plus组件库【Vue3 版本】

Element Plus组件库官网:https://element-plus.gitee.io/zh-CN/

npm install element-plus --save
// main.ts
import { createApp } from 'vue'
//引入Element Plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

6.6.main.js完整版

import { createApp } from 'vue'
import App from './App.vue'

//引入axios
import axios from 'axios'
//引入VueAxios
//安装VueAxios模块后,不需要在每个组件中单独导入axios,只需将axios请求改为this.axios
import VueAxios from 'vue-axios'
//新建一个router文件夹,在文件夹下新建一个index.js文件
//引入路由器
import router from './router/index'
//引入Element Plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);
//关闭Vue的生产提示
app.config.productionTip = false

//使用Vue.use来注册安装插件
app.use(VueAxios, axios)
app.use(router)
app.use(ElementPlus)

app.mount('#app')

6.7.页面创建UploadImg.vue

<template>
  <div>
    <el-form>
      <el-form-item label="上传图片">
        <el-upload
          list-type="picture-card"
          :multiple="false"
          :action="uploadUrl"
          :limit="1"
          :on-success="onUploadSuccessIdCard"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "UploadImg",
  data() {
    return {
      dialogImageUrl: "",
      file_id: "",
      dialogVisible: false,
      uploadUrl: "http://localhost:22100/filesystem/uploadFile", //文件上传地址
      datas: {},
    };
  },
  methods: {
    onUploadSuccessIdCard(response) {
      this.file_id = response.data.fileId;
      this.datas = response.data;
      this.dialogImageUrl = "http://192.168.229.141/" + response.data.filePath;
    },
  },
};
</script>

<style scoped>
</style>

6.8.修改App.vue

<template>
  <div id="app">
    <HelloWorld />
    <!-- 导航链接 -->
    <!-- 路由内容展示 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>

6.9.创建路由配置router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const routerHistory = createWebHistory(process.env.BASE_URL)

import UploadImg from '@/components/UploadImg'
// 定义路由
const routes = [
  {
    path: '/',
    name: 'UploadImg',
    component: UploadImg
  },
]

// 创建路由器
const router = createRouter({
  history: routerHistory,
  routes: routes
})


export default router;

6.10.页面效果

npm rn serve

在这里插入图片描述

endl

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

L2-015 互评成绩

一、题目 二、解题思路 去掉一个最高分和一个最低分&#xff1a;在输入的时候找出每个同学的最大值和最小值&#xff0c;index1[n],index2[n] 两个数组分别记录每个同学的最大值和最小值对应的下标。注意可能会有多个最大值或有多个最小值&#xff0c;也可能最大值和最小值相同…

C# EventHandler<T> 示例

新建一个form程序&#xff0c;在调试窗口输出执行过程&#xff1b; 为了使用Debug.WriteLine&#xff0c;添加 using System.Diagnostics; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using S…

探索IDE的世界:什么是IDE?以及适合新手的IDE推荐

引言 在编程的世界里&#xff0c;集成开发环境&#xff08;IDE&#xff09;是我们日常工作的重要工具。无论是初学者还是经验丰富的开发者&#xff0c;一个好的IDE都能极大地提高我们的编程效率。那么&#xff0c;什么是IDE呢&#xff1f;对于新手来说&#xff0c;又应该选择哪…

HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核基础-事件event

目录 一、事件基本概念二、事件运行机制三、事件开发流程四、事件使用说明五、事件接口坚持就有收获 一、事件基本概念 事件是一种实现任务间通信的机制&#xff0c;可用于实现任务间的同步&#xff0c;但事件通信只能是事件类型的通信&#xff0c;无数据传输。一个任务可以等…

【学网攻】 第(27)节 -- HSRP(热备份路由器协议)

系列文章目录 目录 系列文章目录 文章目录 前言 一、HSRP(热备份路由器协议)是什么&#xff1f; 二、实验 1.引入 实验目标 实验背景 技术原理 实验步骤 实验设备 实验拓扑图 实验配置 实验验证 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交…

ICLR 2024 | Harvard FairSeg:第一个研究分割算法公平性的大型医疗分割数据集

近年来&#xff0c;人工智能模型的公平性问题受到了越来越多的关注&#xff0c;尤其是在医学领域&#xff0c;因为医学模型的公平性对人们的健康和生命至关重要。高质量的医学公平性数据集对促进公平学习研究非常必要。现有的医学公平性数据集都是针对分类任务的&#xff0c;而…

掌握C语言文件操作:从入门到精通的完整指南!

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C语言学习 贝蒂的主页&#xff1a;Betty‘s blog 1. 什么是文件 文件其实是指一组相关数据的有序集合。这个数据集有一个名称&a…

高校危化试剂管理:Java与SpringBoot的革新

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

Java学习第十二节之可变参数和递归

可变参数 package method;import javax.swing.*;public class Demo04 {public static void main(String[] args) {//调用可变参数的方法printMax(34,3,3,2,56.5);printMax(new double[]{1, 2, 3});}public static void printMax(double...numbers) {if (numbers.length 0) {Sy…

腾讯云4核8G服务器能支持多少人访问?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

autojs通过正则表达式获取带有数字的text内容

视频连接 视频连接 参考 参考 var ctextMatches(/\d/).findOne()console.log("当前金币"c.text()) // 获取当前金币UiSelector.textMatches(reg) reg {string} | {Regex} 要满足的正则表达式。 为当前选择器附加控件"text需要满足正则表达式reg"的条件。 …

【Linux系统 04】OpenEuler配置

目录 一、镜像文件下载 二、配置静态IP 三、启动SSH连接 四、免密登录 五、安装常用软件 一、镜像文件下载 官方下载地址&#xff1a;openEuler下载 | 欧拉系统ISO镜像 | openEuler社区官网 选择一个版本&#xff0c;lopenEuler通常有两种版本&#xff1a; 创新版&…

使用Vue.js输出一个hello world

导入vue.js <script src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js"></script> 创建一个标签 <div id"app">{{message}}</div> 接管标签内容&#xff0c;创建vue实例 <script type"text/javascript">va…

H12-821_31

31.下面是一台路由器的部分配置,关于该配置描述正确的是: A.源地址为1.1.1.1的数据包匹配第一条ACL语句rule 0,匹配规则为允许 B.源地址为1.1.1.3的数据包匹配第三条ACL语句rule 2,匹配规则为拒绝 C.源地址为1.1.1.4的数据包匹配第四条ACL语句rule 3,匹配规则为允许 D.源地址为…

【链表】-Lc146-实现LRU(双向循环链表)

写在前面 最近想复习一下数据结构与算法相关的内容&#xff0c;找一些题来做一做。如有更好思路&#xff0c;欢迎指正。 目录 写在前面一、场景描述二、具体步骤1.环境说明2.双向循环链表3.代码 写在后面 一、场景描述 运用你所掌握的数据结构&#xff0c;设计和实现一个 LRU (…

Objects类、包装类

一、Objects类定义 Objects类是一个工具类&#xff0c;包含static使用程序方法&#xff0c;是一个最终类不能被继承&#xff0c;提供了很多操作对象的静态方法。 二、Objects类的常见方法 1. Objects.equals()先做非空判断&#xff0c;再比较两个对象&#xff1a; 如果是拿对…

开源免费的Linux服务器管理面板分享

开源免费的Linux服务器管理面板分享 一、1Panel1.1 1Panel 简介1.2 1Panel特点1.3 1Panel面板首页1.4 1Panel使用体验 二、webmin2.1 webmin简介2.2 webmin特点2.3 webmin首页2.4 webmin使用体验 三、Cockpit3.1 Cockpit简介3.2 Cockpit特点3.3 Cockpit首页3.4 Cockpit使用体验…

Zotero插件分享(第二弹)

今天紧接上一篇文章&#xff08;Zotero常用插件分享&#xff09;&#xff0c;继续分享关于Zotero常用插件的相关内容。&#xff08;排名不分先后&#xff09; 1.Translate for Zotero 英文文献阅读辅助工具&#xff0c;可以实现将pdf中选中的文字翻译为指定语言&#xff0c;并…

智胜未来,新时代IT技术人风口攻略-第二版(弃稿)

文章目录 抛砖引玉 鸿蒙生态小科普焦虑之下 理想要落到实处校园鼎力 鸿蒙发展不可挡培训入场 机构急于吃红利企业布局 鸿蒙应用规划动智胜未来 技术人风口来临 鸿蒙已经成为行业的焦点&#xff0c;未来的发展潜力无限。作为一名程序员兼UP主&#xff0c;我非常荣幸地接受了邀请…

[NSSCTF]-Web:[SWPUCTF 2021 新生赛]easyrce解析

先看网页 代码审计&#xff1a; error_reporting(0); &#xff1a;关闭报错&#xff0c;代码的错误将不会显示 highlight_file(__FILE__); &#xff1a;将当前文件的源代码显示出来 eval($_GET[url]); &#xff1a;将url的值作为php代码执行 解题&#xff1a; 题目既然允许…