详解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 未结束的字符串常量错误解决方法
Jun 13 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
js初始化验证实例详解
Nov 26 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
vue2.0 实现富文本编辑器功能
May 26 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中的Class的几点个人看法
2006/10/09 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
javascript XML数据显示为HTML一例
2008/12/23 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
python返回昨天日期的方法
2015/05/13 Python
python代码实现ID3决策树算法
2017/12/20 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python之指数与E记法的区别详解
2019/11/21 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
教育专业自荐书范文
2013/12/17 职场文书
群众路线剖析材料
2014/09/30 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015年依法行政工作总结
2015/04/29 职场文书