vue.js的学习，vue项目基于的软件和vue.js环境的搭建及项目的创建

（以下内容为在学校老师传授所得，分享给初学vue的同学们，如有侵权，联系，删之）
一. 所需的编辑器：官网搜索安装 visual studio code
二. vue.js环境的搭建分为三步
1.安装Node.js（JavaScript运行环境）
2.安装npm(cnpm)
3.搭建Vue-cli 脚手架
开始正式安装。

1、Node.js安装
首先，官网下载 Node.js，windows系统下载 Windows Installer (.msi) 64位的就好。下载完毕后，会有这样的一个图标，点击安装，然后没有什么要特别注意的，直接下一步就可以，但是要知道你安装的路径，养成良好的习惯。
安装完以后，打开命令行（Windows+R）快捷键以管理员身份打开cmd窗口，输入 node -v ，如果出现版本号，那就安装成功！

2、npm的安装
我们所需要的npm包管理器，是集成在node中的，所以，命令行中直接输入npm -v就会如下图所示，显示出npm的版本信息。
但是由于npm的有些资源被限制，为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm !!!
直接在命令行输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后等待，安装完成。
输入cnpm -v，可以查看当前cnpm版本，这个和npm的版本还是不一样的。

vue安装
在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。 输入命令如下： cnpm install vue即可。

3.安装vue-cli脚手架构建工具
vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
具体操作：在cmd中输入命令:
cnpm install --global vue-cli
安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功

打开C:\Users\Andminster\AppData\Roaming\npm目录下可以看到：

打开node_modules也可以看：
脚手架vue-cli搭建好后可以创建项目了

三、用vue-cli来构建基于webpack的项目
要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。

1、我们首先在D盘新建一个文件夹（vueProject）作为项目存放地，然后使用命令行cd进入到项目目录输入（输入d:进入d盘目录，再输入cd vueProject,进入该文件夹）后输入命令：
vue init webpack my-project
说明：my-project是你自定义的项目名称，不能使用大写字母
输入命令后，会出现让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

2、 ***配置完成后，可以看到d盘vueProject目录下多出了一个项目文件夹my-project，然后命令行cd进入my-project这个文件夹（此步至关重要）***,在该目录下安装项目所需要的依赖,命令在第3步。

3、安装项目所需要的依赖
刚初始化的项目是没有依赖的，如果运行会报错，使用命令 cnpm install
安装项目的依赖。
安装完成后，你d盘所建的文件夹目录下my-project中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。然后你的my-project文件夹下内容如下：

解释下每个文件夹代表的意思(仔细看一下这张图）：

4、启动项目
项目依赖安装好后，就可以使用命令: cnpm run dev 来启动项目(使用该命令时，必须已经cd到你的项目目录下，若你创建的项目myproject存放在d盘vueproject文件夹下，则进入项目目录的命令如下图所示（注意红色划线部分）：

当出现如下图所示时即成功

在浏览器里输入： http://localhost：8080会出现下图的欢迎界面

问题汇总：
1、
运行项目时若出现指定端口不起作用并且随机分配端口问题时解决办法：
原因：项目安装的依赖portfinder版本过高
解决：

2、
vscode中js代码自动提示功能，需全局安装typings
npm install typings --global