系统：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,后面再根据测试的过程写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-testdocker 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= "alias npmtx="npm --registry= "# 后面可以有上面的某个命令代替npm来使用，可以 加速

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

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

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

npm install webpack -g

查看安装结果

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

安装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部分的，可以跳过

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-testtouch Dockerfile

文件内容如下

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

生成镜像

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

注意最后的点不要少了

对比大小：

virhuiaivirhuiai@virhuiaideMBP vue-test % docker imagesREPOSITORY                   TAG             IMAGE ID       CREATED          SIZEnode-webpack-vue-element2    12.13.0         d5a9998f36fc   7 seconds ago    975MBnode-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? (recommended) 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 devDocumentation can be found at 

上面的一些根据需要选择

进入目录

cd vue-test

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

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

npm install

跑起来

npm run dev

在宿主机里打开（端口号根据run时的）