javascript - vue-cli官方脚手架,有没有大神可以进来解释一下打包的思路，谢谢！（新手）

Question

还是先说说我的一部分理解吧！

官方给出的说明，在cmd中运行 cnpm run dev ,这个命令实际是就是跑的就是build文件下的dev-server.js

这是vue官方脚手架的目录结构，几个webpack开头的文件是webpack的相关配置文件，那么有没有大神可以解释一下其他的几个文件作用是什么？并说说整个build目录下的文件打包思路是什么？每个文件分别起到了什么作用。（越详细越好，谢谢！）

这段代码是截取vue官方脚手架中的src/components/hellow.vue文件。官方是在这边style标签内写的css代码片段，那么我们使用vue很多的时候都是在移动端，会经常使用less,scss，尤其在做适配的时候经常会使用scss中的自定义函数，好自动将px转为rem，那么此时我又该怎么做？

Answer 1

首先

是hello.vue, 不是hellow.vue。接下来正式回答：

参考: http://vuejs.org/v2/guide/sin...

1. 文件解释

 build/dev-server.js

npm run dev 其实是通过node执行这个文件，启动一个express服务器。这个服务器加载了几个中间件，如：http-proxy-middleware(代理转发中间件), webpack-dev-middleware(webpack开发中间件), webpack-hot-middleware(webpack热替换中间件)。

build/dev-client.js

这个文件主要是注入到浏览器，监听webpack-hot-middleware传过来的事件，如reload action。用于代码热更新等。

build/build.js

npm run build，主要是执行这个文件，主要的动作是

• copy static目录到dist目录

• 根据webpack.prod.conf.js配置文件，对源码进行编译，输出到dist目录

build/utils.js

主要是生成webpack css-loader, sass-loader(与styles相关的Loader)等配置。

webpack配置文件不解释了，不然变成webpack入门文章。

2.如何使用less/sass

在style标签内指定对应的lang即可，如下：

<style lang="scss">
 body {
  font-size: 10px;
  p {
    font-size: 1.2rem;
   }
 }
</style>