VUE第一步--项目的创建

一、背景介绍

最近没有太多的学习任务，遂找了套vue的视频课程，打算系统学习一下前端的vue技术，按照习惯，会把遇到的问题和解决办法记录下来，形成学习笔记，以备后来翻阅和方便分享。

二、环境准备

• 开发工具–visual studio code
• 开发环境–按照官网指示，安装了npm环境，点击查看官方[安装文档]，安装后环境验证如下。
  
• 必要的html、css、jQuery等知识（这个自不必多说）

三、第一个项目的创建

这里直接访问vue的官网即可，因为vue的框架是为中国同事写的，读起来自然不费什么力气。官网导航：https://cn.vuejs.org/。

3.1 项目创建

• 遇到的第一个问题
  当我根据官网文档，在命令窗口中使用：npm create vue@latest，

PS D:\frontend programs\my_vue_class> npm create vue@latest

出现了如下问题：

PS D:\frontend programs\my_vue_class> npm create vue@latest
npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/create-vue failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network 
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

根据错误信息，可以知道是创建项目时，仓库资源访问不到引起的。查看npm的配置命令如下：npm config list

PS D:\frontend programs\my_vue_class> npm config list
; "builtin" config from D:\Program Files\nodejs\node_modules\npm\npmrc

prefix = "C:\\Users\\12487\\AppData\\Roaming\\npm"

; "user" config from C:\Users\12487\.npmrc

registry = "https://registry.npm.taobao.org"

; node bin location = D:\Program Files\nodejs\node.exe
; node version = v20.12.2
; npm local prefix = D:\frontend programs\my_vue_class
; npm version = 10.5.0
; cwd = D:\frontend programs\my_vue_class
; HOME = C:\Users\12487
; Run `npm config ls -l` to show all defaults.

解决方法：修改npm的仓库配置，找一个可用的仓库镜像地址，操作如下：

npm config set registry https://registry.npmmirror.com

• 修改完成后，再次在命令窗口中执行：npm create vue@latest命令：
  
• 第一个vue项目创建完成
  效果演示：