Vue3 | VueCli、node.js安装、nrm切换镜像源、vue项目结构解读、Router详解、VueX详解...

凌川江雪

已于 2022-09-10 22:33:40 修改

阅读量1.2k

点赞数 1

文章标签： vue java react python html

于 2021-09-12 20:55:42 首次发布

本文链接：https://blog.csdn.net/aaLiweipeng/article/details/120263311

版权

本文详述了Vue3的安装过程，包括使用nrm切换镜像源，安装Vue脚手架VueCli，并介绍了如何创建和运行Vue项目。此外，还深入探讨了Vue-Router的基本用法和VueX的状态管理，包括路由懒加载和VueX的数据修改流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整原文地址见简书

更多完整Vue笔记目录敬请见《前端 Web 笔记汇总目录(Updating)》

本文内容提要

VueCli部分

首先需要安装nodejs

安装完node会自动配套npm

使用npm install nrm -g用于调整镜像源，方便后续下载依赖

这边使用淘宝镜像

npm uninstall vue-cli -g 检查并清除多余的旧版本

使用npm install -g @vue/cli[@版本号]安装脚手架

使用脚手架 Vue Cli，从创建项目到运行项目的过程

退出之后，把刚刚创建的项目拉进VSCode，使用VSCode启动项目

初始项目结构解读

源代码在src下，main.js是入口

App.vue文件简读

关于HelloWorld.vue文件

单文件组件的含义

基于工程实现TODOList案例 --- 单组件版[App.vue]

基于工程实现TODOList案例 --- 父子组件版[App.vue、ListItem.vue]

Vue-Router部分

在代码中使用Router

Router的作用及简述

首先看一下App.vue根组件怎么写

解析一下这个多出来的 router/index.js 文件

view目录下的文件

例程，拓展一个Router页面

补充：Router路由懒加载语法糖简述与例程实战

VueX部分

首先需要创建项目

--- 特性配置：

package.json文件

VueX简述

VueX 框架的引入、数据的定义以及在组件中的使用

在Home.vue中使用这个 VueX提供的全局数据字段：

如何在任一组件中修改 VueX的数据

VueX的异步操作同步操作

带参数地修改VueX数据

VueX修改数据流程设计的理解

安装、使用axios发送ajax请求

把上例的axios请求封装到 actions中

VueCli部分

首先需要安装nodejs

参考博客：
--- Install Node.js
--- Node.js 安装配置

安装完node会自动配套npm

使用npm install nrm -g用于调整镜像源，方便后续下载依赖

安装完了注意，
如C:\Users\凌川江雪\AppData\Roaming\npm\nrm -> C:\Users\凌川江雪\AppData\Roaming\npm\node_modules\nrm\cli.js乃是依赖的安装代码路径；

nrm ls可以切换镜像源：

其他命令如图，安装后自然可以看到；

安装后使用时，你可能遇到这个问题：

D:\OK\nodejsOther>nrm ls
internal/validators.js:124
   throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
   ^

[TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type >string. Received undefined
 at validateString (internal/validators.js:124:11)
 at Object.join (path.js:375:7)
 at Object.<anonymous> (C:\Users\凌川江雪>\AppData\Roaming\npm\node_modules\nrm\cli.js:17:20)
 at Module._compile (internal/modules/cjs/loader.js:1063:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
 at Module.load (internal/modules/cjs/loader.js:928:32)
 at Function.Module._load (internal/modules/cjs/loader.js:769:14)
 at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
 at internal/main/run_main_module.js:17:47
] {
 code: 'ERR_INVALID_ARG_TYPE'
}

解决方案参考——nrm报错 [ERR_INVALID_ARG_TYPE] 解决方法

这边使用淘宝镜像