详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)


Posted in Javascript onApril 30, 2019

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

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

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

详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

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

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

详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

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

详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

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

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

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

详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

然后再设置编辑器的为ES6语法 如图

详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

创建ElementUI工程

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下载官方提供的模板, 
② 使用cnpm intsall下载依赖的模块(没有淘宝镜像 cnpm 可以使用npm install) 
③ 使用npm run dev运行项目

详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

可以看到里面已经集成了bable、webpack等插件。不需要我们自己去配置。我们导入这个工程之后,需要做的一件事就是将npm模块安装到这个目录下。我们打开命令行,进入当前工程的根目录,然后输入

npm install

如果安装速度较慢,可以使用npm依赖包在国内由阿里云提供的镜像,如下所示

npm install --registry=http://registry.npm.taobao.org

点击回车。

安装结束后我们可以看到工程目录下多了一个node_modules的文件夹,该文件夹就是工程的依赖包所在。以后我们如果想添加依赖包,就可以继续用上文的指令,例如如果想加入vue-router,那么需要输入

npm install vue-router --save

npm会自动寻找最新版本的依赖包进行安装。

工程打包运行

安装好依赖之后,我们可以对工程进行打包和运行。我们仍然是使用命令行,进入当前工程的目录,并输入

npm run dev

这段代码的意思就是以本地服务器的端口启动这个工程。关于本地服务器的配置信息,在工程根目录的webpack.config.js中,我们可以在该文件中看到如下代码段:

devServer: {
 host: '127.0.0.1',
 port: 8010,
 proxy: {
  '/api/': {
  target: 'http://127.0.0.1:8080',
  changeOrigin: true,
  pathRewrite: {
   '^/api': ''
  }
  }
 },

这里的配置信息写的很清楚,本地的服务器端口为8010,如果我们想改变端口号或主机名,只要改变这里对应的字段即可。 
我们输入npm run dev后,会出现一长串信息,最后会出现webpack: Compiled successfully的字样,代表我们的代码编译成功。这时我们打开浏览器,输入localhost:8010,出现如图所示的网页,表示我们的第一个Vuejs2.0 +ElementUI工程已经成功运行。 

详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建) 详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

点击图中的Let's do it按钮,可以看到右侧有一个提醒消息飘出来,这就是ElementUI中的一个组件。 

详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

至此一个简单的基于VueJs2.0和ElementUI的前端网站的雏形已经完成了,接下来的时间我会慢慢介绍构建单页面应用的更多方法和细节。

以上所述是小编给大家介绍的Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
jquery随机展示头像代码
Dec 21 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 #Javascript
TypeScript开发Node.js程序的方法
Apr 30 #Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 #Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 #Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 #Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 #Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python中对list去重的多种方法
2014/09/18 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python json读写方式和字典相互转化
2020/04/18 Python
Python流程控制语句的深入讲解
2020/06/15 Python
Python 没有main函数的原因
2020/07/10 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
SQL数据库笔试题
2016/03/08 面试题
linux面试题参考答案(7)
2014/07/24 面试题
财务会计专业求职信范文
2013/12/31 职场文书
加强作风建设心得体会
2014/10/22 职场文书
护士个人年终总结
2015/02/13 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
纪检监察立案决定书
2015/06/24 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
深入理解go slice结构
2021/09/15 Golang
Python读写yaml文件
2022/03/20 Python