当前位置: 首页 > news >正文

vue入门环境搭建及demo运行


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

文章目录

        • vue简介:
        • 第一步:安装node.js
        • node简介
        • 第二步:安装vue.js
        • 第三步:安装vue-cli工具
        • 第四步 :安装webpack
        • 第五步:创建vue的demo项目
          • demo目录结构
        • 第六步:运行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 

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

相关文章:

  • cursor对话
  • Web前端为什么要打包?Webpack 和 Vite 如何助力现代开发?
  • 大数据 ETL 工具 Sqoop 深度解析与实战指南
  • 工厂模式与多态结合
  • enum的用法
  • 【JavaWeb】SpringBoot原理
  • RAG入门 - Reader(2)
  • [Java 基础]打印金字塔
  • Shell脚本编程入门与实战指南
  • AI网校平台开发探索:集成直播、考试题库、白板互动的教育系统源码
  • 降本增效的新引擎:GEO如何提升企业营销ROI
  • 当 “欧洲版 Cursor” 遇上安全危机
  • 【数据结构知识分享】顺序表详解
  • 【分层图 最短路 迪氏堆优化最短路】B4165 [BCSP-X 2024 12 月初中组] 贸易|普及+
  • 从0到1,带你走进Flink的世界
  • 从零开始,搭建一个基于 Django 的 Web 项目
  • electron定时任务,打印内存占用情况
  • Electron 桌面商城开发:攻克多窗口通信、本地存储与内存泄漏实战
  • DashBoard安装使用
  • new操作符具体做了什么
  • 网站备案号超链接怎么做/去除痘痘怎么有效果
  • 建网站开源代码/关键词整站排名优化
  • Php做网站创业/网店推广运营
  • cdr可以做网站页面吗/如何搭建网站
  • 技术支持 光速东莞网站建设/企业建站 平台
  • w做网站诈骗/苏州网站建设优化