Vue3学习记录

创建项目的方式1:

npm init vite@latest

在使用npm命令行工具时,@latest标签用于指定包的最新稳定版本。当你在npm命令中看到@latest,这表示你正在引用NPM仓库中的最新版本。

在具体场景npm init vite@latest中,vite是包的名字,而@latest是版本范围指示符。当你执行这个命令,npm会查找vite包的最新稳定版,并根据找到的版本来初始化你的项目。如果没有指定任何版本或版本范围,npm也会默认使用@latest。

因此,npm init vite@latest将会创建一个使用Vite最新稳定版本的新项目。这样可以确保你使用的是该包的最新功能和修复过的bug,但同时你也要接受可能带来的API变化或不兼容性风险。

如果你希望指定一个确切的版本,你可以替换@latest为你想要的确切版本号,例如npm init vite@2.9.7。这样做可以避免未来无意中升级到有重大改变的新版本,从而保持项目的稳定性。

create-vite@5.3.0

运行后提示:

now run:

cd myfirstweb

npm install

npm run dev

创建项目的方式2:

npm create vue@latest

code.visualstudio.com/download

http://localhost:5173/

server:{

host:'0.0.0.0',

port:8088,

open:true

}

打包放到linux的nginx服务器上的命令:

npm run build

快速启动VSCode编辑器查看程序

cmd窗口下,进入程序目录

执行下面的命令

复制代码
code .

设置 Node.js 的全局安装前缀路径

npm config set prefix "d:\develop\nodejs"

"d:\develop\nodejs"这个是NodeJS的安装目录。

npm config set prefix 命令用于设置 Node.js 的全局安装前缀路径。当你使用 npm install -g 命令全局安装一个 npm 包时,这个包会被安装到由 prefix 配置项所指定的目录下。

这条命令会将全局模块的安装路径设置为 "d:\develop\nodejs"。这意味着以后所有的全局模块都会被安装到这个目录下。

为了确保全局模块能够被系统识别,你可能还需要将这个目录添加到系统的 PATH 环境变量中。这样,你就可以从命令行的任何地方调用全局安装的 npm 包所提供的命令了。

更换安装包的镜像源

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

检查是否更换成功?

npm config get registry

数组名后面要加 :

例如: arr:[]

表格:

复制代码
        <table>
        <tr v-for="(item, index) in alist">
            <td>{{item.title}}</td><td>{{item.content}}</td><td><button>编辑</button><button>删除</button></td>
        </tr>
      </table>

数组和单一对象的区别:

数组:

customer: [ { name: "张三", level: 3 } ]

访问数据 :你必须通过索引访问数组中的对象,例如 customer[0].namecustomer[0].level

当 customer 被定义为单一对象:customer: { name: "张三", level: 3 }

访问数据 :你可以直接访问对象的属性,如 customer.namecustomer.level

使用数组适合处理多个具有相同结构的对象的情况,通常配合 v-for 循环使用。

使用单一对象适用于处理单个实体的情况,可以直接引用其属性。

相关推荐
2501_94531849几秒前
零基础学习AI的选型指南:CAIE认证与编程型AI认证如何取舍
人工智能·学习
承渊政道5 分钟前
【优选算法】(实战推演模拟算法的蕴含深意)
数据结构·c++·笔记·学习·算法·leetcode·排序算法
Keep learning!19 分钟前
PCA主成分分析学习
学习·算法
浮白载笔的夜晚32 分钟前
【科普向】模拟电路(Analog Circuits)与射频电路(RF Circuits)的区别
学习
Yilena1 小时前
带你轻松学习LangChain4j
java·学习·langchain
是翔仔呐2 小时前
第13章 SPI通信协议全解:底层时序、4种工作模式与W25Qxx Flash芯片读写实战
c语言·开发语言·stm32·单片机·嵌入式硬件·学习·gitee
abigale032 小时前
从零实现 AI 聊天助手:可直接复用的前端核心方案
chatgpt·vue·流式输出
是翔仔呐2 小时前
第14章 CAN总线通信全解:底层原理、帧结构与双机CAN通信实战
c语言·开发语言·stm32·单片机·嵌入式硬件·学习·gitee
Yilena3 小时前
一文讲透 Agent 应用中的记忆工程
人工智能·学习
再玩一会儿看代码3 小时前
Java中 next() 和 nextLine() 有什么区别?一篇文章彻底搞懂
java·开发语言·经验分享·笔记·学习