序

大大小小项目经历无数，之前都是写的vue2的项目，因为项目需要，边学边用vue3，也算能转的开，但心里一直想系统的理顺一下vue3。

环境搭建

由于nodjs的包机制，前端环境永远是无法轻松逾越的大山，时不时的nodjs版本不对，包中某个引用异常，然后各种百度各种尝试。看着前端项目，常常感叹，咋引用那么多包啊。

但我不是一个纯前端，我不会在环境上浪费太多时间，因为我有docker。docker在手，环境搞定。

不会docker没关系，按照下边操作，一样能搞，最重要的是比装nodjs简单。至于开发，还是在你本地开发。因为docker有个数据卷映射功能，能把你开发目录直接映射到docker系统里的目录。

因为我用的是win环境，所以要说的也是win docker安装vue环境。

win docker

百度直接搜索docker，进入官网，直接点击那个window版本的下载。大概564M，下载完后，一路next安装。这要说明一点的是你的系统必须是win10及以上，家庭版本的系统需要自己百度攻略开启wsl2。

docker镜像制作

docker安装完后，也启动了，你先创建一个项目目录，假设叫D:/vuedemo,然后在该目录下新建一个docker镜像制作的文本，名字就叫Dockerfile。内容如下：

FROM node
LABEL maintainer="作者随便 <happy@hanppy>"
RUN npm config set registry https://registry.npmmirror.com/
WORKDIR /app

很简单只有短短四行。

第一行，node是一个官方的基础镜像，在这个镜像基础上构建自己的镜像。

第二行，作者，可以忽略甚至没有这一行。

第三行，执行npm镜像源设置，要不是因为需要重制镜像源，可以直接用node镜像来开发。

第四行，设置工作目录，因为node基础镜像是一个linux，所以可以设置目录为"/app"，没有linux经验的可以把"/app"理解成根目录下的app目录。linux只有且仅有一个根目录"/"。

下一步在Dockerfile同级目录打开一个cmd，然后执行命令：

docker build -t nodejs2:v1 .

然后就能看到镜像文件在不断下载安装。

命令解释一下：

docker就是安装docker后才有的docker命令。

build 是创建一个镜像文件的命令。

-t 指定镜像文件名称，名称包括，名称:版本号，如例子所示：nodejs:v1

最后那个点千万不能丢，表示在当前目录下寻找Dockerfile文件进行镜像文件创建。

docker-compose 创建开发环境容器

有了镜像文件只是第一步，相当于你有了一个系统盘，想要把系统真的能跑起来，你还需要找台机子安装这个系统盘，docker容器创建就相当于安装系统。

我们这里采用最好操作的docker-compose方法来安装容器，首先在D:/vuedemo下创建一个以容器名命名的目录，假设叫 myvue，然后在myvue下创建文件，名为docker-compose.yml。内容如下：

version: '3.8'

networks:
  nodejsnet:
    driver: bridge

services:
  nodejs:
    image: nodejs:v1      #镜像名称，就是制作镜像时候的名字
    container_name: nodjs #容器名称，可以省略。系统会使用默认名字
    volumes:
      - D:/vuedemo/project:/app  #这是重点，映射你本地目录到容器系统中的目录 D:/vuedemo/project 为你的项目根目录，/app为容器系统工作目录。中间用“:”表示映射
    stdin_open: true
    tty: true
    environment:
      - NODE_ENV=development
    ports:
      - 5173:5173 # 前边是本地端口，后边是容器端口，意识是把本地5173映射到容器5173端口
    networks:
     - nodejsnet
    command: sh
    restart: "no"

在该配置文件同级目录下调起cmd，然后运行命令：

docker-compose up -d

这个命令经常用，意思就是启动安装启动容器，或者更新启动容器。docker-compose在安装完docker后也会有的命令。

容器中创建vue项目

容器有了。下一步就是登陆容器的terminal。直接打开桌面容器。点击容器对应的terminal按钮。如下图：

然后就出来一个熟悉的“cmd”。

vue3 方法初始化项目

在命令行里执行如下创建项目命令

npm init vue@latest

剩下的参考官方文档：cn.vuejs.org/guide/quick…

vite 方法初始化项目

在命令行里执行如下命令：

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

参考官方文档:cn.vitejs.dev/guide/#scaf…

说明一下，npm init 等于 npm create命令，之前就很困惑为啥npm一会init一会create，百度了一下，两个命令一样。

两种初始化vue项目用的模块不一样，一个是vue一个是vite，但最后都是生成一个vite项目。通过修改生成项目的配置文件，最后效果一样。

vite配置

由于docker容器所依赖的wsl2技术，有一些先天缺陷，导致容器中无法监听宿主机文件变更，所以需要vite特殊配置一下，以便实现热刷新。相关说明链接:cn.vitejs.dev/config/serv…

在D:/vuedemo/project/ 下找到vue项目目录，找到一个名叫“vite.config.js”的文件,添加配置:

  server:{
    host:"0.0.0.0",
    hmr:true,
    watch: { usePolling: true }
  }

具体位置如下图

其中host设置，允许容器外，即宿主机访问该容器的端口。

watch设置，是实现热刷新。

最后在容器cmd里运行 npm run dev 启动vue项目。

然后在浏览器里访问 localhost:5173。

结语

对于开发来说，万事环境难，环境搭完了，后边可以跟着文档系统学习了。

预计还会输出几篇vue3的文章，但肯定不是无脑的搬运文档。初步计划把印象深刻，与vue2差异大的一些内容整理一下进行输出。