当前位置: 首页 > 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.lqws.cn/news/112501.html

相关文章:

  • oauth2.0
  • 【Linux】进程虚拟地址空间详解
  • 嵌入式复习小练
  • 【散刷】二叉树基础OJ题(二)
  • 0518蚂蚁暑期实习上机考试题3:小红的字符串构造
  • 基于netmiko模块实现支持SSH or Telnet的多线程多厂商网络设备自动化巡检脚本
  • 采摘机器人项目
  • 北京大学肖臻老师《区块链技术与应用》公开课:07-BTC-挖矿难度
  • 【学习笔记】深度学习-过拟合解决方案
  • 光伏功率预测新突破:TCN-ECANet-GRU混合模型详解与复现
  • 前端(vue)学习笔记(CLASS 7):vuex
  • C++学者给您讲数学之——数列
  • 【Spring AI 1.0.0】Spring AI 1.0.0框架快速入门(1)——Chat Client API
  • Leetcode-7 寻找用户推荐人
  • C++中锁与原子操作的区别及取舍策略
  • 深入理解 JSX:React 的核心语法
  • JSON to Excel 3.0.0 版本发布 - 从Excel插件到Web应用的转变
  • 手撕HashMap!(JDK7版本)
  • 张雪峰为9岁女儿申请40个左右商标!
  • java反序列化:CC5利用链解析
  • Python应用continue关键字初解
  • Python数据分析及可视化中常用的6个库及函数(二)
  • BGP/MPLS IP VPN跨域解决方案
  • 《Pytorch深度学习实践》ch5-Logistic回归
  • ollama的安装及加速下载技巧
  • VBA模拟进度条
  • 缩量和放量指的是什么?
  • 二叉树(二)
  • Windows应用-音视频捕获
  • 嵌入式SDK技术EasyRTC音视频实时通话助力即时通信社交/教育等多场景创新应用