小满Vue3第四十一章(docker 碰撞 vue3)

简介: 领导要求你维护四个项目 每个项目 node版本不同 框架不同 是不是非常头疼 docker可以 帮你解决这个问题

efff1e0e69637507673622265c847627.png


我们来看一下docker(容器) 可以做什么解决了什么问题


如下案例


领导要求你维护四个项目 每个项目 node版本不同  框架不同 是不是非常头疼 docker可以 帮你解决这个问题


b1933c75285a4eddbe4f84fd027516be.png


1.安装docker


Developers - Docker


选择你对应的操作系统


9623528ea9564d94955cd50420d87fd7.png


如果你是windows 出现这种情况就是有问题 或者wsl2 报错


4f39ed0ef08d43dbbc44e19c0819abf4.png


f2f216a92e9ff36d0f90a28a5db0d7c4.png


需要安装wsl  或者更新 wsl


powerShell打开
wsl --install
wsl --update


启动docker错误System. InvalidOperationException Failed to set version to docker-desktop: exit code: -1


如果报这个错 执行下面的命令


netsh winsock reset


重启docker 就好了


2249b38a2b9947d19766d5a941ab3d0a.png


出现这个安装成功或者 输入以下命令检查


505f204c0a55428582b62f7a222fc974.png


docker 分几个概念:镜像、容器、仓库


镜像:就是像是我们装机时候需要的系统盘或者系统镜像文件,这里它负责创建docker容器的,有很多官方现成的镜像:node、mysql、monogo、nginx可以从远程仓库下载


容器:容器特别像一个虚拟机,容器中运行着一个完整的操作系统。可以在容器中装 Nodejs,可以执行npm install,可以做一切你当前操作系统能做的事情


仓库:仓库就像是github那样的,我们可以制作镜像然后push 提交到云端的仓库,也可以从仓库 pull 下载镜像


2.配置docker 的 国内镜像


"registry-mirrors": [
        "http://hub-mirror.c.163.com",
        "https://docker.mirrors.ustc.edu.cn",
        "https://registry.docker-cn.com"
    ],


306e97d058254896857e106987805b3f.png


修改完重启docker 生效


3.创建一个vue3 的项目


npm init vue

4d2899fa88e74f399aac1c56d03aa9a4.png


vite config ts 开启网络访问


export default defineConfig({
  plugins: [vue(), vueJsx()],
  server:{
     host:"0.0.0.0"
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})


--------------------------------------------------未完待续--------------------------------------------------

目录
相关文章
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
12天前
|
API
vue3知识点:provide 与 inject
vue3知识点:provide 与 inject
27 4
vue3知识点:provide 与 inject
|
12天前
|
API
vue3知识点:readonly 与 shallowReadonly
vue3知识点:readonly 与 shallowReadonly
22 1
vue3知识点:readonly 与 shallowReadonly
|
6天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
19 7
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
25 3
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
24 1
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
25 1
|
8天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
9天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
12天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
26 5