安装环境
相关参考【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 配置文件

使用 vite 创建 Vue3 项目
1、创建vue3项目,命令:vue create vue3_test_vite
2、进入项目目录
命令:cd vue3_test_vite
3、安装依赖
命令:npm install
4、运行
命令:npm run dev
5、使用浏览器打开地址http://localhost:3000,进行访问
6、项目目录
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
2018-01-01 【Game】2048小游戏