专栏首页会呼吸的Codervue入门环境搭建及运行

vue入门环境搭建及运行

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

第二步:安装vue.js

打开cmd命令框,输入

npm install vue

第三步:安装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目录结构

页面截图可能跟正常的有细微的出入

第六步:运行vue的demo项目

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

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

如下图

到这里,vue项目初步搭建成功。

本文分享自微信公众号 - 会呼吸的Coder(BreathCoder),作者:是灰灰呀s

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-20

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 进程、线程、协程到底是个什么东西?

    不管是上大学课程《操作系统》,还是找工作面试,还是日常工作大家交流中,都离不开进程和线程,有些同学可能还会听说过协程。那他们到底是什么呢?他们之间有什么关系呢...

    会呼吸的Coder
  • 一系列有用的Python技巧

    幸好,Python的标准库提供了collections模块,它为您提供了更多的数据类型

    会呼吸的Coder
  • 什么是Redis缓存穿透、缓存雪崩和缓存预热

    原理:缓存穿透(击穿)是指查询一个一定不存在的数据,由于缓存是不命中时被动写的,并且出于容错考虑,如果从存储层查不到数据则不写入缓存,这将导致这个不存在的数据...

    会呼吸的Coder
  • 基于@vue/cli 3.x的从0到1搭建Vue项目的实践

    Vue官方的脚手架工具Vue Cli有了一次较大的更新,相比于2.x版本,新版本3.x中对项目的搭建,相关包、插件的安装都有了很大的不同。本文即立足于此,选择@...

    胡哥有话说
  • VUE-vue-cli

    在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。

    cwl_java
  • 基于@vue/cli 3.x的从0到1搭建Vue项目的实践

    Vue官方的脚手架工具Vue Cli有了一次较大的更新,相比于2.x版本,新版本3.x中对项目的搭建,相关包、插件的安装都有了很大的不同。本文即立足于此,选择@...

    Criss@陈磊
  • Vue_cli升级4.x版本搭建项目

    在这里配置项目需要的东西 项目空格为选中/取消 a为全选 i为反选 下面是我的项目配置

    任我行RQ
  • vue面试题 vue-cli相关知识点(一)

    1、vue.js:vue-cli工程的核心,主要特点是 双向数据绑定 和 组件系统。 2、vue-router:vue官方推荐使用的路由框架。 3、vuex...

    Javanx
  • vue工具 - vue/cli@3.xx 安装使用流程

    xing.org1^
  • vue入门环境搭建及demo运行

    挑战者

扫码关注云+社区

领取腾讯云代金券