前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue入门环境搭建及运行

vue入门环境搭建及运行

作者头像
会呼吸的Coder
发布2020-02-17 17:03:38
5360
发布2020-02-17 17:03:38
举报
文章被收录于专栏:会呼吸的Coder

vue简介:

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

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

node简介

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

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

代码语言:javascript
复制
node -v

第二步:安装vue.js

打开cmd命令框,输入

代码语言:javascript
复制
npm install vue

第三步:安装vue-cli工具

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

打开cmd命令框,输入

代码语言:javascript
复制
npm install --global vue-cli

第四步 :安装webpack

打开cmd命令框,输入

代码语言:javascript
复制
npm install webpack -g

第五步:创建vue的demo项目

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

代码语言:javascript
复制
vue init webpack demo_vue

然后根据需要选择要安装的模块

demo目录结构

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

第六步:运行vue的demo项目

代码语言:javascript
复制
 cd demo_vue   //进入到刚创建的项目中  
代码语言:javascript
复制
$ npm install     $ npm run dev     //运行项目

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

如下图

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 初级程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档