前言

本来是打算结合vue3和spring boot出一期登录项目实战的，但是由于vue3没有我想象的简单，最后阉割了下，后面我们通过uniapp小程序出一期

一、安装环境创建vue3项目

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令 (不要带上 > 符号)：

npm init vue@latest

然后创建项目名，一直回车nononono即可，如下所示

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesScaffolding project in ./<your-project-name>...
Done.

具体操作
桌面新建文件夹用于存放你创建的项目

打开cmd，定位到你的文件夹

C:\Users\MAC>cd C:\Users\MAC\Desktop\vue-projectC:\Users\MAC\Desktop\vue-project>

然后执行

npm init vue@latest

一直回车即可

创建后我们查看下

我们run一下

npm run dev

报错？

小问题别慌，因为路径错了
cd一下新的路径，因为刚刚创了两个文件夹
执行

npm install

npm run dev

打开浏览器

vue3安装成功

二、编写代码

我们修改一下欢迎界面为hello word
观察下前端

好的没的毛病

现在进行打包

cnpm run build

打包后的文件在项目的dist目录下

双击index.html看看，一片空白

是因为配有配置到nginx 或者是apache

放到宝塔上或者有nginx、apache的环境即可打开

【Vue3】搭建vue3项目以及环境相关推荐

electron 项目第一篇 vite +vue3 搭建electron项目
vite + vue3 搭建 electron 项目 1 使用 vite 创建 vue3 项目 2 安装 electron 依赖 3 嵌入 electron 3.1 创建 electron 目录 3. ...
Linux上搭建SpringBoot项目部署环境和流程分享
Linux上搭建SpringBoot项目部署环境和流程分享背景介绍环境搭建 1.JDK 2.Mysql 数据库 3.Redis 4.Nginx 项目部署总结背景介绍最近在开发一个 Sprin ...
PhpStorm 与 Linux 搭建PHP项目运行环境
一.安装PHPstorm集成开发环境具体安装步骤,请移步度年参考安装过程,本文着重介绍PHPstorm IDE与 Linux连接,进行项目代码运行. 二.连接前的准备环境要求:1) linux(U ...
webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
第2章搭建CRM项目开发环境（数据库设计）
2.1CRM数据库设计 2.1.1数据库设计原则我们可以结合项目原型来考虑数据库设计,市场活动,用户,这些都是需要是持久化的,所以都需要设计成表.表和表之间通常还会有一定的关系.看每一个创建表单上都 ...
idea strus html项目创建,搭建struts2 项目开发环境——(使用Intellij IDEA+Maven+struts2 )...
一.Struts介绍 Struts是Apache软件基金会(ASF)赞助的一个开源项目.它最初是jakarta项目中的一个子项目,并在2004年3月成为ASF的顶级项目.它通过采用JavaServle ...
第2章搭建CRM项目开发环境（搭建开发环境）
2.2搭建开发环境 2.2.1创建crm项目使用IDEA创建Empty Project,作为项目的工作空间 2.2.2创建crm模块创建maven类型的模块,作为开发工程 2.2.3为项目添加me ...
Jenkins高级篇之Pipeline技巧篇-1-小白搭建Pipeline项目开发环境
之前,有人和我说,pipeline教程这里,关于如何创建pipeline的git项目和,如何在jenkins上做pipeline的测试这块,在前面文章交代不清楚.这里我补上一篇,通过这一篇,小白也能开 ...
MyEclipse搭建java Web项目开发环境
MyEclipse搭建java Web项目开发环境首先,在开始搭建MyEclipse的开发环境之前,还有三步工具的安装需要完成,只要在安装配置成功之后才可以进入下面的java Web项目开发环境的搭 ...
java web开发myeclipse_【java项目实战】一步步教你使用MyEclipse搭建java Web项目开发环境（一）...
首先,在开始搭建MyEclipse的开发环境之前,还有三步工具的安装需要完成,只要在安装配置成功之后才可以进入下面的java Web项目开发环境的搭建. 1.安装工具第一步,下载并安装JDK,到官网 ...

【Vue3】搭建vue3项目以及环境

前言

一、安装环境创建vue3项目

二、编写代码

【Vue3】搭建vue3项目以及环境相关推荐

最新文章

热门文章