VUE+Element环境搭建与安装的方法步骤


Posted in Javascript onJanuary 24, 2019

1,安装node,确保安装4.0版本以上,具体的安装可以百度。

2,在命令行创建文件夹

VUE+Element环境搭建与安装的方法步骤

3,安装Vue-cli

输入:cnpm install -g vue-cli , 回车, 等待安装。。。。

输入:vue ,查看vue相关信息

4,初始化项目

vue init webpack last_demo 然后等一下就会出现相关的信息,再自己去选择安装的一些设置

VUE+Element环境搭建与安装的方法步骤

安装完的时候,你的文件夹就变成了这样了:

VUE+Element环境搭建与安装的方法步骤

如果你的文件夹中没有node_modules的文件,那么你就要在命令行中打开你的项目并输入:

npm install

5,运行VUE环境,输入npm run dev ,然后使用浏览器打开:http://localhost:8080

一、搭建环境

由于新的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

VUE+Element环境搭建与安装的方法步骤

—按照提示,cd到新建的项目下,运行npm install

—运行npm run dev

到这里,不出意外的话可以在浏览器里面看到Vue的初始化模板了,如果没有可能是端口号被占用,这里就将配置文件config/index.js里面的端口号改掉就可以了

另外还要补充一下,最后的打包如果在本地起服务器运行打包后的文件是无法运行的,会报错404,所以这里将assetsPublicPath里面的 “/”改成”./”

VUE+Element环境搭建与安装的方法步骤

二、安装Element

到这里我们就可以愉快的玩耍Vue了,但是我们之前说的是 Vue + Element 所以接下来我们要继续安装ElementUI

cd到当前项目 运行 npm i element-ui -S

VUE+Element环境搭建与安装的方法步骤

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

VUE+Element环境搭建与安装的方法步骤

三、打包

在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录,直接把这个目录丢给服务器就好了,dist目录的名字可以自定义在配置文件里面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
js实现自动锁屏功能
Jun 02 Javascript
JS实现带阴历的日历功能详解
Jan 24 #Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 #Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 #Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 #Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 #Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 #Javascript
记一次vue去除#问题处理经过小结
Jan 24 #Javascript
You might like
推荐php模板技术[转]
2007/01/04 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python hashlib加密实现代码
2019/10/17 Python
Python 必须了解的5种高级特征
2020/09/10 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
运动会跳远广播稿
2014/02/04 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
推荐信怎么写
2014/05/09 职场文书
大学生实习推荐信
2015/03/27 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
合作合同协议书
2016/03/21 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang