详解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 相关文章推荐
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
AngularJS执行流程详解
Feb 17 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue获取微博授权URL代码实例
Nov 04 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下MAIL的另一解决方案
2006/10/09 PHP
基于mysql的论坛(7)
2006/10/09 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python中的asyncio代码详解
2019/06/10 Python
keras 权重保存和权重载入方式
2020/05/21 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
保护野生动物倡议书
2014/05/16 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript