nodejs（4）使用docker 开发vue2 + webpackage 开发项目

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/80197503

1，关于nodejs

---

在使用 nodejs 开发web项目还是非常快速的。
在mac 上面运行还遇到点问题，而且担心安装了太多东西不好管理清楚。
就想出一个办法，使用docker 搭建开发环境，然后共享卷volume。
workspace 是nodejs 的项目，在本地进行编辑开发就行了。
运行环境在docker上面。跑起来都是一样的。

2，使用docker

---

docker run --rm --name node -itd -v `pwd`:/app -p 8080:8080 node:alpine 
docker exec -it node sh

然后使用cnpm是淘宝的镜像，安装速度快。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g vue-cli 
cd /app
vue init webpack demo

vue init webpack demo
/bin/sh: git: not found
? Project name demo
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

需要修改几个参数。vue-router ? No ESLint ? NO e2e ? NO

这个命令厉害，创建了一大堆东西，其中有个配置。
修改 config 目录下面的 index.js
修改 host 为： host: ‘0.0.0.0’

其中最重要的就是src 下面有一个简单helloworld。

因为使用的是docker 不能访问 localhost 里面的，修改成 0.0.0.0 在本机就可以访问了。启动运行。

cd demo
cnpm install
cnpm run dev

http://localhost:8080 这个是宿主机器上的地址。

3，构建build

---

# npm run build

> demo2@1.0.0 build /app/demo2
> node build/build.js

Hash: 01cd5b300dd51f2654ea
Version: webpack 3.11.0
Time: 8062ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.9e23f8d1685ccd2ef6c3.js    87.9 kB       0  [emitted]  vendor
                  static/js/app.c22d2fbfe1f8848b11cb.js     1.6 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.d78e39b47b3f070d1a86a93139d73b75.css  432 bytes       1  [emitted]  app
static/css/app.d78e39b47b3f070d1a86a93139d73b75.css.map  828 bytes          [emitted]  
           static/js/vendor.9e23f8d1685ccd2ef6c3.js.map     447 kB       0  [emitted]  vendor
              static/js/app.c22d2fbfe1f8848b11cb.js.map      10 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  507 bytes          [emitted]  

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

生成 dist 目录下面 static 目录是js css，index.html 。

在node_modules 下面是相关的依赖文件：149M node_modules

然后修改页面，立即也就看到效果了，不用刷新页面就变化了。

4，总结

---

使用nodejs 开发系统，还是非常快的。非常的好用。
比jquery 还是方便的不少。开发一个 web项目也容易的多了。
慢慢的要习惯这种方式开发。开发效率还是挺高的。

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/80197503