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 条评论
登录 后参与评论

相关文章

来自专栏wym

Linux ubntu 下操作

ls 显示当前下面的文件及文件夹 ls -a 显示当前目录下的所有文件及文件夹包括隐藏的.和..等 ls -al 显示当前目录下的所有文件及文件夹包括隐藏的.和...

1582
来自专栏静默虚空的博客

Webpack 入门

Webpack 入门 **Tip:** 本文所有示例基于 webpack2。 文中的示例代码说明可以参考:Webpack 示例代码说明 安装 本地安装 $...

2987
来自专栏前端侠2.0

vs code和node的相关使用 一一 tsd用法

之后安装typescript    npm install -g typescript

2353
来自专栏张善友的专栏

快速比较和合并文件

由于开发人员使用的应用程序源代码是一组文件,因此我们经常需要比较文件或文件夹的不同版本,或许还要对其进行同步。例如,您可能需要确定自上次生成后修改了哪些文件,或...

19310
来自专栏北京马哥教育

linux高级技巧:服务器集群之keepalived

Keepalived是一个基于VRRP协议来实现的WEB服务高可用方案,可以利用其来避免单点故障。使用多台节点安装keepalived。其他的节点用来提供真实的...

31510
来自专栏Wordpress专用主机|主题模板|必备插件

如何手动配置WordPress浏览器缓存

5695
来自专栏技术墨客

构建用于生产的React静态化单页面服务 原

React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

6464
来自专栏dotnet & java

vs javascript intellisence失效

网上搜了一下,看到msdn文档上一句话,“通过使用 reference 指令,Visual Studio 能够在当前正编辑的脚本与其他脚本之间建立关系。”;突然...

882
来自专栏zaking's

走近webpack(4)--css相关拓展

  我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要...

42010
来自专栏Timhbw博客

腾讯云COS开启FTP功能

2016-06-0715:35:35 发表评论 258℃热度 我的网站一直用的是腾讯云的COS,图片、JS、CSS等静态资源都存在上面,速度比较理想。但有一个...

1.1K14

扫码关注云+社区

领取腾讯云代金券