Vue3项目创建流程 - 00

前端施工员

已于 2022-12-18 14:03:48 修改

阅读量359

点赞数

分类专栏： Vue3 文章标签：前端 javascript 开发语言

于 2022-12-17 20:15:09 首次发布

本文链接：https://blog.csdn.net/qq_25906119/article/details/128356645

版权

本文介绍了如何使用vite搭建Vue3项目。首先，通过`npm init vite`安装vite，然后选择项目类型和语言版本，确认安装后进入项目文件夹，通过`npm install`安装依赖，最后运行`npm run dev`启动项目。

摘要由CSDN通过智能技术生成

1. vite的安装

node 的安装与vue2安装流程中一直，故省略

vue3需要vite脚手架进行支持，所以需要先安装vite

PS G:\2023前端学习资料\Vue3\Vue3基础部分\vue3演示学习版> npm init vite

进入要安装vue3的文件夹中，打开终端，输入 npm init vite

PS G:\2023前端学习资料\Vue3\Vue3基础部分\vue3演示学习版> npm init vite
Need to install the following packages:
  create-vite
Ok to proceed? (y)

输入 y 确认安装

? Project name: » vite-project

输入这个项目的名字

? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

选择 vue

>   JavaScript
    TypeScript
    Customize with create-vue ↗
    Nuxt ↗

选择使用JS版本或者TS版本的vue

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端施工员

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue-admin-template-master.zip

12-05

通过运行简单的命令`vue create project-name`，你就可以快速生成一个新的Vue项目结构，包括源代码、测试、配置文件等。接下来是Element UI。这是一个由Ele.me团队维护的开源项目，它包含了丰富的UI组件，如表格、...

vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip

06-06

通过理解项目的结构、配置和流程，开发者可以学习到Vue.js的组件化开发、路由管理以及与Node.js后端的协作方式，进一步提升全栈开发能力。在实际操作过程中，注意保持前后端的版本一致性，以确保项目正常运行。

参与评论您还未登录，请先登录后发表或查看评论

Vue3项目搭建

JiuMen3520的博客

11-27

358

1.前提环境条件已安装 16.0 或更高版本的 Node.js2.创建一个Vue应用这一指令将会安装并执行 createvue项目名称：vue3-demo是否添加TypeScript？不是否添加JSX支持？不是否添加Vue Router进行单页应用程序开发？不是否添加Pinia进行状态管理？不是否添加Vitest进行单元测试？不是否添加端到端测试解决方案？不是否添加ESLint进行代码质量检查？是是否添加Prettier进行代码格式化？否启动成功。

vue3搭建项目

weixin_54043538的博客

01-23

538

vue/cli@4.x 搭建项目 1.vue create demo 2. 3. 4. 5. 6.cd demo npm install npm run serve

Vue3项目创建

最新发布

weixin_45415107的博客

09-18

3699

在创建一个新的Vue 3项目时，您会遇到以下目录结构：根目录•package.json：项目的配置文件，包含项目依赖、脚本和其他设置。•package-lock.json：锁定依赖版本信息，确保每次安装的依赖版本一致。•README.md：项目的说明文档。•.gitignore：Git版本控制忽略文件。•public：静态资源目录，存放图片、字体等静态资源。•src：源代码目录，包含Vue组件、JavaScript文件、样式文件等。src目录。

Vue3 项目搭建

BradyCC的博客

07-29

248

两种方式搭建 Vue3 项目基于 vue/cli 搭建 Vue2 项目后，升级至 Vue3 （vue-cli-plugin-vue-next）基于 vite 直接搭建 Vue3 项目第一种方式 # 创建项目 vue create vue3demo # 安装依赖 yarn # 升级至 Vue3 vue add vue-next # 运行 yarn serve 第二种方式 # 创建项目 yarn create vite-app vue3vite # 安装依赖 yarn # 运行 yar.

vue3项目搭建

weixin_43506403的博客

05-08

4090

npm 也是 Node.js 的默认的包管理器。一旦 node 安装，npm 也会被默认安装。yarn 是 facebook 等公司在 npm v3 时推出的一个新的开源的包管理器，它的出现是为了弥补 npm 当时安装速度慢、依赖包版本不一致等问题。如果之前安装了2.0的脚手架，要先卸载掉，输入：npm uninstall vue-cli -g 进行全局卸载。输入项目名crm_vue3,选择框架vue，选择typeScript回车就搭建好了。选择安装依赖项时要使用的包管理器：（使用键盘上下箭头键）

vue-workflow-chart：使用Vue.js创建工作流图

02-03

作为一个开源项目，vue-workflow-chart受GPLv3-许可。要求 npm 安装只需获得 npm i vue-workflow-chart 以获取最新版本。例具有两个状态以及从一个状态到另一个状态的过渡的最小示例。 < templat

vue3-vite2-vant3-rem

03-31

Vite2 是由 Vue.js 作者尤雨溪创建的一个新型构建工具，它颠覆了传统的 Web 开发构建流程。Vite 使用了 ES 模块的原生导入，实现了快速的热更新和按需编译，大大提升了开发效率。Vite2 还引入了 vite-plugin-* 插件...

vue-cron_vue-cron_vuecrond组件_vuecron_

10-04

Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...

【vue3】项目搭建

lorogy的博客

09-27

478

vue3：双向绑定改为ES6的Proxy；新的API风格，代码逻辑性更强、更易维护；性能提升，渲染更快、内存更少。vite：新型前端构建工具，基于原生ES模块，极速启动、快速热更新，更优的开发体验。以npm install和build过程为例，之前vue2+webpack的项目在devops的编译环节非常耗时，在2-15min之间均有，vue3+vite的项目基本在1min以内。

Vue3工程化项目搭建

这魏先森-forguo

07-16

2098

Vue3工程化项目搭建，从工程化的角度带你来搭建一个vite+vue3+ts的前端项目

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

热门推荐

逆境清醒的博客

03-19

8万+

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）一、搭建vue3 项目前提条件二、通过create-vue搭建vue3 项目三、搭建一个 Vite 项目四、构建一个 Vite + Vue 项目五、Vite + Vue 项目目录结构六、Vite.config.ts配置

vue3搭建项目和封装

qq_48084311的博客

11-09

244

vue3创建项目过程

创建vue3项目

qq_45438471的博客

03-04

2767

本文主要介绍在已经安装配置好nodejs的情况下，利用vuecli创建vue项目

vue3.x篇一：搭建项目

杨阳洋的博客

12-17

604

利用vue-cli3以上版本脚手架搭建vue3.0项目首先确保你的vue-cli脚手架版本号在3以上，我这里用的v4.5.9。升级vue-cli请参考：升级vue-cli vue -V查看脚手架版本号项目创建步骤如下： 1、初始化一个vue3-demo vue create vue3-demo 2、直接选择Default (Vue 3 Preview)也可，只是生成的项目结构单一。我此处选择自定义 3、按需添加你想要的插件（vue3.0搭载的Vuex和Router均为4.0版本的） 4、选

创建一个vue3项目加ts流程

08-06

创建一个Vue 3项目并使用TypeScript的流程如下： 1. 确保你的电脑已经安装了Node.js和Vue CLI。如果没有安装，可以在终端运行以下命令进行安装： ``` # 安装Node.js https://nodejs.org/ # 安装Vue CLI npm install -g @vue/cli ``` 2. 打开终端，进入你想要创建项目的目录，并执行以下命令来创建一个新的Vue项目： ``` vue create your-project-name ``` 在执行命令时，你可以根据需要选择默认或手动配置。注意，在选择手动配置时，你需要选择Vue 3、TypeScript和其他需要的配置。 3. 进入项目目录： ``` cd your-project-name ``` 4. 添加Vue 3的支持： ``` vue add vue-next ``` 这个命令会将Vue 3的相关依赖添加到你的项目中。 5. 添加TypeScript的支持： ``` vue add typescript ``` 这个命令会将TypeScript的相关依赖添加到你的项目中，并配置好TypeScript相关的设置。 6. 启动开发服务器： ``` npm run serve ``` 这个命令会启动一个开发服务器，并在浏览器中打开你的Vue应用。现在，你已经成功创建了一个Vue 3项目并使用TypeScript。你可以根据需要编辑和扩展你的项目了。