vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

目录

一、搭建vue3 项目前提条件

二、通过create-vue搭建vue3 项目

三、搭建一个 Vite 项目

四、构建一个 Vite + Vue 项目

五、打开Vue 项目管理器

六、Vite + Vue 项目目录结构

七、Vite.config.ts配置

一、搭建vue3 项目前提条件

前提条件

  • 熟悉命令行
  • 已安装 16.0 或更高版本的 Node.js

 （1）、检查node 和npm版本信息

同时按window+R键,输入cmd,打开命令提示符窗口

输入： node –v　（查看本机安装的node版本）

 输入： npm –v　（查看本机安装的npm版本）

（2）、升级你的 Node 版本

如果提示没有安装node或Node.js 版本 较低，请升级你的 Node 版本。

详细教程可参阅下面链接文章：

  • Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）https://blog.csdn.net/weixin_69553582/article/details/129584587

二、通过create-vue搭建vue3 项目

 同时按window+R键,输入cmd,打开命令提示符窗口

进入你准备搭建vue3 项目的相应目录，例如本例目录地址：C:\00program\vue\vuelearn

  • 输入：npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

 你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vueproject1
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in C:\00program\vue\vuelearn\vueproject1...

我们依次输入问题的答案，帮助创建项目：

  • Project name：------》项目名称，默认值：vue-project，可输入想要的项目名称，此处我写的是：vueproject1。
  • Add TypeScript? ------》是否加入TypeScript组件？默认值：No。
  • Add JSX Support? ------》是否加入JSX支持？默认值：No。
  • Add Vue Router for Single Page Application development? ------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
  • Add Pinia for state management? ------》是否添加Pinia组件来进行状态管理？默认值：No。
  • Add Vitest for Unit testing? ------》是否添加Vitest来进行单元测试？默认值：No。
  • Add an End-to-End Testing Solution?------》是否添加端到端测试？默认值No。
  • Add ESLint for code quality? ------》是否添加ESLint来进行代码质量检查？默认值：No。

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。

脚手架工程项目在指定位置被创建好。

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

Done. Now run:
  cd vueproject1
  npm install
  npm run dev

cd进入vueproject1目录后，依次输入以下命令，

  •   npm install
  •   npm run dev

vite服务器启动，显示了项目地址，如下图：

我们在浏览器打开 http://localhost:5173/ 

显示页面如下图： 

 现在已经可以运行起一个 Vue 项目！

请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API。

当你准备将应用发布到生产环境时，请运行：

  •  npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

三、搭建一个 Vite 项目

　　Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

　　一个开发服务器，它基于原生 ES 模块，提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。

　　一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

　　Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

Vite 浏 览 器 支 持
默认情况下，Vite 的目标是能够 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器：
ChromeFirefoxSafariEdge
>=87>=78>=14>=88

目前Vite支持的模板预设如下：

JavaScriptvanillavue react preactsvelte lit 
TypeScriptvanilla-tsvue-tsreact-tspreact-tssvelte-tslit-ts

　　本文介绍如何在本地搭建 Vue 单页应用。
　　创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

确保你安装了最新版本的 Node.js，

然后在命令行中运行以下命令

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

 如果你不知道你的node.js的版本是多少，请按照上文所述步骤检测升级node

四、构建一个 Vite + Vue 项目

构建一个 Vite + Vue 项目，npm版本不同时，命令也有所不同：

输入命令：

npm  6.x

  • npm create vite@latest my-vue-app --template vue

n pm 7+, extra double-dash is needed:

  • npm create vite@latest my-vue-app -- --template vue

 y arn

  • yarn create vite my-vue-app --template vue

pnpm 

  • pnpm create vite my-vue-app --template vue

进入你准备搭建 Vite + Vue 项目的相应目录，例如本例目录地址：C:\00program\vue\vuelearn

  • 输入命令：npm create vite@latest vueviteproject1 -- --vue
C:\00program\vue\vuelearn>npm create vite@latest vueviteproject1 -- --vue
? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

 Select a framework: »------》 选择一个框架

我们选择Vue，回车，显示下一项选项：

? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript
    Customize with create-vue ↗
    Nuxt ↗

 选择一个编程语言： » - 使用箭头键。返回提交。

我们选择TypeScript，回车，显示下一项如图：

C:\00program\vue\vuelearn>npm create vite@latest vueviteproject1 -- --vue
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in C:\00program\vue\vuelearn\vueviteproject1...

Done. Now run:

  cd vueviteproject1
  npm install
  npm run dev

脚手架项目构建完成 ，需要进入项目目录，输入以下两个命令：

  •   npm install
  •   npm run dev

  • npm run dev
  VITE v4.2.0  ready in 294 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

 

  Shortcuts快捷方式

  •   press r to restart the server  ------》按 R 重新启动服务器
  •   press u to show server url ------》按你显示服务器网址
  •   press o to open in browser  ------》按 O 在浏览器中打开
  •   press c to clear console  ------》按 C 清除控制台
  •   press q to quit  ------》按 Q 退出

在本地用浏览器打开：http://localhost:5173

就可以看到刚才创建的基于Vite + Vue.js的项目欢迎页面，如图所示。


五、打开Vue 项目管理器

同时按window+R键,输入cmd，打开命令提示符窗口，进入 Vue 项目所在目录，例如：

C:\00program\vue\vuelearn\vueviteproject1

  •  输入vue ui

打开Vue 项目管理器界面（vue ui会自动打开其网址：http://localhost:8000/project/select）

六、Vite + Vue 项目目录结构

vueviteproject1项目（基于Vite + Vue项目）│
│
├── .vscode 目录。
│　　　├──　v
│　　　├──　v
│　　　└──　v
│
├── node_modules 目录 （vue 项目的文件依赖存放在这个文件夹。）
│　　　├──　所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
│　　　├──　v
│　　　└──　v
│
│
├── public 目录：存放项目公共资源。如网站LOGO等。
│           │     通常我们不需要对public文件夹内的资源做任何修改。
│           │     后续在构建打包时，public内容会直接放到dist文件夹内plugins插件资源；
│　　　├──　v
│　　　├──　v
│　　　└──　v
│
│
├── src  目录 ​：存放 vue 项目的源代码。其下的各个文件（文件夹）分别为：
│　　　├──　assets 目录 ​：资源文件，存放 css，图片等资源。
│　　　├──　​component​ 目录 ​：组件文件夹，存放 vue 的公共组件（核心）
│           │                            （注册于全局，在整个项目中通过关键词便可直接输出）。
│           │
│　　　├──　​​router 目录 ​：用来存放 ​index.js​，用来配置路由，定义各个页面对应的URL。
│　　　├──　​store 目录 ​：组件文件夹，存放 vue 的公共组件
│　　　├──　​​views​ 目录：放主体页面，vue 文件是可以用来充当路由 view 的。
│　　　├──　​tool​：用来存放工具类 js，
│           │                  将 js 代码封装好放入这个文件夹可以全局调用
│           │                  （如api.js​，​http.js​ 是对 http 方法和 api 方法的封装）。
│　　　├──    main.js​：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。
│　　　├──​    app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。
│　　　├──
│　　　└──　v
│
│
├── package.json  存放项目的依赖配置
├── .gitignore。
├── tsconfig.json
├── tsconfig.node.json
├──index.html
└──vite.config.ts

  • node_modules文件夹，文件夹中往往会有几百个文件夹，Node项目所用到的第三方包特别多，也特别大。这些文件是由$ npm install命令产生的。所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
  • src文件夹是核心源代码的所在目录，展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的），正常开发的时候一般只修改​ src​ 文件夹下的文件。
  • dist —— 项目构建打包后的默认输出目录。
  • index.html 与项目根目录，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。

与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即服务文件的位置，在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。

Vite 也支持多个 .html 作入口点的 多页面应用模式。

七、Vite.config.ts配置

转载地址：https://huaweicloud.csdn.net/638ee192dacf622b8df8d725.html

1.配置和pinia，router，axios，ref,reactive引入等等
2.配置代理
3.配置.ts，.vue，.tsx等等文件别名
4.配置antdV按需加载
5.配置antdV主题色+全局引入less+全局颜色变量
6.配置vue使用tsx写法
7.配置测试环境保留打印

import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' //tsx插件引入
import AutoImport from 'unplugin-auto-import/vite' //自动引入ref,reactive等等等
// 配置antd-v按需加载
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// import path from 'path';
import { resolve, join } from 'path'
import { wrapperEnv } from './build/utils'

// defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  console.log(command, mode, '===')
  const root = process.cwd()
  const env = loadEnv(mode, root) // 环境变量对象
  console.log('环境变量------', env)
  console.log('文件路径（ process.cwd()）------', root)
  console.log('文件路径（dirname）------', __dirname + '/src')
  const { VITE_DROP_CONSOLE } = wrapperEnv(env)

  // // dev 独有配置
  return {
    root, //项目根目录（index.html 文件所在的位置） 默认： process.cwd()
    base: '/', //  开发或生产环境服务的公共基础路径：默认'/'   1、绝对 URL 路径名： /foo/；  2、完整的 URL： https://foo.com/； 3、空字符串或 ./（用于开发环境）
    publicDir: resolve(__dirname, './dist'), //默认'public'  作为静态资源服务的文件夹  (打包public文件夹会没有，里面得东西会直接编译在dist文件下)
    assetsInclude: resolve(__dirname, './src/assets'), // 静态资源处理

    // ******插件配置******
    plugins: [
      vue(),
      vueJsx(),
      AutoImport({
        imports: [
          'vue',
          'vue-router',
          'pinia',
          {
            axios: [
              ['default', 'axios'] // import { default as axios } from 'axios',
            ]
          }
        ],
        dts: 'types/auto-import.d.ts' //生成全局引入的文件
      }),
      Components({
        resolvers: [
          AntDesignVueResolver({
            importStyle: 'less' //修改antdv主题色
          })
        ]
      })
    ], //配置插件
    // ******开发服务器配置******
    server: {
      https: true, //(使用https)启用 TLS + HTTP/2。注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS
      host: true, // 监听所有地址
      port: 8080, //指定开发服务器端口：默认3000
      open: true, //启动时自动在浏览器中打开
      cors: false, //为开发服务器配置 CORS
      proxy: {
        //配置自定义代理规则
        // 字符串简写写法
        '/jpi': 'http://192.168.1.97:4567',
        '/api': {
          target: 'http://192.168.1.97:108',
          changeOrigin: true, //是否跨域
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
      // hmr: {
      //   overlay: false
      // }
    },
    // ******项目构建配置******
    build: {
      target: 'modules', //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
      outDir: 'dist', // 构建得包名  默认：dist
      assetsDir: 'assets', // 静态资源得存放路径文件名  assets
      sourcemap: false, //构建后是否生成 source map 文件
      brotliSize: false, // 启用/禁用 brotli 压缩大小报告。 禁用该功能可能会提高大型项目的构建性能
      minify: 'esbuild', // 项目压缩 :boolean | 'terser' | 'esbuild'
      chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
      cssTarget: 'chrome61' //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
    },
    // ******resolver配置******
    resolve: {
      alias: {
        // 别名配置
        // 键必须以斜线开始和结束
        '@': resolve(__dirname, 'src'),
        components: resolve(__dirname, './src/components'),
        assets: resolve(__dirname, './src/assets'),
        '#': resolve(__dirname, 'types'),
        build: resolve(__dirname, 'build')
      }
    },
    // ******打印+debugger清除配置******
    // 测试环境保留打印
    esbuild: {
      pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : []
    },

    css: {
      // 全局变量+全局引入less+配置antdv主题色
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          // 全局变量使用：@primary-color
          modifyVars: {
            'primary-color': '#1890ff', // 全局主色
            'link-color': ' #1890ff', // 链接色
            'success-color': ' #52c41a', // 成功色
            'warning-color': ' #faad14', // 警告色
            'error-color': ' #f5222d', // 错误色
            'font-size-base': ' 14px', // 主字号
            'heading-color': ' rgba(0, 0, 0, 0.85)', // 标题色
            'text-color': ' rgba(0, 0, 0, 0.65)', // 主文本色
            'text-color-secondary': ' rgba(0, 0, 0, 0.45)', // 次文本色
            'disabled-color': ' rgba(0, 0, 0, 0.25)', // 失效色
            'border-radius-base': ' 2px', // 组件/浮层圆角
            'border-color-base': ' #d9d9d9', // 边框色
            'box-shadow-base': ' 0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
          }
        }
      }
    }
  }
})

     推荐阅读：

30

Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
29​​​

SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）

28​​​

查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

27bba02a1c4617422c9fbccbf5325850d9.png​​​

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)

26fea225cb9ec14b60b2d1b797dd8278a2.png​​​

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特

251f53fb9c6e8b4482813326affe6a82ff.png​​​

2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

246176c4061c72430eb100750af6fc4d0e.png​​​

HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

2317b403c4307c4141b8544d02f95ea06c.png​​​

​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码

225d409c8f397a45c986ca2af7b7e725c9.png​​​

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）

210a4256d5e96d4624bdca36433237080b.png​​​

python爱心源代码集锦（18款）

204d9032c9cdf54f5f9193e45e4532898c.png​​​

巴斯光年python turtle绘图__附源代码

19074cd3c255224c5aa21ff18fdc25053c.png​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）

18daecd7067e7c45abb875fc7a1a469f23.png​​​

​草莓熊python turtle绘图代码（玫瑰花版）附源代码

17fe88b78e78694570bf2d850ce83b1f69.png​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

16c5feeb25880d49c085b808bf4e041c86.png​​​

皮卡丘python turtle海龟绘图（电力球版）附源代码

1538266b5036414624875447abd5311e4d.png​​​

【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)

1403ed644f9b1d411ba41c59e0a5bdcc61.png​​​

草莓熊python turtle绘图（风车版）附源代码

1309e08f86f127431cbfdfe395aa2f8bc9.png​​​

用代码过中秋，python海龟月饼你要不要尝一口？

1240e8b4631e2b486bab2a4ebb5bc9f410.png​​​

《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念

11938bc5a8bb454a41bfe0d4185da845dc.jpeg​​​

用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）

100f09e73712d149ff90f0048a096596c6.png​​​

Python函数方法实例详解全集(更新中...)

993d65dbd09604c4a8ed2c01df0eebc38.png​​​

matplotlib 自带绘图样式效果展示速查（28种，全）

8aa17177aec9b4e5eb19b5d9675302de8.png​​​

手机屏幕坏了____怎么把里面的资料导出（18种方法）

71750390dd9da4b39938a23ab447c6fb6.jpeg​​​

2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状

6dc8796ddccbf4aec98ac5d3e09001348.jpeg​​​

Python中Print()函数的用法___实例详解(全，例多）

51ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​​

色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)

480007dbf51944725bf9cf4cfc75c5a13.png​​​

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）

3c6374d75c29942f2aa577ce9c5c2e12b.png​​​

Tomcat 启动闪退问题解决集（八大类详细）

25218ac5338014f389c21bdf1bfa1c599.png​​​

Tomcat端口配置（详细）

1fffa2098008b4dc68c00a172f67c538d.png​​​

tomcat11、tomcat10 安装配置（Windows环境）（详细图文）

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

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

相关文章

云开发--实现发送邮件+短信+链接跳转小程序功能

云开发--实现发送邮件+短信+链接跳转小程序功能

目录 1、小程序实现发送邮件 准备一个qq邮箱&#xff0c;并启动SMTP服务 确定小程序云开发环境&#xff0c;并新建云函数 2、小程序实现发送短信 确定应用 确定签名 确定模板 编写云函数-发送短信 3、链接跳转小程序 H5 配置 生成 URL Link 学习记录&#xff1a; …
阅读更多...
【洛谷刷题】蓝桥杯专题突破-深度优先搜索-dfs（4）

【洛谷刷题】蓝桥杯专题突破-深度优先搜索-dfs（4）

目录 写在前面&#xff1a; 题目&#xff1a;P1149 [NOIP2008 提高组] 火柴棒等式 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 解题思路&#xff1a; …
阅读更多...
Java进阶2 排序查找与Lambda、正则表达式

Java进阶2 排序查找与Lambda、正则表达式

排序查找与Lambda、正则表达式● 导图一、 基础算法1.排序1.1 冒泡排序1.2 选择排序2. 查找2.1 基础查找2.2 二分查找二、Lambda表达式1&#xff09;初识Lambda2&#xff09;函数式编程3&#xff09;.Lambda表达式的标准格式4&#xff09;Lambda的注意事项5&#xff09;Lambda表…
阅读更多...
k8s 1.18.20版本部署

k8s 1.18.20版本部署

身为k8s初学者&#xff0c;在掌握k8s理论知识的同时&#xff0c;也需要掌握一下实际部署k8s的过程&#xff0c;对于理论的学习起到一定的帮助作用。罗列了一下相关步骤&#xff0c;请各位参考&#xff1a; 一、环境准备 三台虚机&#xff1a; 操作系统&#xff1a; CentOS L…
阅读更多...
【计算机组成原理 - 第二章】系统总线（完结）

【计算机组成原理 - 第二章】系统总线（完结）

本章参考王道考研相关课程&#xff1a; 【2019版】6.1.1 总线的概念与分类_哔哩哔哩_bilibili 【2019版】6.1.2 总线的性能指标_哔哩哔哩_bilibili 【2019版】6.2 总线仲裁_哔哩哔哩_bilibili 【2019版】6.3 总线操作和定时_哔哩哔哩_bilibili 【2019版】6.4 总线标准_哔哩哔哩…
阅读更多...
Mac 和 Win，到底用哪个系统学编程？

Mac 和 Win，到底用哪个系统学编程？

今天来聊一个老生常谈的问题&#xff0c;学编程时到底选择什么操作系统&#xff1f;Mac、Windows&#xff0c;还是别的什么。。 作为一个每种操作系统都用过很多年的程序员&#xff0c;我会结合我自己的经历来给大家一些参考和建议。 接下来先分别聊聊每种操作系统的优点和不…
阅读更多...
springCloud学习【2】之Nacnos配置管理Fegin远程调用gateway服务网关

springCloud学习【2】之Nacnos配置管理Fegin远程调用gateway服务网关

文章目录前言一 Nacos配置管理1.1 统一配置管理1.1.1 nacos中添加配置文件1.1.2 从微服务拉取配置1.2 配置热更新1.2.1 方式一&#xff1a;添加注解RefreshScope1.2.2 方式二&#xff1a;使用ConfigurationProperties注解1.3 配置共享二 搭建Nacos集群2.1 集群结构图2.2 搭建集…
阅读更多...
【函数】JavaScript 全栈体系（七）

【函数】JavaScript 全栈体系（七）

JavaScript 基础 第十三章 函数 一、为什么需要函数 函数&#xff1a; function&#xff0c;是被设计为执行特定任务的代码块 说明&#xff1a; 函数可以把具有相同或相似逻辑的代码“包裹”起来&#xff0c;通过函数调用执行这些被“包裹”的代码逻辑&#xff0c;这么做…
阅读更多...
cv2报错:Unsupported depth of input image

cv2报错:Unsupported depth of input image

cv2 报错 error: OpenCV(4.6.0) /io/opencv/modules/imgproc/src/color.simd_helpers.hpp:94: error: (-2:Unspecified error) in function ‘cv::impl::{anonymous}::CvtHelper<VScn, VDcn, VDepth, sizePolicy>::CvtHelper(cv::InputArray, cv::OutputArray, int) [wit…
阅读更多...
vue后台管理系统——添加i18n国际化功能——技能提升

vue后台管理系统——添加i18n国际化功能——技能提升

昨天在写后台管理系统时&#xff0c;遇到一个需求就是需要实现国际化功能。 antd和element-ui这两个框架其实都是有国际化的。 具体展示形式就是如下&#xff1a; 点击右上角头部的语言&#xff0c;切换语言&#xff0c;然后整个系统的文字都改变成对应的语言展示。 切换成…
阅读更多...
燕山大学-面向对象程序设计实验-实验7 多态性：函数与运算符重载-实验报告

燕山大学-面向对象程序设计实验-实验7 多态性：函数与运算符重载-实验报告

CSDN的各位友友们你们好,今天千泽为大家带来的是燕山大学-面向对象程序设计实验-实验5 派生与继承&#xff1a;单重派生-实验报告,接下来让我们一起进入c的神奇小世界吧,相信看完你也能写出自己的 实验报告!本系列文章收录在专栏 燕山大学面向对象设计报告中 ,您可以在专栏中找…
阅读更多...
【C语言进阶】内存函数

【C语言进阶】内存函数

天生我材必有用&#xff0c;千金散尽还复来。 ——李白 目录 前言 一.memcpy函数 ​1.实现memcpy函数 2.模拟实现memcpy函数 二.memmove函数 1.实现memmove函数 2.模拟实现memmove函数 三.memcpy函数和memmove函数的关系 四.memcm…
阅读更多...
2023金三银四--我们遇到的那些软件测试面试题【功能/接口/自动化/性能等等】

2023金三银四--我们遇到的那些软件测试面试题【功能/接口/自动化/性能等等】

一、面试技巧题(主观题) 序号面试题1怎么能在技术没有那么合格的前提下给面试官留个好印象&#xff1f;2面试时&#xff0c;如何巧妙地避开不会的问题&#xff1f;面试遇到自己不会的问题如何机智的接话&#xff0c;化被动为主动&#xff1f;3对于了解程度的技能&#xff0c;被…
阅读更多...
【Docker】什么是Docker？Docker的安装、加速

【Docker】什么是Docker？Docker的安装、加速

文章目录Docker出现的背景解决问题docker理念容器与虚拟机比较容器发展简史传统虚拟机技术容器虚拟化技术Docker安装官方网站安装前提Docker的基本组成镜像容器仓库Docker平台架构图解CentOS7安装Docker确定你是CentOS7及以上版本卸载旧版本yum安装gcc相关安装需要的软件包设置…
阅读更多...
用 ChatGPT 辅助学好机器学习

用 ChatGPT 辅助学好机器学习

文章目录一、前言二、主要内容&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 探索更高效的学习方法可能是有志者共同的追求&#xff0c;用好 ChatGPT&#xff0c;先行于未来。 作为一个人工智能大语言模型&#xff0c;ChatGPT 可以在帮助初…
阅读更多...
Pandas 与 PySpark 强强联手，功能与速度齐飞

Pandas 与 PySpark 强强联手，功能与速度齐飞

Pandas做数据处理可以说是yyds&#xff01;而它的缺点也是非常明显&#xff0c;Pandas 只能单机处理&#xff0c;它不能随数据量线性伸缩。例如&#xff0c;如果 pandas 试图读取的数据集大于一台机器的可用内存&#xff0c;则会因内存不足而失败。 另外 pandas 在处理大型数据…
阅读更多...
Linux分文件编程：静态库与动态库的生成和使用

Linux分文件编程：静态库与动态库的生成和使用

目录 一&#xff0c;Linux库引入之分文件编程 ① 简单说明 ② 分文件编程优点 ③ 操作逻辑 ④ 代码实现说明 二&#xff0c;Linux库的基本说明 三&#xff0c;Linux库之静态库的生成与使用 ① 静态库命名规则 ② 静态库制作步骤 ③ 静态库的使用 四&#xff0c;Linu…
阅读更多...
django-celery-beat搭建定时任务

django-celery-beat搭建定时任务

一、创建django项目和app 1、安装定时任务第三方包 pip install django-celery-beat # 插件用来动态配置定时任务,一般会配合 django_celery_results 一起使用&#xff0c;所以一起安装 django_celery_results pip install django_celery_results pip install eventlet # win…
阅读更多...
Keil MDK6要来了，将嵌入式软件开发水平带到新高度，支持跨平台（2023-03-11）

Keil MDK6要来了，将嵌入式软件开发水平带到新高度，支持跨平台（2023-03-11）

注&#xff1a;这个是MDK6&#xff0c;不是MDK5 AC6&#xff0c;属于下一代MDK视频版&#xff1a; https://www.bilibili.com/video/BV16s4y157WF Keil MDK6要来了&#xff0c;将嵌入式软件开发水平带到新高度&#xff0c;支持跨平台一年一度的全球顶级嵌入式会展Embedded Wor…
阅读更多...
操作系统(1.3)--习题

操作系统(1.3)--习题

一、课堂习题 1、一个作业第一 次执行时用了5min ,而第二次执行时用了6min,这说明了操作系统的( )特点。 A、并发性 B、共享性 C、虚拟性 D、不确定性 D 2、在计算机系统中,操作系统是( )。 A、处于裸机之上的第一层软件 B、处于硬件之下的低层软件 C、处于应用软件之上的系统软…
阅读更多...
最新文章

Copyright @ 2022~2023