• 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:[]

    表格:

    1. <table>
    2. <tr v-for="(item, index) in alist">
    3. <td>{{item.title}}</td><td>{{item.content}}</td><td><button>编辑</button><button>删除</button></td>
    4. </tr>
    5. </table>


    数组和单一对象的区别:

    数组:

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

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

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

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

    使用数组适合处理多个具有相同结构的对象的情况,通常配合 v-for 循环使用。
    使用单一对象适用于处理单个实体的情况,可以直接引用其属性。

    安装axios组件

    npm install axios

    安装element组件

    npm install element-plus --save

  • 相关阅读:
    前端知识3-JavaScript
    电脑锁屏设置的方法,直接在系统设置里完成
    springboot 集成webSocket
    Go语言实现分布式缓存(二) —— 单机并发缓存
    图论(算法竞赛、蓝桥杯)--Dijkstra算法最短路
    国产大模型新标杆!比肩GPT4,DeepSeek V2重磅升级
    YOLO V1学习总结
    技术干货|如何使用昇思MindSpore自定义优化器
    CSS 中背景background和img的区别和使用时机
    Android 13.0 自定义仿小米全面屏手势导航左右手势滑动返回UI效果
  • 原文地址:https://blog.csdn.net/weixin_41422954/article/details/140295334