美文网首页Java学习笔记Java程序员
vue入门环境搭建及demo运行

vue入门环境搭建及demo运行

作者: 挑战者666888 | 来源:发表于2018-05-22 11:02 被阅读628次

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

腾讯云社区邀请你的加入:https://cloud.tencent.com/developer/support-plan?invite_code=1ldtmamfeeutc

image.png

相关文章

  • vue入门环境搭建及demo运行

    vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容...

  • Vue.js 安装、搭建及创建

    windows环境搭建Vue开发环境 运行下载的Vue demo https://www.cnblogs.com/...

  • WeX5入门记录

    环境搭建 环境下载:WeX5_V3.7正式版 教程文档:入门教程 运行官方Demo 视频演示:运行WeX5的dem...

  • 2019-06-15

    Node.js、Vue.js 运行环境搭建记录 参考链接:Vue.js 运行环境搭建详解(基于windows的手把...

  • macaca

    一.环境搭建和demo运行 二.名词 三.参考阅读

  • fabric1.2网络环境启动过程详解

    fabric运行机制及环境搭建 fabric运行机制及环境搭建环境依赖基于docker镜像的fabric1.2开发...

  • vue项目环境搭建及运行

    一.环境搭建 1.安装node.js(window10) 下载完直接安装,下一步。。。 安装好node,可以先进行...

  • 2019-04-02

    课表安排 vue环境安装 vue绑定事件 vue计算属性 vue判断与循环 CDN实战DEMO vue脚手架的搭建...

  • Vue(7)

    一、环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境。 1、基本的运行环境 该项目使用node& vue在...

  • Flutter基础-(1)环境搭建及demo运行

    Flutter 是一款谷歌的用以同时在 iOS 和 Android 上制作高质量原生界面的移动应用UI框架.目前谷...

网友评论

本文标题:vue入门环境搭建及demo运行

本文链接:https://www.haomeiwen.com/subject/dthhjftx.html