vue入门环境搭建及demo运行

vue简介:

Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

第一步:安装node.js 下载链接https://nodejs.org/en/

node简介

Node.js是一个Javascript运行环境。实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器,他会改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码。那直白的说,Node.js就是服务器程序,是用来做后端的技术,不能直接用于前端开发。但是干前端的学会了会更加的牛逼,对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发,能够高效的打通前后端,所以vue也是采用他作为配置环境,便于大型项目的开发。

如何查看是否安装成功:黑窗口(命令行)中输入:node -v 

image.png

第二步:安装vue.js

打开cmd命令框,输入 npm install vue 如下图:

image.png

第三步:安装vue-cli工具

Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用

打开cmd命令框,输入 npm install --global vue-cli

第四步 :安装webpack

打开cmd命令框,输入 npm install webpack -g

第五步:创建vue的demo项目

进入到你想要存放项目的目录下,执行该命令( vue init webpack 项目名称): vue init webpack demo_vue demo项目及生成。

image.png

demo目录结构

image.png

第六步:运行vue的demo项目

 cd demo_vue   //进入到刚创建的项目中  
$ npm install     
$ npm run dev     //运行项目 

在浏览器直接访问:http://localhost:8080/即可

image.png

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

CSS Auto Reload:解放F5 键,自动刷新浏览器的前端利器(Chrome 扩展)

在进行前端开发的时候(本文具体而言是编辑CSS 文件时候),常常要做的是刷新浏览器查看修改后的样式。那么最常用到的就是F5 键了,以前在开发WordPress ...

2248
来自专栏小夜博客

PsTools 微软系统工具增强版

2618
来自专栏云计算教程系列

如何在Ubuntu上安装Drone持续集成环境

Drone是一个流行的持续集成和交付平台。它集成了许多流行的版本控制存储库服务,如GitHub,GitLab和Bitbucket,以监视代码更改并在提交时自动构...

1190
来自专栏小樱的经验随笔

kali 2018.1安装教程

00x01 摘要 Kali-linux系统,渗透测试人员的利器,其官网自称 OurMost Advanced Penetration Testing Distr...

3236
来自专栏河湾欢儿的专栏

启动项目时有node-sass的错误

然后就出现了一堆错误 解决方案首先就是使用cnpm或者yarn来安装 我这里用的yarn 然后下载依赖 结果发现还是报错 找了半天才想起来这是一年前的...

621
来自专栏FreeBuf

基于Github的源码白盒扫描工具Raptor

Raptor(猛禽)是一款基于WEB界面的github源代码扫描器。你只需要给它一个Github repository的URL地址,它就能进行自动扫描。 简单介...

2767
来自专栏歪先生_自留地

Zhē Teng_软件

952
来自专栏用户画像

TCP协议

TCP是在不可靠的IP层之上实现的可靠的数据传输协议,它主要解决传输的可靠、有序、无丢失和不重复的问题。TCP是TCP/IP体系中非常复杂的一个协议,主要特点有...

351
来自专栏Laoqi's Linux运维专列

nginx反向代理问题处理记录

3157
来自专栏雪胖纸的玩蛇日常

1.Ubuntu系统与vmware虚拟机的安装与使用

1465

扫码关注云+社区