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

VUE2脚手架的下载与安装

1.确保npm能用(安装Node.js)

Node.js的下载地址:

Node.js — Download Node.js®

直接下一步下一步安装就行

安装结束后,打开终端,输入npm命令,注意配置环境变量

2.

Vue CLI(脚手架安装)

1、 Vue的脚手架简介

Vue的脚手架(Vue CLI: Command Line Interface)是Vue官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成html css js代码,并且可以将这些代码自动发布到它自带的服务器上,为我们Vue的开发提供了一条龙服务。脚手架官网地址:

Vue CLI

注意:Vue CLI 4.x需要Node.js v8.9及以上版本,推荐v10以上。

2、脚手架安装步骤:

① 建议先配置一下npm镜像:(可装可不装)

1) 豆瓣镜像:npm config set registry http://pypi.douban.com/simple/

清华镜像:npm config set registry Simple Index

切回原来的npm包:npm config set registry https://registry.npmjs.org

2)终端输入: npm config get registry

返回成功对应进行地址,表示设置成功

② 第一步:安装脚手架(全局方式:表示只需要做一次即可)

1) npm install -g @vue/cli

2) 安装完成后,重新打开DOS命令窗口,输入vue --version命令查看脚手架版本

有版本信息,表示成功

注意:环境变量的配置

npm config get prefix 获取node的位置

编辑系统变量--->高级--->环境变量--->系统变量---->path-->node的位置

③ 第二步:创建项目(项目中自带脚手架环境,自带一个HelloWorld案例)

第一种方式

1) 切换到要创建项目的目录,然后使用 vue create vue_pro

这里选择Vue2,

babel:负责ES6语法转换成ES5。

eslint:负责语法检查的。

回车之后,就开始创建项目,创建脚手架环境(内置了webpack loader),自动生成HelloWorld案例。

③ 第三步:编译Vue程序,自动将生成html css js放入内置服务器,自动启动服务。

1) dos命令窗口中切换到项目根:cd vue_pro

2) 执行:npm run serve,这一步会编译HelloWorld案例

ctrl + c停止服务。

3) 打开浏览器,访问:http://localhost:8080

第二种方式

在终端输入vue ui 运行之后跳转到http://localhost:8000/dashboard

点击左上角wordvue选择Vue项目管理器,打开之后可以创建项目 也可以打开之前已有的项目

选择创建项目,然后选择项目所在的目录,这次依旧放在桌面上

填写项目名称,包管理一般选默认,git仓库看个人需求

预设就是手动选择配置项,和第一种方法一样

配置也是一样的

创建成功之后,会自动进入app项目

安装依赖(用vue ui安装依赖非常简单,直接搜索然后安装)

相关文章:

  • 【含文档+PPT+源码】基于Python爬虫二手房价格预测与可视化系统的设计与实现
  • php虚拟站点提示No input file specified时的问题及权限处理方法
  • Web3 的隐私保护机制:如何保障个人数据安全
  • 【今日EDA行业分析】2025年3月8日
  • http协议的三次握手机制
  • Spring源码探析(一):SpringApplication构造函数核心逻辑
  • 工程化与框架系列(27)--前端音视频处理
  • 用OpenCV写个视频播放器可还行?(C++版)
  • MySQL知识点(第一部分)
  • 深度学习|自监督学习新星:DINO 解析与实践指南
  • 请谈谈 HTTP 中的安全策略,如何防范常见的Web攻击(如XSS、CSRF)?
  • 机器人匹诺曹机制,真话假话平衡机制
  • rpc和proto
  • C++ 算法竞赛STL以及常见模板
  • VMware workstation Pro 17 官网下载教程/安装包
  • 百货店的诞生与现代商业革命:结合开源AI智能客服、AI智能名片与S2B2C商城小程序的新视角
  • [网络爬虫] 动态网页抓取 — Selenium 元素定位
  • 虚幻基础:动画层接口
  • tcp udp区别
  • 【英伟达AI论文】多模态大型语言模型的高效长视频理解
  • 复旦建校120周年大型义诊举行,百余名专家服务市民超三千人次
  • 中国驻美大使:远离故土的子弹库帛书正随民族复兴踏上归途
  • 广药集团原董事长李楚源被“双开”:去年8月被查,曾多次发表争议言论
  • 阿里上财年营收增6%,蒋凡:会积极投资,把更多淘宝用户转变成即时零售用户
  • 4月新增社融1.16万亿,还原地方债务置换影响后信贷增速超过8%
  • 专访|茸主:杀回UFC,只为给自己一个交代