01开箱即用—vue-cli搭建开发从0到1的vue项目

vue-cli搭建从0到1初项目—开箱即用

前言
（1）vue-cli是什么？是基于nodejs+webpack封装的命令行工具。你可以理解为汇集了各种命令的 bash，或者bat。原本需要自己配置webpack的相关配置，被cli简化了。并且按照vue的用户习惯整理了一套构建和目录规范。也就是利用vue-cli生成了一套简单的webpack结构
（2）但是用vue-cli建立出来的项目根目录并没有webpack.config.js文件，也找不到相关引用
（3）vue开发是否依赖于node.js？vue的开发本身是不依赖node的,不过vue的脚手架工具vue-cli里面集成的webpack是基于node开发出来的。
因此只能说webpack是依赖node的。
我们今天用vue的脚手架工具搭建一个基础的项目

一、基础安装

1.1、下载安装Node.js

下载地址：https://nodejs.org/en/download/ ，选择合适自己的版本下载即可。

​ 或者电脑管家直接搜索node.js

具体怎么安装Node.js就不用具体说明了，安装Node.js会默认安装npm（包管理工具）。

​ npm是node.js 内置的一套包管理工具，node.js相当于qq游戏大厅，npm就是其中的小游戏；

1.2、npm改为淘宝源

npm是Node.js提供的包管理工具，因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，我们可以用淘宝 npm 镜像代替默认的 npm。（如果再国外就不用切换了）

（1）方法一：

npm config set registry https://registry.npm.taobao.org （切换淘宝源）

npm config get registry （查看当前源是否是淘宝源）

（2）方法二：

通过下载一个插件nrm，nrm是npm的镜像源管理工具 使用这个可以有效切换npm源；

npm -install nrm -g （安装nrm）

nrm ls （查看）

nrm use taobao（切换的npm源）

1.3、vue和vue-cli安装

（结合体）npm install -g vue @vue/cli

（1）单独vue安装

 npm install -g vue

（2）单独安装vue-cli

npm install –g vue-cli

npm install -g @vue/cli

这两个有什么区别呢？

npm install –g vue-cli 安装的是2.0版本

npm install -g @vue/cli 安装的是3.0或者4.0版本

这两个有点区别，3.0的版本更为简洁，这个结构很简单，没有相关的配置文件或复杂的目录结构。cli3仅生成构建应用程序所需的文件，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。

上图是2.0版本的

build及config：webpack配置相关
node_modules:通过npm install安装的依赖代码库
src：项目源码
static：存放静态资源
.babelrc：babel相关配置（因为我们的代码大多都是 ES6，而大多浏览器是不支持ES6的， 所以我们需要babel帮我们转换成ES5语法）
.editorconfig：编辑器的配置，可以在这里修改编码、缩进等
.eslintignore：设置忽略语法检查的目录文件
.eslintrc.js：eslint的配置文件
.gitignore：git忽略里面设定的这些文件的提交
index.html：入口html文件
package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。
package-lock.json：普通package.json文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。

上图中是cli3.0版本的内容，很简单明了，index.html入口文件直接放到了pubilc文件中，而且自己的webpack配置文件直接给你隐藏了。（不是没有），webpack就觉得你没必要知道这些，你也不用，如果要做怎加配置的话再整个文件下，加一个vue.config.js,然后配置各种loader等等内容即可，内置的merge（下图在node_modules文件夹下）自动整合了

node_modules:通过npm install安装的依赖代码库
public:部署到生产环境的目录
src:源码
.gitignore：git忽略里面设定的这些文件的提交
babel.config.js:babel转码配置
package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。
package-lock.json：普通package.json文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。

我个人比较喜欢cli3或者4.0，简单粗暴！

cli如果想要重新装，记得提前卸载了之前的

npm uninstall –g vue-cli
npm uninstall –g @vue-cli

1.4、安装webpack

npm install -g webpack

1.5、了解概念

（1）webpack是前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以按需加载的模块进行代码分割，等到时机需要的时候再进行异步加载，而要它自动实现这些功能，你要提前编辑好配置文件

（2）vue-cli是脚手架工具，作用就是配置好的模板快速搭建一个项目工程，省的自己去配置webpack配置文件的基本内容。

（3）vue的开发本身是不依赖node的,不过vue的脚手架工具vue-cli里面集成的webpack是基于node开发出来的。 因此只能说webpack是依赖node的。

二、用cli3搭建一个小项目

2.1、打开cmd命令窗口

三种方法：

vue create 项目名称（小写字母/不允许有中文）

vue init webpack 项目名称（小写字母/不允许有中文）

vue ui （都是写代码的，没必要整一个图形可视化界面来创建一个项目了，略显low一点，逼格有点低）

方法一：vue create 项目名称（小写字母/不允许有中文）

选择vue的版本，vue2还是vue3，这个看自己情况，因为3中更新了一些内容，比如prop接受的值不允许更改，v-module更方便了多个数据交互

直接创建完毕，如图所示，开箱即用

vue create：创建的就是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。

vue creat命令是vue-cli3.x提供创建Vue项目的方式，模板是固定的，模板选项可自由配置。

方法二：vue init webpack项目名称（小写字母/不允许有中文）

报错了，没有进行下去

根据提示

npm install -g @vue/cli-init

再执行vue init webpack项目名称（小写字母/不允许有中文）

vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

vue init命令是vue-cli2.x提供创建Vue项目的方式，可以使用github上面的一些模板来初始化项目。比如webpack就是官方推荐的标准模板。

方法三：vue ui

这个不多讲了，自己配置

下几期出webpack各种配置文件，因为cli脚手架只是简化了配置过程，但是里边的内容还是要清楚，一个loader的配置，在开发中还有各种需求，需要能够自己玩转，然后配置！
TakeRoot_80——我们下期再见！