系统：windows 10、Mac
代码目录：（windows）F盘的vue-test，（Mac）/Volumes/RamDisk/vue-test
node:12.13.0
vue
Element ui

目的：不花费大量时间进行环境配置了，只需要简单获取容器镜像，即可快速拥有相关的环境进行学习开发。

Node JS 镜像准备

# 指定镜像的tag比较好
docker pull node:12.13.0

容器vue-test

跑一个容器vue-test,后面再根据测试的过程写Dockerfile来弄个镜像

# windows10上F盘的vue-test文件夹已经创建好
docker run --rm -itd --name vue-test -v F/vue-test/:/web-proj/ -w /web-proj/ -p 8080:8080 node:12.13.0

8080是默认的

# mac上，区别是指定路径的
mkdir /Volumes/RamDisk/vue-test
docker run --rm -itd --name vue-test -v /Volumes/RamDisk/vue-test:/web-proj/ -w /web-proj/ -p 8080:8080 node:12.13.0 bash

进入刚刚跑起来的docker容器，右击docker图标（mac下图形方式也与此类似）

选中Dashboard

在出现的容器列表中选中vue-test所在行的右侧的第二个符号

进入命令行，进入我们指定的目录

# 如果没有 使用-w参数，则要进入我们的目录 cd /web-proj
# pwd
/web-proj

如果需要镜像加速，可以设置alias使用阿里和腾讯的镜像

alias npmtb="npm --registry=https://registry.npm.taobao.org "
alias npmtx="npm --registry=http://mirrors.cloud.tencent.com/npm/ "
# 后面可以有上面的某个命令代替npm来使用，可以 加速

查看npm上已经全局安装的命令

# npm list -g --depth=0
/usr/local/lib
`-- npm@7.0.8

安装打包工具webpack

-g表示全局安装，代码如下：

npm install webpack -g

查看安装结果

# npm list -g --depth=0
/usr/local/lib
+-- npm@6.12.0
`-- webpack@5.11.1

安装vue-cli

安装vue脚手架项目初始化工具vue-cli，-g表示全局安装，代码如下：

npm install vue-cli -g

查看安装结果:

# npm list -g --depth=0
/usr/local/lib
+-- npm@6.12.0
+-- vue-cli@2.9.6
`-- webpack@5.11.1

安装Element

本例子没写使用element部分的，可以跳过

npm install element-ui -g

生成镜像

回到宿主机

1.commit方式生成镜像

docker container commit vue-test node-webpack-vue-element:12.13.0

2.或者写个Dockerfile来生成

cd /Volumes/RamDisk/vue-test
touch Dockerfile

文件内容如下

FROM node:12.13.0
RUN npm install webpack -g && npm install vue-cli -g && npm install element-ui -g
WORKDIR /web-proj/

生成镜像

% docker build -t node-webpack-vue-element2:12.13.0 .

注意最后的点不要少了

对比大小：

virhuiaivirhuiai@virhuiaideMBP vue-test % docker images
REPOSITORY                   TAG             IMAGE ID       CREATED          SIZE
node-webpack-vue-element2    12.13.0         d5a9998f36fc   7 seconds ago    975MB
node-webpack-vue-element     12.13.0         a051afb55d5c   11 minutes ago   1.01GB

可以发现第二种方式(使用Dockerfile方式)生成的镜像比较小

生成项目

环境已经搭建完成，现在我们通过vue-cli来生成测试项目

# mac下，windows下的目录指定参考前面部分，--rm说明容器关闭自动删除
docker run --rm -itd --name vue-test -v /Volumes/RamDisk/vue-test:/web-proj/ -w /web-proj/ -p 80:8080 node-webpack-vue-element2:12.13.0 bash

进入容器（Mac，如果要用图形化方式可以参考文中前面的内容）

docker exec -it 2c59c885c29933967a12596bde088

init

vue init webpack vue-test

一路根据提示输入项目信息，等待项目生成：

vue init webpack vue-test
? Project name vue-test
? Project description A Vue.js project
? Author le
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) no
   vue-cli · Generated "vue-test".
# Project initialization finished!
# ========================
To get started:
  cd vue-test
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

上面的一些根据需要选择

进入目录

cd vue-test

注意，在docker中跑，需要修改host

因为使用的是docker 不能访问 localhost 里面的，修改成 0.0.0.0 在本机就可以访问了。
参考自 csdn的80197503文章（这边不让发链接）

npm install

跑起来

npm run dev

在宿主机里打开http://localhost:8080（端口号根据run时的）