Vue3.0项目的创建

已于 2022-07-17 20:48:47 修改
阅读量2.4k 收藏 22
点赞数 4
分类专栏： Vue3.0 文章标签： vue3.0
于 2022-04-15 17:28:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43630831/article/details/124197027
版权

文章目录

Vue3.0项目的创建

一、前期环境准备

1.安装Node.js

https://nodejs.org/en/download/

在这里插入图片描述
查看node的安装版本：

node -v

在这里插入图片描述

2.安装Vue-cli

搭建Vue3.0的项目，必须依赖Vue-cli3.0或以上的版本。
①如果之前安装过Vue2.0版本，就需要把Vue2.0相关安装文件先进行卸载

npm uninstall vue-cli -g

②如果之前没有安装过Vue2.0，直接执行以下命令（参数-g表示全局安装；@vue/cli表示安装Vue-cli的最新版本）

npm install -g @vue/cli

③查看Vue-cli的版本

vue -V

在这里插入图片描述

二、项目创建步骤

1.新建一个用于存放Vue3.0项目的文件夹

D:\Java\webstorm workspace

在这里插入图片描述
需要在此目录下执行相关命令：
在这里插入图片描述

2.进入Vue3.0项目的创建向导

vue create 项目名称

在这里插入图片描述

①询问用户选择项目是以什么模板方式进行安装，模板方式如下

在这里插入图片描述
Default：默认的预设配置，会快速创建一个Vue2.0项目。
Default（Vue 3 Preview）：会快速创建一个Vue3.0项目。
Manually select features：手动进行项目配置创建，可以根据项目的需要选择合适的选项，具备更多的选择性（推荐）。
在这里插入图片描述
在这里插入图片描述

②可以根据项目需要选择添加的配置项（上下箭头切换，空格键进行选中/反选）

在这里插入图片描述
在这里插入图片描述

③选择Vue3.x并按下Enter键

在这里插入图片描述

④询问是否使用history路由模式（不推荐使用，输入n，并按Enter）

在这里插入图片描述

⑤选择一种CSS预处理器（推荐选择：Sass/SCSS（with dart-sass））

在这里插入图片描述

⑥选择一种代码格式化检测工具（推荐选择：ESLint + Standard config）

在这里插入图片描述

⑦选择代码检查方式（推荐选择：Lint on save 保存时检查）

在这里插入图片描述

⑧相关配置文件如何存放（推荐选择：In dedicated config files 放到单独的配置文件中）

在这里插入图片描述

⑨是否需要保存当前配置（y保存），为以后生成新项目时进行快速构建（n不保存）

在这里插入图片描述

⑩成功创建，开始启动项目

在这里插入图片描述
cd 到项目目录中，执行以下命令：

npm run serve

在这里插入图片描述
在这里插入图片描述

3.访问项目主页（http://localhost:8080）

在这里插入图片描述

4.项目结构

在这里插入图片描述

总结

每天一个提升小技巧！！！

小辰哥哥
关注
  • 4
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
如何使用vite创建vue3.0项目
我的博客
12-12 330
一、首先系统需要有node环境。
使用vue3.0 创建项目
12-16
项目创建完成后，进入项目目录： ```bash cd exceltochart ``` 然后启动开发服务器，你可以运行 `npm run serve` 来预览项目。这将启动一个热重载的本地开发服务器，任何代码更改都会自动刷新页面。 在项目配置中...
从零开始vue3.0项目创建
cuhebcj的博客
02-28 1207
从零开始创建一个Vue3.0项目
Vue 3.0 新手入门指南
m0_58467921的博客
06-24 1315
【代码】Vue 3.0 新手入门指南。
创建 VUE3.0 项目
weixin_46243213的博客
07-27 1576
创建vue3.0项目
vue3.0项目创建
浩星
03-01 759
前言： 用vue的最新脚手架来搭建vue3.0的正式项目 目录： 步骤： 1、安装最新的脚手架，如果有可以不看这步了(***这里使用cnpm) 检查：vue -V 出现下面的就代表成功了 2、在你想建项目的地方打开PowerShell/小黑框，输入vue + create + 你的项目名 ，然后回车 vue create newject 3、然后会出现下面的选择，这里选择自定义的，最后一个，然后回车 4、选择配置，上下键移动，空格选择，回车下一步 5、选择vue的版本...
vue3.0 项目创建
qq_38552198的博客
08-06 164
1.环境搭建 用git工具 git clonevue-next 命令行 运行yarn或npm i 2.检测vue/cli 是否最新， 更新vue/cli cnpm i -g @vue/cli to update 3.创建项目 ，vue3demo为项目名，可自定义 。或者运行vue ui，会打开界面根据需要选择插件安装 vue create vue3demo 4.添加vue next vue add vue-next 此时依赖为最新 建成目录 ...
Vue3.0-创建Vue3.0项目
qq_45722267的博客
06-16 2314
vue3.0创建项目，vue3.0常用指令，创建工程：Npm init vue@latest，安装 Element Plus：npm install element-plus --save，安装axios：npm install axios
【Vue】3.0 项目创建 自定义配置
weixin_52418790的博客
04-21 8218
1、进入项目路径 2、创建vue3项目 vue create +项目名称 注意：项目名称要避开特殊名字如echarts、vue等 3、项目配置 等待后弹出选项窗口，询问用户以什么模板方式进行安装 Default ([Vue 3] babel, eslint)：默认预设配置，会快速创建一个Vue2.0项目，提供了babel和eslint支持 Default ([Vue 2] babel, eslint)：默认预设配置，会快速创建一个Vue3.0项目，提供了babel和eslint支持 Manu
vue3.0创建自定义项目
weixin_42883164的博客
01-29 144
vue3创建项目
新建vue3.0 项目—步骤
L_15737525552的博客
10-21 1488
6、ESLint：提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多 —— 我选 ESLint + Prettier。2、自定义配置，根据你需要用箭头上下键选择（按 “空格键”选择/取消选择，A键全选/取消全选，I键进行反选）对应功能。3、我没有卸载旧版本的 vue-cli(1.x 或 2.x)，所以创建时需要选择2.0 还是 3.0。5、css预处理器（主要为css解决浏览器兼容、简化CSS代码 等问题） —— 我选 Less。2、安装vue-cli3.0。
配置一个vue3.0项目的完整步骤
11-28
Vue 3.0 项目配置是一个前端开发者的基本技能，它涉及到多个步骤和技术栈。下面将详细解释如何配置一个基于 Vue 3.0 的图书管理项目。 1. **初始化项目** - 全局安装 `vue-cli`：Vue CLI 是 Vue 官方提供的脚手架...
vue3.0项目安装.docx
05-06
"Vue 3.0 项目安装指南" Vue 3.0 是一款流行的前端框架， ElementPlus 是一款基于 Vue 3.0 的 UI 组件库。本文将指导初学者如何从零开始安装 Vue 3.0 项目，并集成 ElementPlus 组件库。 Step 1: 下载 Node.js 在...
vue3.0pdf在线预览
02-25
在Vue3.0项目中，我们可以使用Vue的插件系统来封装PDF.js，创建一个自定义的Vue组件，比如`PdfViewer`。 在`PdfViewer`组件中，我们需要处理以下几个关键步骤： 1. 加载PDF文件：通过fetch或axios获取PDF二进制数据...
vue3.0搭建项目文档
10-31
本文将详细介绍如何使用Vue CLI 3（Vue的命令行工具）来搭建Vue3.0项目。 首先，Vue CLI 3是Vue.js官方提供的一个用于快速初始化项目的工具，它简化了项目的配置和搭建过程。在开始之前，确保你已经掌握了基本的...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
最新发布
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
webstorm创建vue3.0项目
08-17
要在WebStorm中创建Vue 3.0项目，可以按照以下步骤进行操作： 1. 打开WebStorm，并选择"Create New Project"（创建新项目）。 2. 在弹出的窗口中，选择"Vue.js"并点击"Create"（创建）按钮。 3. 在下一个窗口中，选择"Vue 3"版本，并为你的项目命名。 4. 选择项目的位置和存储路径，并点击"Create"（创建）按钮。 5. WebStorm将自动为你创建一个Vue 3.0项目的基本结构。 6. 在终端中，进入到你的项目目录，并运行以下命令来安装依赖项： ``` npm install ``` 7. 安装完成后，你可以使用以下命令来启动开发服务器： ``` npm run serve ``` 8. 打开浏览器，并访问指定的地址（通常是`http://localhost:8080`）来预览你的Vue 3.0应用程序。 现在，你已经成功在WebStorm中创建了一个Vue 3.0项目，并可以开始开发你的应用程序了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小辰哥哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值