前端项目基础--启动

目前的前端项目基本都需要使用webpack，从而启动项目也有一些固定的流程， 此处的示例项目是有vue-cli生成的项目， 使用webpack 处理代码, npm 管理依赖包

前端根目录中有一个package.json文件， 记录项目的依赖等信息

拿到一个项目， 需要先在在根目录执行 npm install 命令安装依赖包，依赖的包会存放在node_modules文件夹中，此文件夹需要在版本管理工具中忽略.

package.json文件

记录项目的依赖等信息

scripts字段

scripts指定了运行脚本命令的npm命令行缩写， 下面给出的示例是根据vue-cli搭建的项目产生的package.json的scripts字段

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.config.js --progress --hide-modules --bail",
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --config ./build/webpack.dev.config.js --hot"
  },

dependencies字段

 项目运行所依赖的模块

devDependencies字段

 项目开发所需要的模块

运行

拿到项目， 需要现在package.json所在目录执行npm install命令，安装项目依赖模块

然后根据package.json中的scripts命令运行项目

一般至少会有以下两个命令， 具体要看 scripts 字段的配置

npm run dev: 开发环境使用， 会开启一个服务器， 对与代码的修改会实时体现

npm run build: 生成可运行在生产环境的代码