知识背景

什么是node.js

nodo.js式基于chrome v8的js运行环境
使js可以当作一门后端语言
特征：基于事件驱动，非阻塞式IO模型
知乎上解释的很好：https://www.zhihu.com/question/33578075

什么是npm

npm 全称【node package management】是node.js内置的软件包管理器
说明：https://www.jianshu.com/p/c36666b306aa

什么是webpack

webpack是一个开源前端打包工具，Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。要使用Webpack 前须先安装Node.js。

与Vue之间的关系

我们通过vue.js开发项目通常使用npm做包管理器，npm运行依赖node.js；
构建一个vue项目的时候，推荐使用npm，这时候我们需要安装node.js。
一些说明：
https://www.cnblogs.com/jianxian/p/10734204.html
https://www.jianshu.com/p/9967c253da5b
https://www.cnblogs.com/Py-king/p/11669976.html

部署环境

安装 node.js

官网安装：https://nodejs.org/en/download/
windoes zip版安装过程：https://www.cnblogs.com/lxg0/p/9472851.html
本次安装以mac 10.15.4为例，win下去掉命令前的“sudo”

查看版本

打开终端分别输入

//查看node版本
node -v
//查看npm版本
npm -v

安装淘宝镜像（可选）

因为大天朝的网络环境，国内可能连接不到，建议安装一下淘宝镜像。
--verbose 打印详细信息

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose

安装webpack

“-g”全局安装

//安装（官方镜像）
sudo npm install webpack webpack-cli -g
//安装（淘宝镜像）
sudo cnpm install webpack webpack-cli -g
//查看版本
webpack -v

安装vue-cli

//安装3.0版本
npm install -g @vue/cli
//安装（官方镜像）
sudo npm install -g vue-cli
//安装（淘宝镜像）
sudo cnpm install -g vue-cli
//查看版本
//注意这里是大写的“V”
vue -V

创建项目

项目位置

打开cmd cd到硬盘的某个路径，这个路径就是接下来项目的存放路径。

创建

vue init webpack demo（项目名，小写）

Project name（项目名：默认“demo”）
Project description （项目介绍：默认 A Vue.js project）
Author （作者名）
Vue build （Use arrow keys）
Runtime + Compiler：recommended for most users（运行加编译）
Runtime—only：about 6KB lighter min+gzip，but templaters（or any Vue-spcific HTML）are ONLY allowed in .Vue files - render functions are required elsewhere（仅运行）
Install vue-router ? （Y/n）（安装Vue路由？）
Use ESLint to lint your code ? （Y/n）（使用ESlint对代码进行校验？）
Set up unit tests （Y/n）（使用单元测试？）
Setup e2e tests with Nightwatch？ （Y/n）（使用e2e测试？）
Should we run npm install fr you after the project has been created?（recommended）（Use arrow keys）
Yes，use Npm
Yes，use Yarn
No，I whill handle that myself
如果npm可以正常使用，选第一项
如果使用淘宝镜像选最后一个
根据提示
cd demo
cnpm install （or if using yarn ：yarn）
npm run dev

项目文件解释

build（webpack 编译任务配置文件: 开发环境与生产环境）
config（项目的配置文件）
config>index.js（项目的基础的配置信息）
config>dev.env.js（开发环境的配置信息）
config>pro.env.js（线上环境的配置信息）
node_modules（项目所有依赖的包文件，比如vue-router、vuex等插件都会下载到这个文件夹里面）
src（工作目录，主要写代码的地方）
static（静态资源）
.babelrc（语法解析器）
.editorconfig（帮助配置编辑器 里 自动化 的语法）
.gitignore（用来过滤一些版本控制的文件，比如node_modules文件夹）
.postcssrc.js（是对postcss的一个配置项）
index.html（入口文件）
package.json（项目文件，记载着一些命令和依赖还有简要的项目描述信息）
package-lock.json（package的锁文件，可以帮助确定安装第三包的
具体版本，保持编程团队的统一）
README.md（项目说明介绍）
来自：https://www.jianshu.com/p/0490e9448c95