vue入门环境搭建及demo运行


提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录


vue简介:

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

第一步:安装node.js

下载链接https://nodejs.org/en/
nodejs下载链接

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项目及生成。

demo目录结构
第六步:运行vue的demo项目
复制代码
 cd demo_vue   //进入到刚创建的项目中  
$ npm install     
$ npm run dev     //运行项目 

在浏览器直接访问:http://localhost:8080/即可
相关推荐
Filotimo_2 小时前
2.CSS3.(2).html
前端·css
yinuo2 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip4 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈5 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~5 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技015 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio5 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫7 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@7 小时前
前端发送请求时,参数的传递格式
前端
L李什么李7 小时前
HTML——使用表格制作简历
前端·javascript·html