Vue学习笔记（一）Vue开发环境搭建

此处介绍的是windows7系统64位下vue开发环境搭建，个人搭建成功后用于记录或小白参考，望各位纠正！

一、安装node.js(https://nodejs.org/en/download/)
1.打开node.js官网，选择适合自己的版本并下载。（本人这里是win764bit系统,下载的是node-v10.15.0-x64.msi）

下载node.js

2.双击安装包，进行安装

安装node.js1.jpg

①：点击next

安装node.js2.jpg

②：勾选接受，点击next

安装node.js3.jpg

③：选择将要安装的目录，点击next（我这里安装在D盘nodejs文件夹下）

安装node.js4.jpg

④：此处选择默认，继续点击next

安装node.js5.jpg

⑤：点击Install进行安装

安装node.js6.jpg

⑥：安装完成点击Finish

二、基于node.js 安装cnpm（淘宝镜像）
1.打开控制台输入npm -v 查看npm版本（使用cnpm镜像需要npm 版本需要大于 3.0，如果低于此版本需要升级）

查看npm版本.jpg

2.使用npm install -g cnpm --registry=https://registry.npm.taobao.org安装cnpm， 并使用cnpm -v 查看cnpm版本

安装cnpm完成.jpg

三、使用cnpm安装vue
cnpm install vue -g

安装vue.jpg

四、安装vue命令行工具，即vue-cli 脚手架
cnpm install vue-cli -g

安装vue-cli并查看vue版本.jpg

注：查看vue版本使用vue -V

五、创建vue项目
1.打开存放新建项目的文件夹

项目存放文件夹.jpg

2.根据模版创建新项目
在当前目录下输入“vue init webpack 项目名称（使用英文）”。
vue init webpack my-project
①：创建项目 填写项目名称、描述、作者...

创建项目.jpg

②：安装所需的依赖包文件

安装依赖.jpg

③:进入项目文件夹并，使用npm run dev进行安装

进入项目.jpg

④：项目创建成功，进入http://localhost:8080/运行

运行.jpg

⑤：在浏览器中输入http://localhost:8080/，输出结果如下所示：

运行结果.jpg