当前位置: 首页 > 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

http://www.xdnf.cn/news/782731.html

相关文章:

  • 生成JavaDoc文档
  • 用 Vue 做一个轻量离线的“待办清单 + 情绪打卡”小工具
  • 项目课题——基于ESP32的智能插座
  • 华为数据之道 精读——【173页】读书笔记【附全文阅读】
  • VsCode 安装 Cline 插件并使用免费模型(例如 DeepSeek)
  • SQL进阶之旅 Day 13:CTE与递归查询技术
  • 3.2 HarmonyOS NEXT跨设备任务调度与协同实战:算力分配、音视频协同与智能家居联动
  • 【Harmony OS】数据存储
  • VScode自动添加指定内容
  • NLP学习路线图(二十一): 词向量可视化与分析
  • 大语言模型评测体系全解析(上篇):基础框架与综合评测平台
  • 虚荣虚无的对立统一
  • 电阻电容的选型
  • html基础01:前端基础知识学习
  • webstrom中git插件勾选提交部分文件时却出现提交全部问题怎么解决
  • SpringBoot3.2新特性:JdbcClient
  • Trae CN IDE自动生成注释功能测试与效率提升全解析
  • 在linux系统上搭建git服务器(ssh协议)
  • RTC实时时钟DS1338Z-33/PT7C433833WEX国产替代FRTC1338S
  • 【Kotlin】高阶函数Lambda内联函数
  • Elasticsearch | 如何将修改已有的索引字段类型并迁移数据
  • MongoDB账号密码笔记
  • mybatis打印完整的SQL,p6spy
  • 应用智能化转型—MCP原理分析
  • 6-2 MySQL 数据结构选择的合理性
  • MCP:让AI工具协作变得像聊天一样简单 [特殊字符]
  • 数据库密码加密
  • Go Modules 详解 -《Go语言实战指南》
  • Cursor快速梳理ipynb文件Prompt
  • 群晖 NAS 如何帮助培训学校解决文件管理难题