npm run dev 如何启动项目

脚手架会在根目录中找到 package.json

package.json

基本信息

name, version, description, author, private 这些都是项目的基础信息，分别对应 vue init webpack XXXX 所填写的信息。这些信息了解一下就好，分别代表着，项目名称、版本定义、项目描述、作者和是否四私有项目（一般都是）。

脚本部分

• scripts,作用是把webpack的原生命令代理一下

  就像封装函数一样，变得简洁一点，提高可读性，也便于 人 的思维去理解

  • dev

    “dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”
    这一句平时应该是用的最多的，因为他是项目的入口。平时你在命令行工具里面输入：npm run dev 其实后台执行的就是就这一句话。当你回车命令后，首先脚手架会到项目的根目录寻找 package.json 里面的scripts的dev，然后执行后面的代码。要是不相信的同学可以自己去验证一下，把dev删除或者给他改一个值，项目估计就不能正常跑起来了。
    ————————————————
    版权声明：本文为CSDN博主「Abner’」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/six_six_six_666/article/details/82633731

  • start

    “start”: “npm run dev” 这一句代码其实就执行了上面那句，把上面那句代码再次封装一次。只不过 npm run dev 是npm 包管理工具的命令，yarn start 是yarn 包管理工具的命令。殊途同归，代码不同，实现的功能是一样的，至于你喜欢用哪个都可以，自己开心就好。要是不懂的，自己去百度一下他们的区别哦！（个人感觉到后期的版本两个工具，功能已经非常完善了，也越来越像了，区别不大！）
    ————————————————
    版权声明：本文为CSDN博主「Abner’」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/six_six_six_666/article/details/82633731

  • build

    “build”: “node build/build.js” 打包生产的命令。当我们的项目调试通过了，到了生产部署的阶段了，就可以运行 npm run build 来构建生产部署的包。

项目依赖

（1）“vue”: “2.5.2”, 表示固定版本，只依赖2.5.2版，之后有新版也不会更新
（2）“vue”: “~2.5.2”, 表示只安装 2.5.X 系列版本的最新版，而 2.6.X 的或其他的不会更新
（3）“vue”: “^2.5.2”, 表示安装当前库的最新版，这个是脚手架默认的！
————————————————
版权声明：本文为CSDN博主「Abner’」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/six_six_six_666/article/details/82633731

开发依赖

devDependencies 这个与上面的项目依赖对应，里面内容的形式也是差不多的，唯一的区别是：开发依赖里面的东西不会添加到生产环境中，只是在开发阶段辅助编译开发等功能。比如：autoprefixer，babel-core 等，他只是在编译的时候给CSS样式添加一些浏览器兼容的前缀，和把ES6 转译成ES5。当打包结束时就会被抛弃，并不会添加到打包的结果中。
————————————————
版权声明：本文为CSDN博主「Abner'」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/six_six_six_666/article/details/82633731

其他

• engin

• browserslist

  browserslist 一个阈值。表示是否要去兼容某些浏览器，如果小于阈值的部分在ES6的转译时可能将会忽略。

  根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器，而不是一股脑的添加。避免不必要的兼容代码，以提高代码的编译质量。> 根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器，而不是一股脑的添加。避免不必要的兼容代码，以提高代码的编译质量。
  ————————————————
  版权声明：本文为CSDN博主「Abner'」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
  原文链接：https://blog.csdn.net/six_six_six_666/article/details/82633731

命令的具体构成

webpack-dev-server

webpack 提供两种用户交互方式

• webpack CLI tool 默认自带的

  有利于生产模式下打包

• webpack-dev-server 需要npm自行安装，常用的

  以便实现实时编译，监听文件变化，热更新等等功能

  https://segmentfault.com/a/1190000005089993 大神的文章 可参考

  • –inline 热更新
  • –progress 是否显示在编译时候的进度条
  • –config XXXX.js 通过这个参数指定一个新的配置文件

自由主题

XMind - Trial Version