手动搭建vue-cli环境，不使用webpack模板

前言

    虽然学会了使用webpack模板进行安装vue-cli环境，但是有些情况下还是需要单独安装一些模块（组件），所以教程来了，准备好跟随我去探索了吗？
如果不知道怎样使用webpack模板安装vue-cli环境，参考我另一篇博客:创建vue-cli2项目详解

npm安装

    在安装之前首先创建一个新的文件夹，将即将创建的环境安装在当前文件夹中。

1.安装依赖：npm install 后面还有cnpm的安装哦~不用着急，根据自己的需求去选择安装。

2.初始化：npm init -f 初始化会出现package.json的文件，以后如果在本地安装是需要这个文件的，所以本地安装失败，一般都是没有初始化，缺少package.json这个文件。

可以查看当前的文件发现会新增一个package.json文件，还有一个package-lock.json文件，这个文件存储当前工程的一些信息，包括时间之类的。

3. 下来就是单独安装路由模块（组件）了，npm i vue-router -D，并查看安装的内容。

-D参数相当于（–save-dev）意思就是安装到开发和生产（交互，打包）环境中，如果不知道参数请参考我的另一篇文章：npm,cnpm,和vue-cli2的安装，那这里有小伙伴就问了，那能不能只安装到一个环境中呢？

    答案是当然可以的啦，但是单独安装就会有个小坑，容我细细讲来，单独安装到生产环境是完全ok的，如：npm i eslint --save就是将eslint组件安装到生产环境中而不安装到开发环境中,那么你们猜那是不是安装开发环境就是npm i eslint --dev了？nononono ，这样想就大错特错了，之前试了一下这个命令，结果还是安装到生产环境里去了，如果想要安装到开发环境就得输入如下命令：npm i eslint --save-dev或者npm i eslint -D

这样就将组件安装到开发环境了:
生产环境则是：

4.接下来安装其他组件也是和第三步一样的，安装eslint就是npm i eslint -D以此类推。

全局安装和本地安装的区别

• 全局安装就是安装到node.js安装目录里的node_modules里面了

• 本地安装就是安装到当前工程中的node_modules里面了。

cnpm安装

cnpm安装和npm区别不大，语法就只是将npm换为cnpm而已。

1.cnpm install 安装依赖

2.cnpm init -f 初始化

3. cnpm i vue-router -D 单独安装路由

此时查看文件发现和npm相比缺少了一个文件——package-lock.json，但实际并没有影响。

4.需要安装其他组件的话和第三步也是一样的，只是将组件名称换了而已，如：安装eslint组件命令就是：cnpm i eslint -D，以此类推。

总结

    对于手动搭建环境还是不建议的，效率很慢，实际工作中还是以效率为主，手动我们知道怎么创建的就可以了，另一个就是我们需要单独安装组件也就知道如何安装了，总之掌握了肯定是好的，好了本篇文章到此结束，如果本篇文章对你有所帮助，记得一键三连哦~