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

vue-cli 初始----安装运行Vue项目

news 来源：原创 2024/5/18 0:19:25

文章目录

  • 安装 Node.js 环境
    • 1、官网下载
    • 2、配置环境变量
    • 3、Node.js 配置
  • 安装 Vue Cli
    • 0、安装配置好node.js环境
    • 1、安装 vue cli
    • 2、通过 vue cli 创建项目
    • 3、创建 一个vue项目
    • 4、项目创建成功
    • 5、运行前端项目

安装 Node.js 环境


1、官网下载


去node.js官网下载版本到本地，我下载到 E:\node.js\，下载完之后会有这么多文件


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yEavPLCB-1662189781837)(C:\Users\rain7\AppData\Roaming\Typora\typora-user-images\1662181761273.png)]


2、配置环境变量


配置nodejs 环境变量，方便我们在任何目录下使用命令

  点击系统，点击高级系统设置，点击高级，点击环境变量，编辑系统变量中的Path，加上你所下载的node.js 的目录即可

在这里插入图片描述


如果启动cmd，敲一个 node -v 显示版本号，那么说明设置环境变量成功!

在这里插入图片描述


3、Node.js 配置


  node.js 提供 npm 命令（node package manage），node.js 包管理工具，把所有的js库都归纳到一起了，通过坐标管理（js名字+版本号），和maven一样。我们需要js只需要输入命令 npm install ，自动联网从库下载，如果不加版本号默认下载最新版本，如果相加版本号，只需跟上@+版本号即可。

npm install axios  // 默认下载最新版本

npm install axios@3.1.2  // 下载指定版本，需要加上@

我们在以后肯定是需要从node的库中下载依赖到本地中的，需要指定本地库的文件位置


（1）设置 node.js 依赖的本地仓库

npm config set cache "E:\noderep"  // 设置缓存存放位置
npm config set prefix "E:\noderep"  // 设置本地仓库存放位置

（2）配置下载国内镜像

  这样每次下载的时候就不会去国外的中心仓库下载了，去国内的镜像下载速度很快，就跟maven配置阿里镜像一样

npm config set registry https://registry.npm.taobao.org

（3） 验证node.js 配置环境

npm config ls

可以看到我们配置成功了

在这里插入图片描述


安装 Vue Cli


0、安装配置好node.js环境

查看上文教程，完成安装配置


1、安装 vue cli


cmd执行命令，安装 vue2 版本

npm install -g vue-cli

等一会下载，下载完成

在这里插入图片描述


同时在我们自己设置的本地仓库多了一堆vue-cli文件


在这里插入图片描述


2、通过 vue cli 创建项目


（1）配置 node.js 本地仓库环境变量


在环境变量中加入本地仓库的路径方便执行命令

在这里插入图片描述


（2）测试命令是否能执行


在cmd输入命令

vue -init

如果有信息那么说明配置环境变量成功!

在这里插入图片描述


3、创建 一个vue项目


我们到达D盘，打开cmd

在这里插入图片描述

输入命令

vue init webpack hello

vue init webpack 是 使用vue脚手架初始化，使用webpack打包，这是固定写法，后面创建hello项目

第一次创建会加载模板，要等一会，必须联网

在这里插入图片描述

模板下载完毕后，开始交互

项目名是否要保持hello，如果不需要直接回车，如果需要改名那么删除进行重新输入即可。

在这里插入图片描述

项目描述是否保持默认，同上

在这里插入图片描述

项目的作者信息，如果电脑有git账户默认读取，如果想更改同上

在这里插入图片描述

项目选择编译+运行，还是 只运行，建议选额第一个，相当于热部署。

在这里插入图片描述

是否安装 vue路由，选择y

在这里插入图片描述

使用eslint在code中，就是个语法校验器，可以不用

在这里插入图片描述

是否设置单元测试，选择no

在这里插入图片描述

是否设置e2e 测试，选择n

在这里插入图片描述

是否要使用 npm install 命令，选择第一个

在这里插入图片描述

等待初始化完毕，vue项目创建成功

在这里插入图片描述

开始初始化

在这里插入图片描述


4、项目创建成功


此时查看d盘中的hello文件夹


在这里插入图片描述


  此文件夹已经生成了 vue项目的所有文件，就像创建maven项目一样生成main目录、pom.xml、java目录、test目录等。这里生成的是前端vue的相关各种目录。


5、运行前端项目


我们创建好项目之后，建议我们进入 hello 目录，run dev 编译运行该项目


在这里插入图片描述

输入下列命令

cd hello

npm run dev

最后等待打包完成，我们就可以在浏览器进行访问了


在这里插入图片描述


进入到前端的项目中访问成功


在这里插入图片描述

相关文章：

  • 华尔街日报请求分析
  • Ubuntu18.04安装深度学习环境(Anaconda、显卡驱动、CUDA、Tensorflow-GPU等)
  • Linux关于yum和vim入门的一些问题
  • 网络请求（四）—Socket
  • Python中的模块
  • JavaEE、Spring
  • setTimeout和setInterval区别，以及定时器的传参功能
  • 【数学分析笔记04】数列与数列极限
  • 1、设计模式的简介
  • .NET LINQ 通常分 Syntax Query 和Syntax Method
  • deepstream--nvinfer
  • python+vue+elementui企业会议管理系统django
  • centos 部署java环境，拷贝jar包并运行
  • 支持在线写SQL的Oracle学习免费网站(个人常使用）
  • ESP8266-Arduino编程实例-SHT20温湿度传感器驱动
  • 【翻译】Mashape是如何管理15000个API和微服务的（三）
  • 2017前端实习生面试总结
  • classpath对获取配置文件的影响
  • JAVA SE 6 GC调优笔记
  • Python十分钟制作属于你自己的个性logo
  • spring boot下thymeleaf全局静态变量配置
  • Spring Cloud Feign的两种使用姿势
  • Vim Clutch | 面向脚踏板编程……
  • 技术发展面试
  • 面试题：给你个id，去拿到name，多叉树遍历
  • 数据可视化之 Sankey 桑基图的实现
  • 微信开放平台全网发布【失败】的几点排查方法
  • 文本多行溢出显示...之最后一行不到行尾的解决
  • 正则学习笔记
  • 阿里云ACE认证之理解CDN技术
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • 如何通过报表单元格右键控制报表跳转到不同链接地址 ...
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • ​软考-高级-信息系统项目管理师教程 第四版【第19章-配置与变更管理-思维导图】​
  • #LLM入门|Prompt#3.3_存储_Memory
  • #QT（TCP网络编程-服务端）
  • $ is not function 　　和JQUERY 命名 冲突的解说 Jquer问题 (
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • (1/2) 为了理解 UWP 的启动流程，我从零开始创建了一个 UWP 程序
  • （python）数据结构---字典
  • （ros//EnvironmentVariables）ros环境变量
  • (ZT)薛涌：谈贫说富
  • (二) Windows 下 Sublime Text 3 安装离线插件 Anaconda
  • (附源码)springboot金融新闻信息服务系统 毕业设计651450
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (免费分享)基于springboot,vue疗养中心管理系统
  • （牛客腾讯思维编程题）编码编码分组打印下标题目分析
  • （状压dp）uva 10817 Headmaster's Headache
  • .bat批处理（五）：遍历指定目录下资源文件并更新
  • .Net Web项目创建比较不错的参考文章
  • .NET 设计模式—适配器模式（Adapter Pattern）
  • .NET：自动将请求参数绑定到ASPX、ASHX和MVC（菜鸟必看）
  • @Query中countQuery的介绍
  • @在php中起什么作用？
  • [acwing周赛复盘] 第 69 场周赛20220917