一、概念介绍
npm：前端库的管理工具，与多数语言的包管理工具一样，功能相似，一般配有一个远程的官方的地方，包含所有的库。npm是Nodejs的一个组成部分，即Nodejs下的包管理器，类似linux下的apt-get。
webpack：webpack 是为了解决文件引入过多，且不能通过编程来控制引入的库的问题的，以前为了引入js 文件需要写多个script标签，引入css文件需要写很多个style标签，但使用webpack将多个js文件和css文件打包在一个文件内，这样html页面就只需要引入一个文件。（通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。）
vue-cli：用户生成Vue工程模板。帮你快速开始一个vue项目，也就是给你一套vue结构，包含基础的依赖库。
Nodejs：是一个解释器，也可以理解为一个javascript的运行环境，浏览器自带一个解释器，不同的浏览器的解释器不同，chrome谷歌浏览器使用的是V8引擎，nodejs 是基于V8进行增强，舍弃了一些对浏览器的操作，增加了后端处理的功能。Nodejs安装到电脑中，即可使用。
TypeScript和JavaScript的关系：ypescript 是一种增强类型的面向对象的javascript语言，使用typescript的编译器可以将typescript翻译成JavaScript的代码，实质上都是javascript，不过是换了一种方式编写而已。
ES6和JavaScript的关系：S6, 全名为 ECMAScript6， 准确地来说，JavaScript是ECMAScript的别名，因为ECMAScript更加官方。现在主流的javascript是ES5，ES6就是ES5的升级版本，现在主流的框架都是基于ES6进行开发，但ES6比较先进，很多浏览器还不支持，所以需要Babel库进行翻译，将ES6的代码翻译成ES5，然后再在浏览器上运行。
eslint：一个代码风格检查工具，帮助团队协助时规范不同人员代码编写，可以强制控制代码结构。比javasript更严格的语法检查；各种标点符号，空格，缩进等代码风格的检查；使用插件控制不同前端框架的特定语法。（可设置不进行检查，或只检查一部分）
babel：为了解决es6和浏览器不兼容的问题而诞生的，将ES6翻译为ES5，使得代码与浏览器能够兼容。
less和sess：两者都是对css进行改造，让css能够使用变量，流程控制语句等，像编程一样编写css，模块化设计。
二、vue-cli脚手架的安装
更新到 3.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli。
1、vue-cli2的安装
npm install vue-cli -g2、vue-cli4的安装(使用如下命令，现在创建的是vue-cli4)
npm install @vue/cli -g3、vue-cli特定版本的安装
npm install vue-cli@2.9.6三、使用vue-cli脚手架创建vue项目
1、vue-cli2创建项目命令
vue init webpack <Project Name> //文件名，不支持驼峰（不能含大写字母）2、vue-cli3.0及以上创建项目命令
vue create <Project Name> //文件名 不支持驼峰（含大写字母）四、使用webstorm打开项目，理解项目构成
1、了解项目结构
1、index.html：项目首页，名字不要改
2、src/main.js：项目入口配置文件，名字不要改
较全面的项目构建如下：
五、webstorm的使用方法
1、Go To五个位置含义
2、webstorm快速启动vue项目配置
(1) 点击右上角，添加npm配置
(2) 点击加号，选择npm
(3) 命名并且填写运行命令
(4) 可以看到控制台出现运行
(5) 点击绿色按钮，可以看到启动了端口
3、前端项目组成部分
(1) src目录，是source资源的简写，该文件夹是主要编写功能的地方
(2) gitignore 文件，该文件是给 git 使用，用来选择哪些文件不要被git控制
(3) README.md文件，GitHub的仓库介绍，使用markdown格式编写，github会把这个文件放在目录下面，并展示出来
(4) package.json 文件，该文件存储的是整个项目的依赖库的信息，还有npm 的一些设置，可以认为该文件是整个项目的最基础的配置文件
(5) package-lock.json 文件，该文件是package.json的辅助文件，用来记录更加详细的依赖库版本和库与库之间的关系，两者组合使用
转载：https://blog.csdn.net/qq_34754747/article/details/116765223