Vue.js + Element.ui 从搭建环境到打包部署
一、搭建环境
由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍。
安装好后可以打开命令行用 npm-v node-v 查看是否安装成功以及版本号
如果以前已经安装过node 和 npm 最好升级到最新版本,命令行 npm install npm@x.xx.x
首先全局安装vue-cli,打开CMD命令行,npm install -g vue-cli
接下来新建项目,运行 vue init webpack demo 这里的demo是你项目的名字,接下来会有一些初始化的设置,其中vue-router是路由,反正我都会选择安装,其他的可以回车跳过或者选择no

---按照提示,cd到新建的项目下,运行npm install
---运行npm run dev
到这里,不出意外的话可以在浏览器里面看到Vue的初始化模板了,如果没有可能是端口号被占用,这里就将配置文件config/index.js里面的端口号改掉就可以了
另外还要补充一下,最后的打包如果在本地起服务器运行打包后的文件是无法运行的,会报错404,所以这里将assetsPublicPath里面的 "/"改成"./",截图里面没有改,懒得再截了,哈哈

我们先来看一下运行后的样子

二、安装Element
到这里我们就可以愉快的玩耍Vue了,但是我们之前说的是 Vue + Element 所以接下来我们药继续安装ElementUI
cd到当前项目 运行 npm i element-ui -S

到这里我们已经安装好了element,接下来就是在项目里面引用了,打开src目录下的main.js

下面我们就可以愉快的使用element里面优雅的组件了,这个是element的网址http://element.eleme.io/#/zh-CN/component/form,也可以自行百度
我们用几个小东西试一试


这里我们需要注意的是,每一个.vue文件里面只能有一个根目录,就是说在这个class为hello的div下面不能有并列的元素,要不然会报错,好了到这里就真的可以愉快的玩耍了
三、打包
在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录,直接把这个目录丢给服务器就好了,dist目录的名字可以自定义在配置文件里面


ok至此,就是本篇的全部内容,剩下的就去vue文档一步步的学习吧,相信vue会给你带来很大的乐趣。
作者:一本正经的胡说八道LV
链接:https://www.jianshu.com/p/998cf125e9fc
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
Vue.js + Element.ui 从搭建环境到打包部署的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- (vue.js)element ui 表单重置
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...
- Element UI 框架搭建
Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- beego+vue.js分离开发,结合发布,简单部署
大家知道,golang开发的东西部署简单是它很大的卖点,一般的应用,生成的可执行文件直接放服务器上运行即可,不需要任何环境.当然,大型的应用才需要比如mysql,nginx等. 但是当vue.js出现 ...
- vue.js + element 搭建后台管理系统 笔记(一)
此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
随机推荐
- windows游戏编程键盘
键盘 首先我们来看一下键盘常用消息 键盘的消息处理过程 键盘消息会有击键消息和字符消息 键盘消息的附加参数 wParam:非系统键的虚拟码 lParam: windows常用虚拟键码及对应的按键
- Fltiss项目的架构、包名的定义和类的划分
这是项目的一览 首先Web根目录. 除了WEB-INF以外,还有css,img,js,lib目录,这四者都是静态资源. 由于客户端无法访问WEB-INF下的内容,所以将它们放置在了Web根目录下. 而 ...
- 2Dot grammar
http://www.cnblogs.com/mjios/archive/2013/04/08/3006577.html . #import <Foundation/Foundation.h&g ...
- spring-boot 定时任务需要注意的地方
spring-boot 跑定时任务非常容易 启动类上添加两个注解基本OK @EnableScheduling @EnableAsync 当然要记录的肯定不是这里的问题了 首先, fixedDelayf ...
- Linux命令行提交更新冲突
1.在harry目录下的hello文件第五行加一些内容 2.将修改后文件执行提交操作 提交成功,文件版本升为5 3.在sally目录下同样修改hello文件第五行 4.sally进行提交操作 发现提交 ...
- fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- 通过蓝牙共享网络设置Charles抓包
在办公室连接WiFi时,电脑和移动设备分配到的IP地址不在同一网段, 但是Android系统提供了一个非常方便的功能,可以搭建一个网络使得这两台设备处于同一网段,实现无障碍访问,使用Charles抓包 ...
- LC 592. Fraction Addition and Subtraction
Given a string representing an expression of fraction addition and subtraction, you need to return t ...
- ViewPager翻页控件简单使用方法
例子布局文件: 主activity布局文件:activity_view_pager.xml <?xml version="1.0" encoding="utf-8& ...
- OpenCL使用CL_MEM_USE_HOST_PTR存储器对象属性与存储器映射
随着OpenCL的普及,现在有越来越多的移动设备以及平板.超级本等都支持OpenCL异构计算.而这些设备与桌面计算机.服务器相比而言性能不是占主要因素的,反而能耗更受人关注.因此,这些移动设备上的GP ...