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

#完整原文地址见简书 #更多完整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](https://www.jianshu.com/p/7db6d8e09128)** --- **[Node.js 安装配置](https://www.runoob.com/nodejs/nodejs-install-setup.html)**
####安装完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] 解决方法

####这边使用淘宝镜像 
####`npm uninstall vue-cli -g` 检查并清除 多余的旧版本 
####使用`npm install -g @vue/cli[@版本号]`安装 脚手架 

脚手架沉淀了许多最佳实践， 可以借助它快速生成Vue工程，包括 项目目录组织、webpack打包配置等；

####使用 脚手架 Vue Cli，从 创建项目 到 运行项目 的过程 **命令：`vue create [项目名]` 如`vue create demo-pro`； 运行创建命令之后，工具会询问创建方式：这里先选第三个，手动选择创建项目需要的特性， 接着，进入选择特性界面：用空格进行选择，回车进行确定， 这里选择以上三个特性即可，然后回车：选择3.x的Vue版本，回车，选择使用ESLint的方式：这里选择第一个，出错的时候才会触发； 回车确定；
这里是选择Lint的校验时机——保存时校验还是commit时校验， 这里先选择第一个，回车确定；
这里是选择要把`config文件`，放一个`单独的文件`里，还是放一个`package.json`里， 这里先选第一个；
最后问，刚刚这一套特性的选择需不需要保存下来方便后续使用，这里不保存； 回车后工程开始创建： 工程创建完成：进入工程目录， 使用`npm run serve`启动工程：启动中：启动成功，开始运行：使用浏览器访问：cmd处`ctrl + c`两次可以终止运行：**
####退出之后，把刚刚创建的项目拉进VSCode，使用VSCode启动项目 **因为我们无需每次都用`cmd`去启动项目； 把刚刚创建的项目拉进VSCode，准备使用VSCode启动项目：在VS Code中，使用Terminal栏启动即可，方便快捷！ 【刚拉进来可能启动不了，报9009之类的错， 这时候重启一下VSCode就是了； 如果项目中没有`node_modules`， 则需先运行`npm install`安装`node_modules`依赖！！】运行成功：**
####初始项目结构解读 >**注意要在VS code中安装`vetur`这个插件， 使得VS可以提供 语法高亮、提示 等效果：**

#####源代码在src下，main.js是入口 --- import { createApp } from 'vue' 指明createApp的来源； --- import App from './App.vue' 指明App实例，来自于当前文件夹下的 App.vue文件； --- createApp(App).mount('#app')则 创建实例、挂载实例：

##### `App.vue`文件 简读 **---