【Vue】Vue3 项目搭建（五） - H__D

H__D

【Vue】Vue3 项目搭建（五）

安装环境

　　相关参考【Vue】Vue2 项目搭建（二） - H__D - 博客园

　　1、安装Nodejs环境，参考【Node.js】安装及使用，或者使用nvm工具安装，node版本：v20.16.0

　　2、安装vue脚手架，【Vue】Vue2 项目搭建（二） - H__D - 博客园，版本：@vue/cli 5.0.8

使用 vue-cli 创建 Vue3 项目

　　1、创建vue3项目，命令：vue create vue3_test

　　　　选择vue3模板

　　注意：出现Successfully 表示创建成功

　　2、进入项目目录

　　　　命令：cd vue3_test

　　3、运行

　　　　命令：npm run serve

　　4、使用浏览器打开地址http://localhost:8080，进行访问

　　5、生成静态文件(生成静态文件，打开dist文件夹下新生成的index.html文件，可以将dist文件打包放到服务器上去访问)

　　　　命令：npm run build

Vue项目目录描述

vue_test/
|-- node_modules : 依赖包文件夹
    |-- (各种依赖包)
|-- public : 静态资源文件夹，不经过 webpack 处理
    |-- favicon.ico : 网站图标
    |-- index.html : 主 HTML 文件，应用的模板
|-- src : 源码文件夹
    |-- assets : 资源文件夹，存放需要经过 webpack 处理的静态资源
        |-- logo.png : Vue logo 图片（示例）
    |-- components : Vue 组件及其相关资源文件夹
        |-- HelloWorld.vue : 示例组件
    |-- App.vue : 应用根主组件
    |-- main.js : 应用的入口文件，用于创建 Vue 实例并挂载到 DOM
|-- .gitignore : Git 版本控制忽略文件配置
|-- babel.config.js : Babel 配置文件，用于 JavaScript 转译
|-- jsconfig.json : JavaScript 项目配置文件
|-- package-lock.json : 依赖版本锁定文件
|-- package.json : 项目配置文件，包含项目元数据、依赖和脚本命令
|-- README.md : 项目说明文档
|-- vue.config.js : Vue CLI 配置文件