序章 搭建环境篇—准备战士的剑和盾

第一步:安装node.js

Node.js 内置了npm,只要安装了node.js,就可以直接使用 npm,官网地址: Download | Node.js
在这里不建议安装最新版本的node.js,可以选跟我一样的版本,node版本v16.13.2 链接:Index of /dist/

 点进去选择msi下载

 软件安装步骤:

这里就不写了,我转载了一个博客的安装教程,挺详细的,可以按照这个方法进行安装

npm详细安装教程_npm安装-CSDN博客

注意:请node安装完后,npm淘宝镜像一定要安装,不然npm下载东西的时候会很慢 ,安装淘宝镜像过后,可以用cnpm 进行下载

第二步:全局安装vue/cli(脚手架)

cnpm install -g @vue/cli

注意:如果安装过程一直不动,可以敲下回车

检查是否安装成功: vue -V 或者 vue --version

第三步:创建一个vue项目

  • 在要创建工程的目录下输入 :vue create 项目名
  • 按照提示进入工程目录:cd 项目名
  • 按照提示运行项目:npm run serve

在这里在vscode命令行里执行npm可能会报错,也有可能有其他的报错问题,我转载一个比较详细的帖子,可供解决

转载链接:【Vue脚手架安装教程】_安装vue脚手架-CSDN博客

使用vue create demo 创建成功后即可下一步了

选第一个,或者选最后一个也行,最后一个是自定义配置。这里我为了方便选择第一个

创建完成

下面是对项目结构的介绍

第四步:局部安装webpack

在项目根目录执行 ,可以自己选一个合适的版本

cd 对应目录
cnpm install webpack@4.16.5 --save-dev
安装完成:
最后我们运行项目:
npm run serve
运行成功图:

打开访问

成功访问!

下一篇 序章 熟悉战场篇—了解vue的基本操作

后续会持续更新😁......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/345735.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端规范扩展

前端编程规范是基于原有vue2基础上那套《编码风格及标准》上,应用于vue3、typescript、vite2基础上延伸出来的扩展补充,持续完善 一、编码规范 ESLint 代码检测工具 Pretter 代码格式化工具配合双校验代码 Git 规范 - 编码工具 vscode 同步参考文档中…

修改权限控制(chmod命令、chown命令)

1.chmod命令 功能:修改文件、文件夹权限(注意,只有文件、文件夹的所属用户或root用户可以修改) 语法:chmod [-R] 权限 参数 权限,要设置的权限,比如755,表示:rwxr-xr-x…

【linux】NIO中的FileChannel与mmap

FileChannel是Java NIO库中的一个类,用于对文件进行读写操作。它提供了一种高效的方式来读取、写入和操作文件。 使用FileChannel,你可以执行以下操作: 从文件读取数据到缓冲区(Buffer):你可以使用FileCh…

bootloader学习笔记及SD卡启动盘制作

Bootloader介绍 在操作系统运行之前运行的一小段代码,用于将软硬件环境初始化到一个合适的状态,为操作系统的加载和运行做准备(其本身不是操作系统) Bootloader基本功能 1、初始化软硬件环境 2、引导加载linux内核 3、给linux…

019、错误处理:不可恢复错误与panic!

鉴于上一篇文章过长,不方便大家阅读和理解,因此关于Rust中的错误处理, 我将分以下3篇来讲。 另外,随着我们学习的不断深入,难度也会越来越大,但不用担心。接下来只需要让自己的脚步慢一些,认真搞…

FreeRtos Queue (一)

本篇主要讲队列的数据结构和初始化 一、队列的数据结构 二、队列初始化完是什么样子的 队列初始化的函数调用关系:xQueueGenericCreate->prvInitialiseNewQueue->xQueueGenericReset 所以,最终初始化完的队列是这样的 假设申请了4个消息体&…

如何异地链接Pycharm服务器进行远程开发并实现与公司服务器资源同步

文章目录 一、前期准备1. 检查IDE版本是否支持2. 服务器需要开通SSH服务 二、Pycharm本地链接服务器测试1. 配置服务器python解释器 三、使用内网穿透实现异地链接服务器开发1. 服务器安装Cpolar2. 创建远程连接公网地址 四、使用固定TCP地址远程开发 本文主要介绍如何使用Pych…

面试题:说一下缓存穿透?缓存击穿?缓存雪崩?

文章目录 面试题1:怎么解决缓存穿透问题的?那我们怎样来解决这种缓存穿透问题呢?布隆过滤器的优缺点 面试题2:说一下缓存击穿吧,你们是怎么解决的?解决方案: 面试题3:那缓存雪崩说说…

【开源】基于JAVA+Vue+SpringBoot的桃花峪滑雪场租赁系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 游客服务2.2 雪场管理 三、数据库设计3.1 教练表3.2 教练聘请表3.3 押金规则表3.4 器材表3.5 滑雪场表3.7 售票表3.8 器材损坏表 四、系统展示五、核心代码5.1 查询教练5.2 教练聘请5.3 查询滑雪场5.4 滑雪场预定5.5 新…

每日一题 2182. 构造限制重复的字符串(中等,贪心)

贪心,每次都尽量取大的,除非连续取的次数超出限制,此时取一个下一个字符 class Solution:def repeatLimitedString(self, s: str, repeatLimit: int) -> str:N 26count [0] * Nfor c in s:count[ord(c) - ord(a)] 1ret []i, j, m N …

弹性布局(Flex)

目录 1、概述 2、基本概念 3、布局方向 4、布局换行 5、主轴对齐方式 6、交叉轴对齐方式 6.1、容器组件设置交叉轴对齐 6.2、子组件设置交叉轴对齐 7、内容对齐 8、自适应拉伸 9、相关实例 1、概述 弹性布局(Flex)提供更加有效的方式对容器中…

【⭐AI工具⭐】AI工具导航推荐

目录 零 工具导航👉【[AI工具集导航](https://ai-bot.cn/)】👈👉【[iForAI](https://iforai.com/)】👈👉【[AInav](https://www.ainav.cn/)】👈👉【[Navi AI 导航](https://www.naviai.cn/)】&a…