详解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下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
js 文件引入实现代码
Apr 23 Javascript
浅析javascript中的DOM
Mar 01 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 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 登录记住密码实现思路
2013/05/07 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python代码实现ID3决策树算法
2017/12/20 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
如何更优雅地写python代码
2019/07/02 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
客服部工作职责范本
2014/02/14 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
支行行长岗位职责
2015/02/15 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python