vue-cli项目安装

一、环境安装：

（一）安装node.js和npm:

windows环境下，直接在node.js官网下载node.js安装程序，直接安装，安装完成后，node.js和npm都会安装上了。

（二）安装vue3.0以上版本：

在cmd命令行执行npm install -g @vue/cli。执行全局安装vue-cli包。

二、创建vue-cli项目：

（一）vue create hello-world

建议都使用cli初始化一个项目而非图形化界面，在创建的过程中，有一系列的初始化设置preset。

（二）手动创建：

选择：Manually select features

（三）插件选择：

>(*) Babel    ES6向下兼容

 ( ) TypeScript

 ( ) Progressive Web App (PWA) Support

 (*) Router     路由

 (*) Vuex

 ( ) CSS Pre-processors

 (*) Linter / Formatter    保存时检查？

 ( ) Unit Testing

 ( ) E2E Testing

（四）linter检查：

Pick a linter / formatter config:

  ESLint with error prevention only   仅错误预防

> ESLint + Airbnb config    Airbnb配置

  ESLint + Standard config   标准配置

  ESLint + Prettier

（五）何时对代码进行检查：

>(*) Lint on save    保存时

 ( ) Lint and fix on commit

（六）当选择了 Babel, PostCSS, ESLint 等插件，自定义配置的存放位置

In dedicated config files

> In package.json     存放在package.json里

（七）是否保存为默认配置（下次可以直接创建该默认配置，而不用手动一个个选项选择）：

Save this as a preset for future projects? (y/N)是否保存为默认配置。

三、node.js、npm、webpack、vue之间的关系：

（一）Node.js

Node.js是让JavaScript代码可以在后端运行的平台，所以，必须首先在本机安装Node环境。它是vue等项目项目运行的基础，所有项目都是基于node.js上运行的，所以理解为运行环境。
当Node.js安装好后在命令提示符输入node，此刻你将进入Node.js的交互环境。在交互环境下，你可以输入任意JavaScript语句。

（二）npm

npm是包管理器。如果没有npm，我们在使用别人封装好的js模块的时候，需要单独一个个去网上查找并下载安装，非常麻烦。所以就有了npm包管理器，大家把自己写好的js语句，在这里封装为一个个模块，放到npm官网上，供别人下载使用。
并且npm可以自动安装相互依赖关系模块。例如js模块A依赖js模块B就会在安装A时一并安装了B。现在的node.js安装包已经集成了npm。在安装node.js的时候，自动就已经安装了npm包管理器了。

（三）webpack

webpack是npm的一个包，作用是打包js，html和css为一个个模块。

（四）vue

vue也是npm的一个包，它是构建于webpack之上的。vue-cli集成了webpack和webpack-dev-server。