说明：
项目包的相关管理、项目的简介以及启动打包方式脚本的配置
项目简介：
"name": "vue",
"version": "1.0.0",
"description": "麦壳后台管理系统",
"author": "macrolam",
"private": true,
项目依赖
这里分为开发环境下使用的：
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"html-withimg-loader": "^0.1.16",
"less": "^2.7.3",
"less-loader": "^4.0.5",
},
生产环境下使用的：
"devDependencies": {
"dependencies": {
"axios": "^0.17.1",
"element-theme": "^2.0.0",
"element-theme-chalk": "^2.0.2",
"element-ui": "^2.0.2",
"jquery": "^3.2.1",
"vue": "^2.5.2",
"vue-awesome": "^2.3.4",
"vue-axios": "^2.0.2",
"vue-event-calendar": "^1.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
具体版本说明相关的查阅：
这里和npm 命令相关的操作是：
npm i 按照这份说明安装所有依赖包
脚本部分
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
这里和npm 命令相关的操作是：
npm run 运行 package.json 中预定义的脚本
解释下：
第一句：在当前项目根目录中打开命令行执行：
npm run dev 等同执行了后边的：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
意思是启动一个服务器并且执行dev下的配置文件，这里也执行了代码的打包压缩，只是放到内存了供你本地服务器上调试开发。所以在dist下是没有的哈。
第二句：
npm run start 等同执行了npm run dev，哈哈其实这个跟第一个一样哈。就是给不同项目过来的伙伴一个惯常操作命令而已。
第三句：
npm run build 等同执行了 node build/build.js
会node的小伙伴肯定知道，这个是使用node 跑一个脚本文件 build.js。
这里是打包命令，文件会放到dist目录下，上线时候打包下丢上去就可以了。
ps:
这里补充下vue-cli搭建的项目中本地服务器知识：
webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，(看网络面板可以发现有websocket的使用不要不知道是哪里来的哈)原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹dist
附录
摘自网络上的一张表：
npm 和 yarn 操作不大一样的命令：
image.png
npm 和 yarn 操作一样的命令：
image.png
相关说明
这里摘自网络
什么是npm:
即：npm package manager ，是一种重用其他开发人员的代码的方法，也是一种与他人共享代码的方式，并且可以很容易地管理不同版本的代码。npm 开始作为 Node 包管理器，所以你会发现很多模块可以在服务器端使用。也有很多的包添加命令供您在命令行中使用。你还会发现可以在前端使用的软件包。
什么是yarn:
Yarn对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码，或者分享自己的代码。 Yarn 做这些快捷、安全、可靠，所以你不用担心什么。通过Yarn，你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单。 使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复，Yarn会更新保持同步。
Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。它并没有试图完全取代 npm。Yarn 同样是一个从 npm 注册源获取模块的新的 CLI 客户端。注册的方式不会有任何变化 —— 你同样可以正常获取与发布包。它存在的目的是解决团队在使用 npm 面临的少数问题。当然，在 Node 版本断更替中，Npm 本身也在积极更新。
网友评论