从零开始创建一个vue项目

一.下载Node.js

教学网址指路：nodejs详细安装步骤（保姆级教程）_nodejs安装详细教程-CSDN博客

二.下载MYSQL

教学网址指路：Mysql超详细安装配置教程(保姆级)_mysql安装及配置超详细教程-CSDN博客

三.安装vue脚手架

这里我安装的是vue3

全局安装@vlue/cli脚手架的代码：npm install @vue/cli@3.10  –g

如果出现如下报错

npm error code ETIMEDOUT
npm error errno ETIMEDOUT
npm error network request to https://registry.npmjs.org/@vue%2fcli failed, reason:
npm error network This is a problem related to network connectivity.
npm error network In most cases you are behind a proxy or have bad network settings.
npm error network
npm error network If you are behind a proxy, please make sure that the
npm error network 'proxy' config is set properly.  See: 'npm help config'

npm error A complete log of this run can be found in: D:\Node.js\node_cache\_logs\2024-09-03T14_19_06_376Z-debug-0.log

可能是设置的镜像错误或者镜像过期了，可以试试根据最新的镜像重新配置：

1.清空缓存

npm cache clean --force

2.配置新的镜像

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

3.确认当前镜像

npm config get registry

4.再次安装vue脚手架

npm install @vue/cli@3.10  –g

5.检查是否安装成功

vue --version

出现版本号即为安装成功

四.创建vue新项目

1.新建一个文件夹，在该文件夹的根目录上进入命令行工具

2.使用vue create命令创建项目，该命名会自动生成项目所需的文件、目录、配置和依赖

3.选择默认创建方式

4.项目创建成功后，执行如下两项命名，进入项目目录，启动项目

cd helloworld
npm run serve

5.复制程序输出的网址并粘贴到网页上打开，即可看见新创建的vue前端网页

想要对该网页进行更改、加工、美化和功能补充等操作可以使用HBuilder X软件