详解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 相关文章推荐
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
javascript二维数组转置实例
Jan 22 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JavaScript常用数学函数用法示例
May 14 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 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使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
php计算税后工资的方法
2015/07/28 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
Python中的上下文管理器和with语句的使用
2018/04/17 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
UNIX文件系统分类
2014/11/11 面试题
个人能力自我鉴赏
2014/01/25 职场文书
《春天来了》教学反思
2014/04/07 职场文书
操行评语大全
2014/04/30 职场文书
数字化校园建设方案
2014/05/03 职场文书
家具商场的活动方案
2014/08/16 职场文书
首席执行官观后感
2015/06/03 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android