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 相关文章推荐
jQuery 插件开发指南
Nov 14 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python random模块用法解析及简单示例
2017/12/18 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
农村文化活动总结
2014/08/28 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年项目工作总结
2015/04/29 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers