使用npm创建第一个vue.js

        在这里分享一下第一次使用npm搭建vue.js项目的总结。本人菜鸟级别，刚接触vue，所有的过程都是参考菜鸟教程一步一步来的，如果有不对的地方，希望各位大佬指出。

        首先在搭建项目之前，如果你连npm，nodejs等都没有安装，那么请看我另一篇文章，因为环境都没有搭建好，是不可以完成本篇文章的内容的：vue.js环境的搭建_笑到世界都狼狈的博客-CSDN博客_vue.js安装环境

        接下来，开始安装vue,首先参考菜鸟教程中的方法进行安装

        vue.js菜鸟教程：Vue.js 安装 | 菜鸟教程

        我的操作结果如下：

        查看版本：npm -v

        升级npm(注：npm小于3.0的需要升级，其余不用升级)：cnpm install npm -g

        升级或安装cnpm ：npm install cnpm -g

        最新稳定版 ：cnpm install vue

        执行结果如下图所示：

        全局安装vue-cli：cnpm install --global vue-cli

        我在这一步的时候，出现了错误cnpm无法加载文件，如果你也遇到了相同的问题，请看我另一篇文章：cnpm install --global vue-cli安装时报错_笑到世界都狼狈的博客-CSDN博客，如果你没有遇到问题，那么请继续按照这个步骤往下走。

创建一个基于 webpack 模板的新项目：vue init webpack my-project

这个创建比较慢，创建完成的效果如下图所示：

 从上图开始，默认回车即可(差不多一直回车，中途步骤还是比较多的，截了部分图片如下)：

 

直到看到上图，那么恭喜你，项目创建结束了，接下来，只要运行项目就可以了。

1.找到项目所在位置：cd my-project

2.运行项目：npm run dev

具体如下图所示，运行完等着就可以了

直到命令行运行出下面地址，在浏览器打开，就可以看到我们创建的第一个vue.js项目了

当然，如果你的浏览器没有自动弹出页面，你可以：

        1)：选择将运行成功的地址复制粘贴到浏览器中打开项目

      2)：看我另一篇文章：浏览器不自动打开，解决npm run dev后，浏览器不会自动打开的问题

如果你要重新运行vue项目， 最好先”终止批处理操作”，只要在终端输入ctrl+c即可，如果输入ctrl+c没反应，可以试着先敲一个enter，在输入ctr+c来终止操作。如下图所示：

最后 ，在这里会有小伙伴问， 那我们新建的项目代码在哪里呢？不要着急，去你的C盘下面找一个，会找到一个名叫my-project的文件夹，具体路径如下C:\Users\zxb\my-project