vue3项目搭建超详解

vue3安装与目录讲解

文章目录

  • vue3安装与目录讲解
  • 安装node.js
  • npm绑定淘宝镜像
  • 安装vue脚手架
  • 创建vue项目
  • 目录解释
  • 推荐使用vscode



安装node.js

http://nodejs.cn/download/
根据自己电脑的位数自行下载。可安装到任意盘哈,因为我C盘比较大,我就直接在C盘了。
中间可能有个选项框让你勾选是否安装node.js另外的组件包括chocolate等,记得不勾选哈。
注:vue需要node8以上才能支持
在这里插入图片描述
cmd打开命令行,检查是否安装成功,检查node:node -v,检查npm:npm -v
注:npm是node的资源管理器
在这里插入图片描述

npm绑定淘宝镜像

此时npm是官网的,速度会很慢,我们此时切换淘宝镜像,转换为国内cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
检查cnpm -v
在这里插入图片描述

安装vue脚手架

cnpm install -g @vue/cli
脚手架是一个基于vue.js进行快速开发的完整系统。可实现快速搭建标准化项目的脚手架。
vue脚手架是用于快速构建项目,通用所有vue版本。

创建vue项目

随意进入目录,执行vue create vue3_test
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如下便创建成功了。
在这里插入图片描述
进入vue3项目,运行项目
cd vue3_test
npm run serve
在这里插入图片描述

目录解释

node_modules:整个项目所有的依赖
public:静态资源,不会被vue编译
.eslintrc.js:代码检查库配置
package.json:项目相关配置
src:后期业务目录
–>assets:会被编译的静态文件夹
–>components:项目组件
–>main.js:项目入口
–>app.vue:项目根模块
–>views:所有页面
–>store:全局状态管理
–>router:路由
在这里插入图片描述

推荐使用vscode

推荐使用vscode进行代码编写,记得安装代码提示拓展:vetur,浏览器运行拓展:open in browser
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot项目如何优雅停机

文章目录 前言kill -9 pid的危害如何优雅的停机理论步骤优雅方式1、kill -15 pid 命令停机2、ApplicationContext close停机3、actuator shutdown 停机4、ApplicationListener 监听延时停机 前言 相信很多同学都会用Kill -9 PID来杀死进程,如果用在我们微服务项目里…

快速入门matlab——变量练习

学习目标:1.掌握matlab编程中最常用的几种变量类型 2.对变量类型的属性有所熟悉,不要求记忆,知道了解即可 3.要求熟练运用这几种变量类型创建自己的变量 clear all; % 清除Workspace中的所有…

FreeRTOS_移植和配置

目录 1. 什么是FreeRTOS? 2. FreeRTOS 特点 3. FreeRTOS 移植 3.1 验证程序 1. 什么是FreeRTOS? 我们先看 FreeRTOS 的名字,可以分成两部分:Free 和 RTOS,Free 就是免费的、自由的、不受约束的意思,RTO…

ERP、SCM与CRM系统的关系和区别是什么?

在当今数字化时代,企业管理系统扮演着至关重要的角色,而ERP、SCM和CRM系统是其中三个核心组成部分。 虽然它们都在企业管理中发挥着关键作用,但它们各自的功能和应用领域存在一些区别。 我们先来看看,ERP、SCM与CRM系统分别是啥…

DevExpress:报表控件绑定数据库数据源的三种方式(Winform)

1.写在前面 如果你是和我一样,第一次接触DevExpress,并且因为网上资源眼花缭乱无从下手,然后脑子一转直接到DevExpress官网寻找官方使用文档的,那我们的了解顺序应该差不多是一致的。 DevExpress官网:https://www.de…

(十六)数据编辑——图形编辑②

数据编辑——图形编辑② 目录 数据编辑——图形编辑②1.5线要素的延长和裁剪1.5.1线要素延长1.5.2线要素裁剪 1.6要素的变形与缩放1.6.1要素变形操作1.6.2要素缩放操作 1.7要素结点的编辑1.7.1添加结点1.7.2删除结点1.7.3移动结点 1.5线要素的延长和裁剪 单击编辑器下拉菜单&a…

ChatGPT 联网和插件功能,下周起可直接使用,无需排队!

夕小瑶科技说 分享 来源 | 新智元 OpenAI和谷歌,已经打得急红了眼,ChatGPT Plus用户,下周就可以体验联网和插件功能,无需再排队。鲨疯了,真的鲨疯了! ChatGPT,下周开始联网,并开放插…

字典翻译EasyTrans简单使用分享

前言 最近太忙了,一直按在项目上摩擦,都没有时间写分享了。今天终于市把所有负责的模块都写完了,本次迭代引入了字典翻译,借这个机会顺便分享下。 一、什么是字典翻译 所谓的字典翻译其实简单理解就是一些不常更新的有键值对属性的…

如何利用python调用API接口获取数据进行测试

一、Python 可以使用 requests 库来调用 API 接口获取数据。以下是基本的步骤: 1.安装 requests 库 pip install requests 2.导入 requests 库 import requests 3.构建 API 请求的 URL 根据 API 文档,构建请求的URL。 例如, https://a…

从BinDiff到0day 在IE中利用CVE-2019-1208

前言 如上所述,CVE-2019-1208是UAF漏洞,这类安全漏洞可以破坏有效数据、引发进程crash、并且可以精心利用最终导致任意代码执行。而对于本文介绍的CVE-2019-1208而言,成功利用此漏洞的攻击者可以获得系统当前用户权限。如果当前用户具有admi…

C++: 计时器类的设计和实现

文章目录 1. 目的2. 功能列表3. 基础功能:获取耗时4. API 设计: Timer 类5. 单元测试6. API 实现 1. 目的 使用 C Class 的形式,封装原本 C语言的获取时间的函数,提供更容易使用的计时器调用。 使用 C03,原因是和先前的线程安全队…

python+vue流浪动物公益科普宠物在线领养网站

使用动物在线领养网站的用户分管理员和用户两个角色的权限子模块。 开发语言:Python 框架:django/flask Python版本:python3.7.7 数据库:mysql 数据库工具:Navicat 开发软件:PyCharm 系统所要实现的功…

AI 时代,知识工作者的生存指南

最近,大家可能已经见识过 AI 的威力了吧,以 ChatGPT 为代表的 人工智能(AI)展现出接近人一样的回答水准。 来自 Craft AI Assitant AI 就在那里,是房间里的大象,大家不能总装做对自己没有影响。要知道&…

[架构之路-199] - 可靠性需求与可靠性分析:鱼骨图、故障树分析法FTA、失效模式与影响DFMEA,找到影响故障的主要因素

目录 引言: 第1章 故障树分析法与鱼骨图的比较 1.1 相同点 1.2 区别点 第2章 鱼骨图 第3章 故障树 3.1 示意图 3.2 故障树解读 3.3 故障树常见符号 第4章 产品失效(Failure)模式分析DFMEA 引言: 目标系统/产品的可靠性和性能在客户需求阶段就…

脂溶性荧光染料Cy7标记羧酸Cy7-COOH/Carboxylic acids星戈瑞

CY7-COOH是一种含有羧基的化合物,它的分子式为C37H45ClN2O2,分子量519.12。其化学结构中包含有一个吲哚菁骨架,以及一个羧基(COOH)官能团。它的分子式为C37H45ClN2O2,分子量519.12。CY7-COOH是一种近红外荧…

requset页面的代码逻辑

1. 封装请求基地址 在src目录下 放上一个专门写请求相关的文件夹 然后在里面新建一个专门放用户请求的use.js 用axios发送请求 在use.js文件夹里导入request 并且根据接口文档 写请求 然后把这个请求封装成一个函数,这个函数里需要传入两个参数 这两个参数 都放在d…

SpringMVC第二阶段:@RequestMapping注解详解

RequestMapping注解详解 RequestMapping是给个方法配置一个访问地址。就比如web学习的Servlet程序,在web.xml中配置了访问地址之后,它们之间就有一个访问映射关系。 1、value属性 value 属性用于配置方法对应的访问地址. /*** RequestMapping 可以配…

自动操作魔法师4.9.0.0

产品下载 (won-soft.com) 如下图所示: 彻底远离枯燥乏味的工作 在日常办公中,开发票,更新客户资料,打印报表,录入数据等等工作是极为重要,但大部分时候这些工作是相当枯燥的。你不得得一遍又一遍的进行重复…

Cesium入门之六:Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)

Cesium加载影像图层 一、ImageryLayer类常用属性常用方法 二、ImageryLayerCollection类常用属性常用方法 三、ImageryProvider类常用属性常用方法 四、ImageryProvider子类1. ArcGisMapServerImageryProvider加载ArcGIS地图服务 2. BingMapsImageryProvider加载BingMap地图服务…

Java websocket 使用

简介 WebSocket 是一种基于 TCP 协议的全双工通信协议,可以在浏览器和服务器之间建立实时、双向的数据通信。在 Java 中,我们可以使用 Java API for WebSocket(JSR 356)来实现 WebSocket。 WebSocket 的作用是在 Web 应用程序中…