NPM入门笔记

本文介绍了NPM的基本概念及如何通过NPM安装和管理软件包。内容涵盖NPM的安装过程、使用命令行进行操作的方法,以及如何利用国内镜像加速安装。此外,还提供了几个实践案例。

参考资料

NPM是啥

  • 基于Nodejs运行

  • 软件模块管理工具(软件包工具), 对应我这个Javaer来说,有点类似于Maven

  • 现在普遍用于web前端项目的管理, 主要是各种依赖库的管理

  • 命令行形式运行

安装

安装Node

  • https://nodejs.org/en/download/

  • 速度非常快,完全不像国外的网站

  • windows, linux, 32/65bit, 各个版本齐全

  • 验证成功:
    node --version

  • Node命令的语法跟通常有点不同, 首先,参数都是加两个-的, 其次, 命令以.开头,比如:

$ node
> console.log('Node is running');
Node is running
> .help
.break Sometimes you get stuck, this gets you out
.clear Alias for .break
.exit  Exit the repl
.help  Show repl options
.load  Load JS from a file into the REPL session
.save  Save all evaluated commands in this REPL session to a file> .exit

安装NPM

  • Node装完以后, npm连带着就装上了, 可以直接验证
    $ npm --version

安装软件包

教程里关于默认位置和参数的修改,就直接跳过了, 先尝试使用

  • 先尝试简单的安装
    npm install uglify-js --global

  • 发现默认源安装好慢,简直无法容忍,还是换一个吧,淘宝有国内镜像:
    https://npm.taobao.org/
    安装方式:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    以后就使用cnpm来代替npm了

  • 再次尝试原来的命令
    cnpm install uglify-js --global
    迅速完成

  • 本地安装: npm最好的地方在于, 缺省情况下(不带--global参数), 是安装到本地文件夹的.
    npm install underscore

  • 查看本地安装包: npm list

  • 发现cnpm不是万能的, 刚才的underscore就,没有, 拿Vue来练手倒是成功了
    npm install vue

### Vue3 快速入门教程与学习笔记 #### 一、Vue3 的核心特性概述 Vue3 是基于现代 JavaScript 特性的框架版本,它引入了许多新特性和改进。这些变化使得开发者能够更高效地构建复杂的单页应用 (SPA)[^2]。 以下是几个主要的新特性: - **Composition API**: 提供了一种新的方式来组织和重用逻辑代码。 - **Teleport**: 可以将子组件的内容渲染到 DOM 中的其他位置。 - **Fragments**: 支持组件返回多个根节点。 - **更好的性能优化**: 使用 Proxy 替代 Object.defineProperty 实现响应式数据结构[^1]。 #### 二、Vue3 组件通信的变化 相比于 Vue2,Vue3 对组件间的交互进行了调整。具体如下: - 移除了 `$listeners` 和 `$children` 属性,将其功能合并至 `$attrs` 或通过 `provide/inject` 来实现父子组件间的数据传递。 - Vuex 被 Pinia 所取代,后者提供了更加简洁灵活的状态管理模式。 - `.sync` 修改器已被废弃,推荐直接使用 `v-model` 完成双向绑定操作[^3]。 #### 三、项目初始化配置流程 为了快速搭建一个基于 Vue3 的开发环境,通常会借助官方提供的 CLI 工具完成项目的创建过程: 安装最新版 Vue CLI 并生成模板工程: ```bash npm install -g @vue/cli vue create my-vue3-project ``` 随后,在新建好的目录中添加必要的依赖库,比如 Axios 用于 HTTP 请求处理;Vue Router 控制页面导航路径切换;Pinia 处理全局共享变量存储等功能模块[^4]。 最后修改入口文件 main.js 如下所示: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; // 导入路由实例对象 import pinia from './store'; // 如果有状态管理则导入 store 文件夹下的 index.js const app = createApp(App); app.use(router).use(pinia); // 注册插件服务 app.mount('#app'); // 将虚拟DOM挂载到真实HTML容器上 ``` #### 四、生命周期钩子函数更新说明 虽然大部分原有的生命周期方法仍然保留下来,但是它们的名字有所改变以便更好地反映其执行时机点。例如 beforeDestroy 更名为 beforeUnmount 等等[^2]。 | Vue2 阶段名称 | Vue3 新命名 | |----------------------|-----------------------| | beforeCreate | setup() | | created | | | beforeMount | onBeforeMount | | mounted | onMounted | 以上表格列出了部分重要的映射关系对比表。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值