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

VS Code创建VUE项目(一)工具安装与项目创建

一.安装与配置npm

1.下载安装Node.js

安装Node.js

下载地址:

Node.js — 在任何地方运行 JavaScript (nodejs.org)或下载 | Node.js 中文网

下载后一步步安装就好(安装过程基本一路直接“NEXT”就可以了,直到Finished),我之前已经安装了,详细步骤大家可以百度npm安装或Node.js安装(npm安装-详细教程-CSDN博客)

Node.js会自动安装npm

2.查看是否安装成功

按键:win+R,然后输入cmd打开命令窗口,输入node -v  和 npm -v

3.配置npm

3.1 配置npm的全局模块的存放路径以及cache的路径

在你想存放的地址创建2个文件夹,我的如下

使用管理员身份打开cmd命令行,命令窗口输入以下命令配置

npm config set prefix "D:\Node\Lib"
npm config set cache "D:\Node\Cache"

通过 命令:npm config list 查看配置

3.2 设置环境变量PATH

3.3 配置镜像站

命令行输入 npm config set registry=https://registry.npm.taobao.org

查看输入  npm config get registry

PS:可以安装nrm 管理,快速切换,安装的前提是先配置好上面的镜像地址

命令行输入 npm install -g nrm 进行安装

安装后可通过以下命令使用

nrm ls
nrm use 'registry_name'

3.4 安装cnpm

输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

或 npm install cnpm -g

进行安装

输入命令:cnpm -v  查看

二、安装Vue-cli

输入命令:npm install @vue/cli -g

安装有点慢,需要等待

输入命令:vue -V  查看

三、创建Vue 3项目

整个文件路径不能有中文和空格!!!

1. 打开VScode,选择打开文件夹

(就是你的项目代码要放的地方)

2.打开终端,创建项目

按  ctrl + J ,打开终端窗口,输入命令vue create 项目名称,回车,创建项目

项目配置如下:

出现如下信息就是成功啦

按照他的提示命令输入启动项目

点击他提示的链接或者浏览器输入地址就可以看到界面啦

四.安装与引入Element Plus (按需)

因为我后面用到了他的组件,所以需要安装,不用的可以不安装

官方说明:快速开始 | Element Plus (element-plus.org)

组件用法:Element Plus (element-plus.org)

1.安装Element Plus 

新建一个终端,进入项目的文件夹,然后输入命令进行安装:npm install element-plus --save

2. 引入

选项一:完整引入(本demo选择此方案)​

如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便

修改main.ts文件

//增加引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'//让创建的app使用
app.use(ElementPlus)

完整的main.ts文件如下:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

选项二:按需导入

需要使用额外的插件来导入要使用的组件,有2个选择

  • 方案一:自动导入

进入项目的文件夹,然后输入命令进行安装:npm install -D unplugin-vue-components unplugin-auto-import

然后配置,在webpack.config.js加入如下代码

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}
  • 方案二:手动导入

需要安装 unplugin-element-plus 来导入样式。 配置文档参考 docs

3.检验使用

在HomeView.vue加入下方代码

 <div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button>
</div>

代码插入位置:

刷新网页查看效果:

相关文章:

VS Code创建VUE项目(一)工具安装与项目创建

一.安装与配置npm 1.下载安装Node.js 安装Node.js 下载地址&#xff1a; Node.js — 在任何地方运行 JavaScript (nodejs.org)或下载 | Node.js 中文网 下载后一步步安装就好&#xff08;安装过程基本一路直接“NEXT”就可以了&#xff0c;直到Finished&#xff09;&#x…...

cudnn8编译caffe过程(保姆级图文全过程,涵盖各种报错及解决办法)

众所周知,caffe是个较老的框架,而且只支持到cudnn7,但是笔者在复现ds-slam过程中又必须编译caffe,我的cuda版本是11.4,最低只支持到8.2.4,故没办法,只能编译了 在此记录过程、报错及解决办法如下; 首先安装依赖: sudo apt-get install git sudo apt-get install lib…...

Docker安装Nginx

前提&#xff1a;Docker已安装好&#xff0c;本人使用的为自带docker的云服务器&#xff0c;docker常用命令已掌握&#xff0c;yjj为在根目录创建的一个文件夹&#xff0c;可自行修改对应的目录。 1、安装镜像&#xff0c;可去dockerhub上面找&#xff0c;一般都是组件名称。do…...

大数据治理:构建新时代数据生态的关键

摘要 随着信息技术的飞速发展和数字化浪潮的席卷,大数据已成为当今社会的核心资源。如何有效治理大数据,不仅关系到数据资源的利用效率,还对隐私保护、网络安全和社会秩序产生深远影响。本文深入探讨了大数据治理的概念、面临的挑战以及治理框架的构建,从技术、法律和伦理等…...

Leetcode 1223 LCA of Deepest TreeNode

题意&#xff0c;找到所有最深的叶子节点的LCA https://leetcode.com/problems/lowest-common-ancestor-of-deepest-leaves/description/ 第一个想法是模块的想法, LCA 找到所有最深的叶子节点两两组合 可行&#xff0c;但是算法复杂度很高而且你先要从顶到下&#xff0c;再从…...

C++从入门到起飞之——红黑树 全方位剖析!

&#x1f308;个人主页&#xff1a;秋风起&#xff0c;再归来~&#x1f525;系列专栏&#xff1a;C从入门到起飞 &#x1f516;克心守己&#xff0c;律己则安 目录 1. 红⿊树的概念 2. 红⿊树的实现 2.1 构建整体框架 2.2 红黑树的插入 2.3 红黑树的验证 2.4 红黑树…...

Java基于SSM微信小程序物流仓库管理系统设计与实现(lw+数据库+讲解等)

选题背景 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个…...

[LeetCode] 733. 图像渲染

题目描述&#xff1a; 有一幅以 m x n 的二维整数数组表示的图画 image &#xff0c;其中 image[i][j] 表示该图画的像素值大小。你也被给予三个整数 sr , sc 和 color 。你应该从像素 image[sr][sc] 开始对图像进行上色 填充 。 为了完成 上色工作&#xff1a; 从初始像素…...

智能EDA小白从0开始 —— DAY23 PyAether深度解析与技术展望

引言&#xff1a;技术革新与行业需求的碰撞 在半导体行业快速发展的今天&#xff0c;芯片设计的复杂性和对效率的要求日益提升。传统的芯片设计工具和方法已经难以满足当前行业的需求&#xff0c;特别是在面对大规模、高性能芯片的设计时&#xff0c;设计师们面临着前所未有的…...

从深海探测到海洋强国:数字孪生助力海洋装备跨越式发展

海洋广袤无垠&#xff0c;蕴藏着丰富的资源。近现代以来&#xff0c;人类使用各种手段探索海洋探索&#xff0c;广袤无垠的海洋与人类的生活越来越紧密&#xff0c;至少10亿人口摄入的蛋白质来自海洋&#xff0c;全球超过90%的货物、数据信息交流在海洋中转&#xff1b;海洋中丰…...

架构师备考-背诵精华(系统质量属性)

系统质量属性 根据GB/T 16260.1 定义&#xff0c;从管理角度对软件系统质量进行度量&#xff0c;可将影响软件质量的主要因素划分为6种维度特性包括&#xff1a;功能性、可靠性、易用性、效率、维护性、可移植性 功能性 适合性、准确性、互操作性、依从性、安全性 可靠性 容错…...

Pycharm下载安装教程(详细步骤)+汉化设置教程

今天讲解的是Pycharm安装教程和配置汉化设置&#xff0c;希望能够帮助到大家。 创作不易&#xff0c;还请各位同学三连点赞&#xff01;&#xff01;收藏&#xff01;&#xff01;转发&#xff01;&#xff01;&#xff01; 对于刚入门学习Python还找不到方向的小伙伴可以试试…...

网络安全入门

网络安全入门是指学习和了解网络安全基础知识和技术的入门阶段。网络安全是指保护计算机系统、网络和数据免受未经授权的访问、使用、泄露、破坏以及其他威胁的技术和措施。 要入门网络安全&#xff0c;可以按照以下步骤进行&#xff1a; 了解网络安全基本概念&#xff1a;学习…...

你真的了解Canvas吗--解密十【ZRender篇】

目录 👊🏻入口 动画讲解二 Animator Element Transformable graphic 总结 书接上篇你真的了解Canvas吗--解密九【ZRender篇】由于一个bug的篇幅需要续写这个下篇,不过那块的bug内容对我们这篇要讲的动画也是息息相关的,因为Transformable这个类主要就是和变换相…...

mac安装brew时踩坑解决方案

安装包 mac上如果按照git等工具可能会使用brew&#xff0c;例如使用&#xff1a;$ brew install git命令&#xff0c;如果电脑没有按照brew&#xff0c;则会提示&#xff1a;zsh: command not found: brew 解决方案 需要我们打开brew的官网https://brew.sh/&#xff0c;复制…...

基于Handsontable.js + Excel.js实现表格预览和导出功能(公式渲染)

本文记录在html中基于Handsontable.js Excel.js实现表格预览、导出、带公式单元格渲染功能&#xff0c;在这里我们在html中实现&#xff0c;当然也可以在vue、react等框架中使用npm下载导入依赖文件。 Handsontable官方文档 一、开发前的准备引入相关依赖库 <!DOCTYPE ht…...

重学SpringBoot3-集成Redis(十三)之点排行榜实现

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-集成Redis&#xff08;十三&#xff09;之点排行榜实现 1. 为什么选择 Redis 来实现排行榜&#xff1f;2. 项目环境准备2.1. 添加依赖2.2. 配置 Redis 连…...

Java 中方法参数传递的陷阱

前言 在编程过程中&#xff0c;我们经常会遇到一些看似简单却容易出错的问题。本文将通过一个具体的例子&#xff0c;探讨 Java 中方法参数传递的陷阱&#xff0c;并提供详细的解决方法。希望这篇文章能帮助你在未来的开发中避免类似的错误。 问题背景 假设我们的任务是计算…...

哪家云电脑便宜又好用?ToDesk云电脑、顺网云、达龙云全方位评测

陈老老老板&#x1f934; &#x1f9d9;‍♂️本文专栏&#xff1a;生活&#xff08;主要讲一下自己生活相关的内容&#xff09;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f9d9;‍♂️本文简述&#xff1a;讲一下市面上云电脑的对比。 &#x1f9d9;‍♂️上一篇文…...

【汇编语言】寄存器(内存访问)(三)—— 字的传送

文章目录 前言1. 字的传送2. 问题一3. 问题一的分析与解答4. 问题二5. 问题二的分析与解答结语 前言 &#x1f4cc; 汇编语言是很多相关课程&#xff08;如数据结构、操作系统、微机原理&#xff09;的重要基础。但仅仅从课程的角度出发就太片面了&#xff0c;其实学习汇编语言…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...