新建一个VUE项目

新建VUE项目（使用vue-cli新建）

一、需要的环境
需要node.js 和 npm。看一下自个有没有这俩东西，可以通过cmd命令行检查版本来查看。

查看node版本，使用 node-v；查看npm版本，使用npm -v

IMG1.jpeg

如果显示

3.png

说明你没有这个东西，去官网下载最新版本，地址：https://nodejs.org/en/download/，安装即可。

二、初始化新的VUE项目
1、全局安装vue-cli
命令行输入 npm install --global vue-cli ,全局安装vue-cli脚手架工具。
为避免安装失败，检查好自己的网络，npm版本最好是最新版。

IMG2.jpeg

安装成功后会提示你当前vue-cli的版本

2、新建项目
到这里，环境都已经准备完成，可以新建自己的项目了，建议新建一个单独的文件夹来保存自己的VUE项目。
使用命令行进入到这个文件夹（你的目标路径），设置项目名称，vue init webpack 项目名称。以vue_demo为例。

IMG3.jpeg

设置好项目名称后，会跳出若干行询问提示信息，一般默认直接选择回车或者输入yes
（ESLint是代码语法检测，我习惯性关闭，需要的可以直接回车或yes）
等待创建完成，过程需要几分钟。

IMG4.jpeg

3、了解项目各类文件
项目创建完成后的目录如下：

IMG5.jpeg

build ----> 这里存放的是项目构建(webpack)相关代码。
config ----> 这里存放项目的基本配置信息，如端口等，不作要求的可以使用默认的。
node_modules ----> npm加载的项目依赖模块。
src ---->最重要的开发目录，包含：assets（放置一些图片，如logo等）、 components（公共组件）、App.vue（项目入口文件）、main.js:（项目的核心文件）
static ----> 静态资源目录。在打包发布后将用于存放静态资源。
test ----> 初始测试目录，可以删除。
index.html ----> 首页入口文件。
package.json ----> 项目配置文件，不作要求的可以使用默认的。
.xxxx文件 ----> 一些配置文件，包括语法配置，git配置等，不作要求的可以使用默认的。
README.md ----> 项目的说明文档，为markdown 格式。

三、运行项目
1、项目运行
项目创建成功给出的有提示，在当前目录下cd进新建的项目文件夹（名称就是自己创建的项目名），然后执行 npm run dev

IMG8.jpeg

当然也可以先执行 npm install ，下载项目依赖包

IMG6.jpeg

然后执行 npm run build 编译一下

IMG7.jpeg

最后 npm run dev

2、查看页面
将得到的链接地址使用浏览器打开

IMG9.jpeg

然后，开始你的VUE学习之旅吧（注意：Vue.js 不支持 IE8 及其以下 IE 版，请尽量使用高版本浏览器）