详解Vue+ElementUI从零开始搭建⾃⼰的⽹站（⼀、环境搭建）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>vue element admin
</div>
</template>
<script type="text/ecmascript-6">
export default {
data(){
return {
}
}
}
</script>
然后点击apply，再点击ok即可。现在我们再次点击左上⾓File->New，可以看到刚才创建的vue template已经出现了。我们点击vue template，名称填写test，可以看到新创建的⽂件就是刚才我们创建的模版的样⼦，如图。
然后再设置编辑器的为ES6语法如图
创建ElementUI⼯程
可以看到⾥⾯已经集成了bable、webpack等插件。不需要我们⾃⼰去配置。我们导⼊这个⼯程之后，需要做的⼀件事就是将npm模块安装到这个⽬录下。我们打开命令⾏，进⼊当前⼯程的根⽬录，然后输⼊
npm install
如果安装速度较慢，可以使⽤npm依赖包在国内由阿⾥云提供的镜像，如下所⽰
点击回车。
安装结束后我们可以看到⼯程⽬录下多了⼀个node_modules的⽂件夹，该⽂件夹就是⼯程的依赖包所在。以后我们如果想添加依赖包，就可以继续⽤上⽂的指令，例如如果想加⼊vue-router，那么需要输⼊
npm install vue-router --save
npm会⾃动寻最新版本的依赖包进⾏安装。
⼯程打包运⾏
安装好依赖之后，我们可以对⼯程进⾏打包和运⾏。我们仍然是使⽤命令⾏，进⼊当前⼯程的⽬录，并输⼊
npm run dev
这段代码的意思就是以本地服务器的端⼝启动这个⼯程。关于本地服务器的配置信息，在⼯程根⽬录的fig.js中，我们可以在该⽂件中看到如下代码段：
devServer: {
host: '127.0.0.1',
port: 8010,
proxy: {
'/api/': {
target: '127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
这⾥的配置信息写的很清楚，本地的服务器端⼝为8010，如果我们想改变端⼝号或主机名，只要改变这⾥对应的字段即可。
我们输⼊npm run dev后，会出现⼀长串信息，最后会出现webpack: Compiled successfully的字样，代表我们的代码编译成功。这时我们打开浏览器，输⼊localhost:8010，出现如图所⽰的⽹页，表⽰我们的第⼀个Vuejs2.0 ＋ElementUI⼯程已经成功运⾏。
点击图中的Let's do it按钮，可以看到右侧有⼀个提醒消息飘出来，这就是ElementUI中的⼀个组件。
⾄此⼀个简单的基于VueJs2.0和ElementUI的前端⽹站的雏形已经完成了，接下来的时间我会慢慢介绍构建单页⾯应⽤的更多⽅法和细节。
以上所述是⼩编给⼤家介绍的Vue+ElementUI从零开始搭建⾃⼰的⽹站（⼀、环境搭建）详解整合，希望对⼤家有所帮助，如果⼤家有任何
疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。