详解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 技巧小结
Apr 02 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
react中的DOM操作实现
Jun 30 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
学习Vue组件实例
2018/04/28 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
python中requests模块的使用方法
2015/04/08 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Numpy之random函数使用学习
2019/01/29 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
车工岗位职责
2013/11/26 职场文书
自荐书封面下载
2013/11/29 职场文书
《藏戏》教学反思
2014/02/11 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
人资专员岗位职责
2014/04/04 职场文书
树转促学习心得体会
2014/09/10 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
2014年环保工作总结
2014/11/26 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
工人先进事迹材料
2014/12/26 职场文书
人事聘任通知
2015/04/21 职场文书
社区节水倡议书
2015/04/29 职场文书
Redis性能监控的实现
2021/07/09 Redis
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python