创建Vue3项目(vue-cli，vite，create-vue)

最新推荐文章于 2024-08-13 09:40:14 发布
最新推荐文章于 2024-08-13 09:40:14 发布
阅读量636 收藏 14
点赞数 29
分类专栏： vue3 文章标签： vue.js 前端 typescript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/umin_/article/details/141024931
版权

记录一下vue3搭建项目的几种方法（vue-cli，vite，create-vue）

更推荐vite安装，如果几种方法都尝试过的小伙伴应该会发现vite安装更加的快速

推荐pnpm和yarn包管理器，安装速度杠杠的，可以学习一下

目录

创建Vue3项目

基于vue-cli搭建

1. 前置条件

2. 项目创建

3. 项目启动

基于vite搭建（推荐）

1. 项目创建

2. 项目启动

通过create-vue搭建

1. 项目创建

2. 项目启动

基于vue-cli搭建

vuecli官方文档icon-default.png?t=N7T8https://cli.vuejs.org/zh/guide/creating-a-project.html

1. 前置条件

@vue/cli版本在4.5.0以上，node版本在18.3以上

  • 打开命令提示符

同时按window+R键,输入cmd后回车,打开命令提示符窗口

或者电脑搜索面板输入cmd/命令提示符打开

 

  • 检查工具版本

输入：vue --version，查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

输入： node –v，查看node版本，确保node版本在18.3以上

 

未安装或版本过低，安装或者升级你的@vue/cli

输入：npm install -g @vue/cli

2. 项目创建

执行创建命令，vue create vue3_test

选择 [Vue 3] babel, eslint，包管理器(pnpm，npm，yarn)

ps：键盘上下键控制选择

E:\Workspace\FrontEndProject\Vue3Project>vue create vue3_test
​
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: PNPM
​
​
Vue CLI v5.0.8
✨  Creating project in E:\Workspace\FrontEndProject\Vue3Project\vue3_test.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...
​
🚀  Invoking generators...
📦  Installing additional dependencies...
​
⚓  Running completion hooks...
​
📄  Generating README.md...
​
🎉  Successfully created project vue3_test.
👉  Get started with the following commands:
​
 $ cd vue3_test
 $ pnpm run serve

3. 项目启动

输入：cd vue3_test 到达项目根目录 输入：pnpm run serve 启动项目

启动成功后出现地址 http://localhost:8080/，复制到浏览器打开，或按住Ctrl键点击命令行里的地址打开

 

基于vite搭建（推荐）

vite官方文档icon-default.png?t=N7T8https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

vite 是新一代前端构建工具，vite的优势如下：

  • 轻量快速的热重载（HMR），能实现极速的服务启动。

  • 对 TypeScript、JSX、CSS 等支持开箱即用。

  • 真正的按需编译，不再等待整个应用编译完成。

1. 项目创建

输入项目创建命令 pnpm create vite

输入项目名字，选择vue框架，TypeScript

E:\Workspace\FrontEndProject\Vue3Project>pnpm create vite
.../19130b8c8bd-60b8                     |   +1 +
.../19130b8c8bd-60b8                     | Progress: resolved 1, reused 0, downloaded 1, added 1, done
√ Project name: ... vue3-test
√ Select a framework: » Vue
√ Select a variant: » TypeScript
​
Scaffolding project in E:\Workspace\FrontEndProject\Vue3Project\vue3-test...
​
Done. Now run:
​
  cd vue3-test
  pnpm install
  pnpm run dev

2. 项目启动

输入：cd vue3_test 到达项目根目录

输入：pnpm install 安装项目所需依赖

输入：pnpm run dev 启动项目

启动成功后出现地址 http://localhost:5173/，复制到浏览器打开，或按住Ctrl键点击命令行里的地址打开

通过create-vue搭建

vue3官方文档icon-default.png?t=N7T8https://cn.vuejs.org/guide/quick-start.html

1. 项目创建

输入项目创建命令 pnpm create vite

输入项目名字，根据需求安装插件，没安装的插件后面在项目中也可以手动安装

ps：键盘左右选择 是/否

E:\Workspace\FrontEndProject\Vue3Project>pnpm create vue@latest
.../19130c78fdf-37c8                     |   +1 +
.../19130c78fdf-37c8                     | Progress: resolved 1, reused 0, downloaded 1, added 1, done

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue3-test
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

正在初始化项目 E:\Workspace\FrontEndProject\Vue3Project\vue3-test...

项目初始化完成，可执行以下命令：

  cd vue3-test
  pnpm install
  pnpm dev

2. 项目启动

输入：cd vue3_test 到达项目根目录

输入：pnpm install 安装项目所需依赖

输入：pnpm run dev 启动项目

启动成功后出现地址 http://localhost:5173/，复制到浏览器打开，或按住Ctrl键点击命令行里的地址打开

蟹蟹你的浏览~~~

白白的西柚珉•᷄ࡇ•᷅
关注
  • 29
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue之（vue-cli和vite）环境搭建与项目创建
weixin_52084329的博客
10-18 567
详细的选择过程就不放在这里了，需要的可以戳这篇https://blog.csdn.net/weixin_44882488/article/details/124220864。检查是否安装了cnpm, 用以下命令查看一下你是否安装了cnpm。安装完成以后查看安装的版本（显示版本号说明安装成功）选择对应创建条件，创建成功后cd到项目文件夹下面。出现版本号则说明安装成功（最新的以官网为准）进入任意一个想要创建项目的文件夹输入。安装完成后使用以下命令查看版本号。vue create “文件名”
Vue工程化项目创建-VueCli与Vite
CharliePuthJJ的博客
03-07 1446
在完成了node.js的安装之后，我们就可以正式来创建我们的Vue工程化项目了，我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite，其中VueCli可用于创建vue2与vue3的项目，而Vite是比较新的，它只能创建vue3的工程化项目。以下为大家演示是用VueCli创建vue2还有Vite创建vue3，这也是我学习时所用到的。
Vue3 vue-cli、create-react-app、vite 创建vue/react项目(笔记)
weixin_60547084的博客
08-12 1887
/ 可以直接通过 store. 去获取 state、getters、actions 中的属性和方法了。// 替换状态(不是覆盖状态)，需要新的状态去替换旧的，如果 key 值不相同就是添加新状态。// 修改状态3，这种方式和 React 中的 setState 很像。// 当函数中存在失败状态的 Promise，或函数抛出异常时执行。// 这个 store 的 Id，这里是 count。// action 中的函数每次调用，都会触发一次。// store 中的值，每修改一次就会触发。...
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配置
(Vue) 创建Vue3工程 (vite / vue-cli)
cuber-lotus的博客
02-20 1535
文章目录vite 创建Vue3工程vite介绍创建流程初始化项目安装依赖包启动工程vue-cli 创建Vue3工程进入手动创建选择所需功能选择2.x 还是3.x询问配置创建完毕运行查看END 从2022年2月7日起vue3成为了默认版本，而创建vue3与vue2是否又有什么异同点呢？ 本文将用vite和vue-cli两种方式带你创建vue3工程 vite 创建Vue3工程 vite介绍 Vite中文网 vite是尤雨溪团队专门打造的前端开发与构建工具。也是自vue3发布以来尤雨溪一直强力推荐的工具~~
webpack、vite、vue-cli、create-vue 的区别
m0_47761892的博客
02-13 2721
webpack、vite、vue-cli、create-vue 的区别
vue.js 三种方式安装(vue-cli)
热门推荐
muzidigbig的博客
05-29 33万+
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 下面介绍三种 Vue.js 的安装方法： 1.独立版本 我们可以在Vue.js的官网上直接下载vue assets和static的区别 pnpm
怎样创建vue项目(分别基于vue-cli和vite两种的创建方式)
weixin_60941411的博客
01-06 775
2、检查是否安装成功，使用打开黑窗口的快捷键window+R，输入cmd，在黑窗口输入node -v，如果输出版本号，就说明安装node环境成功，
Vue3：使用vue-cli和vite创建工程
weixin_50236973的博客
12-12 433
Vue3：使用vue-cli和vite创建工程
Vue3.x（基于vue-cli和vite创建项目）
切图仔
05-06 869
Vue3.x（基于vue-cli和vite创建项目）
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
我们有很多现有的vue-cli（3.x / 4.x）项目。 在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 ...
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
vue-cli-plugin-vite-use
04-18
vue-cli-plugin-vite 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 整理和修复文件 yarn lint 自定义配置 请参阅。
cool-vue-vite-cli：使用vite2 vue3 axios vuex vue-router的测试演示
02-20
总结来说，"cool-vue-vite-cli"项目是一个全面展示现代前端开发流程的示例，涵盖了Vite2的快速开发特性、Vue3的新特性、Axios的网络请求处理、Vuex的状态管理和Vue-Router的路由控制，以及TypeScript和CSS的应用。...
vue-cli-plugin-qiankun:适用于微前端千库应用程序的vue-cli3插件
05-05
An Vue-cli3 Plugin for micro-frontend qiankun application 结合 qiankun 快速生成微前端应用的脚手架插件 Features qiankun 接入，子应用打包配置接入 修改 qiankun 官网 demo 中 vue 子应用 public 下静态资源...
vue的diff算法的【双端比较】策略
yiguoxiaohai的博客
08-08 355
vue的diff算法的双端比较策略
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
weixin_44784401的博客
08-09 890
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
Vue 中 app.config 相关配置项介绍与案例
最新发布
前端基地
08-13 645
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
Vue设置滚动条自动保持到最底端
Lipn_的博客
08-09 595
实现滚动条始终保持在最底端
是使用 create-vue 还是 使用 create-vite
07-15
对于创建一个 Vue 项目，您可以选择使用 create-vue 或 create-vite，具体取决于您的需求。 - create-vue：这是一个基于 Vue CLI 的命令，用于创建传统的 Vue 2 项目。它提供了许多预配置的选项和功能，如路由、状态管理等。如果您想要创建一个传统的 Vue 2 项目，并且习惯使用 Vue CLI 的工作流程，那么可以选择使用 create-vue。 - create-vite：这是一个基于 Vite 的命令，用于创建现代化的 Vue 3 项目。Vite 是一个快速的构建工具，适用于构建 Vue 3、React 和 Preact 项目。如果您想要创建一个基于 Vue 3 的项目，并且希望使用 Vite 的快速构建和热模块替换功能，那么可以选择使用 create-vite。 请注意，在使用 create-vite 创建 Vue 3 项目时，可以选择使用模板来初始化项目，如 `create-vite my-project --template vue`。这将使用 Vue 模板来创建项目。 综上所述，如果您需要创建传统的 Vue 2 项目，可以选择使用 create-vue；如果您需要创建现代化的 Vue 3 项目，并且希望利用 Vite 的优势，可以选择使用 create-vite。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

白白的西柚珉•᷄ࡇ•᷅

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

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

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

打赏作者

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

抵扣说明：

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

余额充值