前端webpack+node+vue（一）

系统：macOS

安装node（webpack，vue稍后再安装）

brew install node

npm是node的包管理工具，mac 执行上面命令等于同时安装 node 和 npm

接下来新建一个工程目录hello_world，然后进入该目录在终端输入命令

npm init

按照提示输入信息（我是默认设置，全程回车键）

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (hello_world) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/birenjianmo/Desktop/learn/vue/hello_world/package.json:

{
  "name": "hello_world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) 

安装 vue 和 webpack，如果安装成功会在工程目录下出现 package.json，并且在 dependencies 显示已经安装的库和版本号（其实除了安装这两个外还需要安装很多库，参照我 package.json 文件中的 dependencies 项）

npm install vue webpack

 package.json

{
  "name": "hello_world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^8.0.5",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.1.2",
    "vue": "^2.6.8",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.8",
    "webpack": "^4.29.6",
    "webpack-dev-server": "^3.2.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.2.3"
  }
}

都安装完后，开始配置环境