如何从零开始使用Vue ElementUI搭建个人网站教程（一、环境搭建）？

本文共计1185个文字，预计阅读时间需要5分钟。

VueJS被称为近年来最火的前端框架之一，越来越多的网站开始使用Vue作为前端框架。Vue.js轻量、易用，对前端开发者友好，学习曲线平缓，使得前端开发变得更加简单高效。基于Vue.js的前端开发变得愈发简便。

VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vue作为前端框架，vuejs轻量、简单，对于前端友好，学习路线平坦，这使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。其中ElementUI，就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境：

NodeJS（npm）Webstorm （前端IDE）Nginx（后期用来转发请求到后台服务器）

由于我们需要使用npm的包管理器，所以首先得先安装nodejs, 直接在node官网下载

windows系统直接下载 .msi。下载完毕直接双击安装就ok啦

安装完毕，打开cmd 输入命令 npm -v 查看是否安装成功以及版本

打开webstorm，点击左上角File->New->Edit File Templates，在弹出的对话框中点击左上角的绿色加号，然后按照如图显示填写Name和Extension，

在下方橙色区域的代码段内填写

<template> <div> </div> </template> <script type="text/ecmascript-6"> export default { data(){ return { } } } </script>

然后点击apply，再点击ok即可。现在我们再次点击左上角File->New，可以看到刚才创建的vue template已经出现了。我们点击vue template，名称填写test，可以看到新创建的文件就是刚才我们创建的模版的样子，如图。