VueJS可以说是近年来最热门的前端框架之一。越来越多的网站开始使用Vue作为前端框架。vuejs轻量级、简单、对前端友好、学习路径扁平化，使得前端开发更加容易，基于vuejs的前端组件库也越来越多。ElementUI是饿了么团队开发的基于vue的前端组件库。网站建设的必要环境：

NodeJS(npm)Webstorm(前端IDE)Nginx(后来用于将请求转发到后台服务器)

因为需要使用npm的包管理器，所以首先要安装nodejs，直接在node官网下载

Windows系统下载。直接msi。下载后直接双击安装就可以了

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

打开webstorm，点击左上角的【文件】-【新建】-【编辑文件模板】，点击弹出对话框左上角的绿色加号，然后填写名称和扩展名，如图。

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

template div/div/template script type=' text/ecmascript-6 '导出默认{ data(){ return } }/script，然后单击“应用”，然后单击“确定”。现在我们再次点击左上角的File-New，可以看到刚刚创建的vue模板已经出现了。我们点击vue template，填写名称test，可以看到新创建的文件就和我们创建的模板一样，如图所示。

然后将编辑器设置为ES6语法，如图所示

创建ElementUI项目

使用git命令gitclon https://github.com/ElementUI/element-starter.git下载官方模板，使用cnpm intsall下载依赖模块(没有淘宝镜像cnpm可以使用npm安装)，使用npm run dev运行项目

您可以看到bable、webpack和其他插件已经集成。我们不需要配置自己。在我们导入这个项目后，我们需要做的一件事是在这个目录中安装npm模块。我们打开命令行，输入当前项目的根目录，然后输入

npm安装

如果安装速度慢，可以通过npm依赖包使用中国阿里巴巴云提供的图片，如下图

NPM install-registry=http://registry . NPM .淘宝. org

点击进入。

安装后，我们可以看到项目目录中有一个额外的node_modules文件夹，这是项目的依赖包。如果我们将来想添加依赖包，我们可以继续使用上面的说明。例如，如果我们想加入vue路由器，我们需要输入它们

npm安装vue-路由器-保存

Npm将自动找到最新版本的依赖包进行安装。

项目的包装操作

安装依赖项后，我们可以打包并运行项目。我们仍然使用命令行输入当前项目的目录，并输入

npm运行开发

这段代码意味着用本地服务器的端口启动项目。关于本地服务器的配置信息，我们可以在项目根目录下的webpack.config.js中看到以下代码段：

devserver : { host : ' 127 . 0 . 0 . 1 '，port: 8010，proxy : { '/API/' : { target : ' http://127 . 0 . 0 . 1:80 '，changeOrigin: true，Path重写： {'/API' :''}，这里的配置信息写得很清楚，对吧如果我们想更改端口号或主机名，我们只需要在这里更改相应的字段。在我们进入npm run dev之后，会出现一长串的消息，最后会出现web pack :编译成功的字样，这意味着我们的代码已经编译成功了。这时我们打开浏览器，输入localhost:8010，出现如图所示的网页，说明我们的第一个Vuejs2.0 +ElementUI项目已经成功运行。

点击图中的“让我们做吧”按钮，可以看到右侧飘出一条提醒消息，这是ElementUI中的一个组件。

到目前为止，基于VueJs2.0和ElementUI的简单前端网站的原型已经完成，接下来的时间我会慢慢介绍更多构建单页应用的方法和细节。

以上就是边肖给大家介绍的Vue ElementUI，从头开始搭建自己的网站(一、环境建设)。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！