创建vue3的项目

最新推荐文章于 2024-06-21 15:00:22 发布
最新推荐文章于 2024-06-21 15:00:22 发布
阅读量451 收藏 7
点赞数 7
文章标签： vue vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51979055/article/details/135459825
版权
本文详细介绍了如何使用VueCLI3.x创建一个新的Vue3项目，包括安装依赖、配置选项（如Babel、TypeScript、PWA等）、选择VueRouter和Vuex，并介绍了如何在项目中引入ElementPlusUI。
摘要由CSDN通过智能技术生成

创建vue3的项目

1、检查是否已经安装了所需要的node.js和脚手架，没有就去安装；

在这里插入图片描述

2、使用webpack或者脚手架创建

2.1 cd 到想要创建的目录下
2.2 脚手架创建项目
（注意：Vue CLI 3.x 在创建项目时要求项目名称（即 vue create 命令后的参数）不能包含大写字母，）

 vue create vue-rwforum

2.3 选择创建的格式
在这里插入图片描述

2.4 手动选择特性

  • Babel: Babel 是一个 JavaScript 编译器，可以将新版本的 JavaScript 代码转换为旧版本的代码，以确保在各种环境中都能运行。这通常是必选项。

  • TypeScript: TypeScript 是 JavaScript 的超集，添加了静态类型检查等功能。选择这个选项如果你希望使用 TypeScript 编写你的 Vue 项目。

  • Progressive Web App (PWA) Support: 支持渐进式 Web 应用（PWA），使你的应用可以离线访问等。

  • Router: 集成 Vue Router，用于实现单页应用的路由。

Vuex: 集成 Vuex，用于状态管理。

  1. CSS Pre-processors: 集成 CSS 预处理器，例如 Sass 或 Less，以便更方便地编写样式。

  2. Linter / Formatter: 集成代码风格检查和格式化工具，例如 ESLint 和 Prettier。

  3. Unit Testing: 集成单元测试工具，例如 Jest。

  4. E2E Testing: 集成端到端测试工具，例如 Cypress。
    在这里插入图片描述

2.5 选择vue3.x，也可以一路enter

在这里插入图片描述

。。。等待下载

3、安装完成后运行这两行命令

在这里插入图片描述
。。。继续等待下载

4完成创建

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

引入element-plus ui

1、打开element-plus 官网，然后跟着 教程，我使用的是vscode

在这里插入图片描述

在这里插入图片描述
2、快速开始——完整引入elementplus
完整引入：
在这里插入图片描述

shiftcup
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli3创建项目时各个选项分别是什么意思？
小青柑的博客
05-25 1997
Choose Vue version 选择vue语法版本，默认选中 Babel 插件允许我们使用ES6模块化语法，默认选中 TypeScript js的升级版本，TS语法中增加了强类型定义 Progressive Web App (PWA) Support 如果项目是移动端，选择 Router 路由 vuex 状态管理 CSS Pre-processors 样式预处理：如果使用了SCSS 和 less 语法，勾选此选项 Linter / Formatter 代码格式语法检测 Unit Testing 测
全栈入门，前后端入门--springboot3+vue3制作一个后台管理项目
qq_61876792的博客
03-02 1965
全栈入门，前后端入门，项目完整流程开发，信息管理后台前后端一站式打通，增删改查，文件上传功能实现
后端（springboot3+mybatis+redis+tokenJWT),前端（vue3+elementplus+axios+pinia+tokestores)前后端分离最完整最简易的项目
m0_63755691的博客
06-21 777
二、代码实验（后端（springboot3+mybatisplus+redis+toke,注意：必须开启redis服务，必须登录用户才能查看首页,账号123456，密码123456)一、结果截图(结果截图只是展现功能的一小部分，只要您把前后端项目运行起来，方能体会该项目中的精髓，该项目是本人JavaEE期末实验作业，结合Javaweb课程所开发）三、前端（vue3+elementplus+pinia+html5)
Vue3 项目创建
qq_48294048的博客
10-10 2万+
vue 3需要node10以上版本node官网下载地址以往的版本 | Node.js。
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
热门推荐
逆境清醒的博客
03-19 6万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
如何创建vue3项目
m0_69502730的博客
08-24 2万+
如何创建vue3项目
Vue Cli3 创建项目的方法步骤
10-17
Vue CLI 3 的创建项目方法如下： 1. **安装Vue CLI 3**： 首先确保你的环境中已经安装了Node.js，然后通过npm全局安装Vue CLI 3： ``` npm install -g @vue/cli ``` 2. **创建项目**： 使用Vue CLI 3创建一个...
通过脚手架Vite创建Vue 3项目（主页分栏：Web实验练习）
01-20
在这个实验中，我们将学习如何使用 Vite 脚手架创建一个 Vue 3 项目，特别是构建一个具有主页分栏的 Web 应用。 首先，确保你已经安装了 Node.js 和 npm（Node 包管理器）。Vite 和 Vue 3 的安装通常依赖于这两个...
Vue3创建项目1
08-08
Vue3 创建项目主要涉及到以下几个知识点： 1. **Vue CLI**：`vue create` 是 Vue CLI (Vue.js Command Line Interface) 的命令，用于快速初始化一个新的 Vue 项目。在本例中，用户通过 `vue create yyf-web` 命令...
vue3+vite创建项目-（傻瓜式教程）
01-19
2. 创建Vue3项目 接下来，使用Vite创建一个新的Vue3项目： ```bash create-vite my-vue3-project ``` 这里的"my-vue3-project"是你的项目名称，你可以根据需要进行更改。 3. 进入项目目录并启动开发服务器 创建...
Vue3 Project 项目(01) 源码
04-02
1. `main.js`：应用的入口文件，Vue3 项目通常在这里创建根 Vue 实例，并挂载到 DOM 元素上。这里也会引入其他全局组件、插件和配置。 2. `App.vue`：根组件，整个应用的起点。可以定义应用的结构和样式，以及任何...
Vue3创建项目（一）新手教程
zhangxueyou2223的博客
09-26 1万+
Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs的环境，需要先安装Nodejs。
vue3初始搭建项目完整教程 vue3 + vite + element-ui + axios
csdn_8023的博客
04-08 6050
搭建vue3+vite+element项目基础框架构建
vue3创建项目、基础知识
halo1416的博客
04-02 2725
Vue3的基础概念 一、创建vue3的项目（基于脚手架） // 前提：将vue-cli 升级到4.x 的版本 vue create my-app-ts // 使用ts npm install typescript ts-node -g 生成时操作如下: 二、vue3.0 部分写法改变 后面补充 createStore => useStore createRouter => useRouter vue所有api 的入口：setup vue3里面没有mapState 原因：mapState 是
Vue3：项目创建
weixin_51416826的博客
05-10 854
Vue 3 相对于 Vue 2 带来了许多改进和优点，这些改进主要是为了提高性能、开发体验和可维护性。但是对于创建项目，Vue3也可以采用跟Vue2相同的方式。
Vue3.0-创建Vue3.0项目
qq_45722267的博客
06-16 2309
vue3.0创建项目，vue3.0常用指令，创建工程：Npm init vue@latest，安装 Element Plus：npm install element-plus --save，安装axios：npm install axios
「Vue3系列」Vue3起步/创建项目
日常笔记/总结/系列知识梳理
03-02 1110
你可以选择默认配置（Default）来快速创建一个项目，或者手动选择特性（Manually select features）来定制你的项目。Vue CLI 是一个强大的工具，它可以帮助你快速搭建 Vue.js 项目，并且内置了对 Vue Router、Vuex、CSS 预处理器、PWA 支持、单元测试等的集成。命令是 Vue CLI 中的一个重要命令，用于创建新的 Vue.js 项目。这将创建一个优化过的、用于生产环境的版本在你的项目目录下的。这个命令将直接为你创建一个使用 Vue 3 的项目。
【Vue3教程】创建你的第一个Vue 3项目
2401_84138890的博客
04-12 722
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化一个人可以走的很快，但一群人才能走的更远。
1. vue3从零搭建项目-页面初始
weixin_55555471的博客
10-07 1239
vue3+typescipt 项目开发
cli创建vue3项目
最新发布
06-27
要使用命令行接口（CLI）创建一个Vue 3项目，你可以使用官方推荐的Vue CLI工具。Vue CLI是一个用于生成、构建和管理Vue.js项目的脚手架工具。以下是创建Vue 3项目的步骤： 1. **安装Vue CLI**: 首先，确保你的计算机上已经安装了Node.js和npm。然后，打开终端或命令提示符，运行以下命令来全局安装Vue CLI： ``` npm install -g @vue/cli ``` 2. **创建新项目**: 使用Vue CLI创建一个新的Vue 3项目，执行以下命令，替换`project-name`为你的项目名称： ``` vue create project-name ``` 如果你想使用预设配置（如ESLint、TypeScript等），可以在创建时选择相应的选项。 3. **进入项目目录**: 创建完成后，项目会被自动打开在默认的文本编辑器中。如果你想在终端中操作，可以使用以下命令进入项目目录： ``` cd project-name ``` 4. **启动项目**: 进入项目目录后，运行以下命令启动本地开发服务器： ``` vue serve ``` 现在，你可以访问`http://localhost:8080`查看你的Vue 3项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值