Introduction of Vue.js 3.0 helloworld

1. Install @Vue/cli

mkdir vue
cd vue 
docker run -it \
  -v ~/vue:/app/vue \
  -w /app/vue \
  lqwangxg/node:alpine \
  npm install -g @vue/cli @vue/cli-service-global

...
+ @vue/cli@4.5.6                            # for create app project  
+ @vue/cli-service-global@4.5.6     #  for vue serve build

2. Save as vue-cli Dockerfile 

FROM lqwangxg/node:alpine AS vuecli
ENV APPNAME vue
WORKDIR ${APPNAME}
VOLUME /${APPNAME}
RUN npm install -g @vue/cli @vue/cli-service-global

EXPOSE 8080

3. vue create vuechat

vue create vuechat
Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Y
es
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM

...
🎉  Successfully created project vuechat.
👉  Get started with the following commands:

 $ cd vuechat
 $ npm run serve

4. npm run build 

 $ cd vuechat
 $ npm run build 
> vuechat@0.1.0 build /vue/vuechat
> vue-cli-service build

⠋  Building for production...

 DONE  Compiled successfully in 10150ms                                                       2:04:22 AM

  File                                 Size                           Gzipped

  dist/js/chunk-vendors.06dfc5c8.js    133.79 KiB                     48.11 KiB
  dist/js/app.8a47d1cd.js              6.99 KiB                       2.46 KiB
  dist/js/about.c787ca3d.js            0.35 KiB                       0.27 KiB
  dist/css/app.48f77135.css            0.42 KiB                       0.26 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

5. Dockerfile of nginx 

FROM nginx:alpine
COPY dist /usr/share/nginx/html

6. Docker build -t vuechat .

$ docker build -t vuechat .
Sending build context to Docker daemon  201.3MB
Step 1/2 : FROM nginx:alpine
 ---> 6f715d38cfe0
Step 2/2 : COPY dist /usr/share/nginx/html
 ---> 3d1c7afb1b25
Successfully built 3d1c7afb1b25
Successfully tagged vuechat:latest

7. Docker images 

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
vuechat             latest              3d1c7afb1b25        41 seconds ago      23.1MB

8. Docker run vuechat 

 $ docker run --name vuechat -d -p 8080:80 vuechat3.

9. Next time, download the source from Github and run the docker container vue-cli 

$ git clone https://github.com/lqwangxg/vuechat
cd vuechat 
docker run  -itd -p 8080:8080 --name  vue-dev  \
  -w /vuechat \
  -v ~/vuechat:/vuechat \
  lqwangxg/vue-cli \
  npm install && \ 

10. npm run build by vue-cli

$ docker exec -it vue-dev npm run build
## results reference No.4 ##

11. deploy like No.5, caution -f Dockerfile.depoly .

$ docker build -t vuechat -f Dockerfile.deploy  . 
## results reference No.5 ##

12. Docker run vuechat 

 $ docker run --name vuechat -d -p 8081:80 vuechat3.

13. Docker run vue-cli on dev mode

 $ docker run  -itd -p 8080:8080 --name  vue-dev  \
  -w /vuechat \
  -v ~/vuechat:/vuechat \
  lqwangxg/vue-cli \
  npm run serve   .