Vue3创建脚手架

最新推荐文章于 2024-11-20 15:15:00 发布
置顶 最新推荐文章于 2024-11-20 15:15:00 发布
阅读量1.1k 收藏 3
点赞数 19
分类专栏： 前端 文章标签： vue.js 前端框架 前端 架构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/FFNCL/article/details/142422618
版权

简要介绍

脚手架是前端项目的常用架构，使用Vue3创建脚手架能很好的创建前端项目

1.创建前提

创建脚手架需要在4.5.1版本以上，可用Vue -V查看vue版本
在这里插入图片描述

2.创建步骤

  • 在创建目录下打开终端

在这里插入图片描述
- 使用vue命令创建脚手架
vue create project--------------------------project为你要创建的项目名

- 选择手动选择功能配置
在这里插入图片描述

  • 选择需要的配置，根据提示，空格为选中，选择Babel,TypeScript,Router,Vuex

在这里插入图片描述

-接下来配置如下图
在这里插入图片描述

- 等待配置完成即可
在这里插入图片描述

3.运行项目

- 将项目在VSCode中打开在这里插入图片描述
- 使用命令npm run serve运行项目
在这里插入图片描述
- 运行成功
在这里插入图片描述

  • 打开查看
    在这里插入图片描述

最后再根据需要完善项目的开发即可

Vue3的脚手架搭建
qq_28400607的博客
10-10 339
官网地址：https://cn.vuejs.org/guide/quick-start.html。
【Vue】3.0利用远程仓库自定义项目脚手架
最新发布
qq_25081445的博客
02-10 715
项目脚手架（Project Scaffolding）是一种用于快速生成项目基础结构的工具或模板，类似于建筑中的“脚手架”——为项目搭建一个标准化的初始框架，帮助开发者省去重复性配置工作，专注于核心功能的开发。虽然Vue提供了标准项目脚手架，但是生成的项目模板过于简洁，应用到实际开发中还需要做很多配置和开发。同时为了在团队间统一项目框架，自定义项目脚手架就显得无比重要。
VUE 3——3：脚手架构建工具介绍及在创建 Vue 3 项目中的应用
dangfulin的博客
04-14 3851
这是针对 Vue 新人的一个简单指导。 在前面的文章中，我们不推荐新手直接使用 vue-cli，（尤其是在还不熟悉基于 node.js 的构建工具时），而是通过直接引用的方式： <script src="https://unpkg.com/vue@next"></script> 随着页面中组件越写越多，单个 HTML 文件终究无法完成实际的整个 Vue 项目，同时为了对 Vue 的使用有个整体的了解，这里将展示如何通过脚手架工具创建 Vue 3 项目以及一些前置说明。 文章目录一，
vue3 脚手架创建项目
PrimaryColor
01-05 370
升级版本（卸载旧版本再安装新版本）： npm uninstall vue-cli -g npm i @vue/cli -g “上下键”切换，“空格”勾选，“回车”确认。 1、创建项目。 2、 3、 4、 5、 6、 7、 8、 9、 10、 11、最后是否保存之前配置的模板，可以选择“y”。 ...
VUE3脚手架工具cli配置搭建及创建VUE工程
雾林小妖的博客
06-17 4106
VUE3脚手架工具cli配置搭建及创建VUE工程
vue3脚手架搭建
贝西奇谈
10-18 5528
Vue3CLI（脚手架）
Vue3：创建脚手架
孤安先生的博客，作者主站正在重构中，敬请期待！
11-18 546
Vue3 运行性能是 Vue2 的 1.5 倍。Vue3 支持 tree-shaking，可以进行按需编译，编译后的文件体积比 Vue2 更小。Vue3 提供更先进的功能，teleport、suspense 等。Vue3 对 TypeScript 的支持更友好，对大型前端应用的支持更好。Vue3 组合式 API 使应用中的功能代码更聚合，使组件间公共逻辑的抽取更容易。Vue3 在 2022年2页左右。使用 Proxy 代替 defineProperty 实现响应式。
创建vue3项目脚手架
gp_911014的博客
02-21 1799
Vite 是由 Vue 作者尤雨溪先生带领团队开发的一个构建工具，它利用浏览器原生支持 ES 模块的特点，极大提升了开发体验，自 2021 年 1 月份发布 2.0 版本以来，发展非常快，笔者也在第一时间参与贡献了一些文档和插件，并且在 2021 年期间，个人项目已经全面切换到 Vite ，公司业务也在 2021 年底开始使用 Vite 创建新项目，整体情况非常稳定，前景非常乐观。Lint 规则，用来代码检查，写 TypeScript 离不开 Lint ，可以根据自己喜好选择，也可以先选择默认，后面在。
Vue 3 脚手架搭建
Dily_Su的博客
05-18 2884
手把手带你创建属于自己的 vue3 脚手架 技术栈：vite、vue3、typescript、pinia、axios、eslint、prettier、element-plus、unplugin-auto-import、unplugin-vue-components、unplugin-icons
Vue3 脚手架搭建项目详细过程
热门推荐
zyf971020的博客
10-12 1万+
Vue3 脚手架搭建项目详细过程及代码规范配置
vue3之搭建脚手架快速创建vue项目
soos的博客
08-11 945
通过脚手架创建vue项目
用vuecli3搭建的vue项目脚手架
08-09
用vue-cli3搭建的vue项目脚手架
教你如何创建一个vite+ts+vue3的脚手架(傻瓜式教程）
m0_63500235的博客
03-26 1269
vite项目的搭建 安装命令 npm create vite@latest 回车选择 vue 回车选择 vue-ts 创建成功 cd 到根文件夹(vite-project)里面 创建vuex 在src里面新建 store文件夹创建 index.ts 文件 import { createStore } from "vuex"; export default createStore<any>({ state: {}, // 数据源存放地 getters: {...
vue脚手架搭建vue3
qq_40576549的博客
02-21 1041
1.vuecli版本 4.5.11 2.在终端 输入vue create demo 回车 （demo是文件名） vue create demo 3.选择你需要的 (上下键选择，空格键是选中与取消) 4.装好后一定要记得 进入demo 文件夹里面运行终端 以上就创建完成了 5. npm run build 后拖进服务器里面 发现会报错 主要是因为 默认的打包路径是服务器的根目录，如果你的项目不是丢在根目录的话需要在项目根目录手动添加vue.config.js文件 配置 pu.
vue3.0教程——搭建Vue脚手架【简化版】
weixin_51331210的博客
10-02 7016
🍣 🍥 🍙哈喽，大家好丫，你们的小郭子又来啦 ~ 今天来聊一聊Vue3的项目搭建问题。
vue2(十一)-基础入门之脚手架创建项目与打包并部署项目
weixin_43520586的博客
12-30 2721
选择的工具。
【Vue 3脚手架介绍】
武帝为此的博客
09-20 494
Vue 3脚手架是一个开发工具，它能快速创建和管理Vue 3项目的基本结构。它基于Vue官方推荐的项目结构和最佳实践，能够更轻松地开始编写Vue应用程序。
Vue-脚手架的创建
qq_52998673的博客
11-05 977
Vue-脚手架的创建
从零开始使用 Webpack 搭建 Vue 3 脚手架工程（一）
weixin_41048671的博客
11-20 2433
Vue 3 是目前非常流行的前端框架，带来了性能提升、Composition API 等新特性，适合构建现代化 Web 应用。Webpack 是功能强大的模块打包工具，可以灵活配置，支持 Vue 3 项目的构建需求。本文从初始化项目到配置 Webpack，再到运行开发服务器和优化，完整地演示了 Vue 3 脚手架的搭建过程。接下来可以继续集成 Vue Router、Pinia 或添加 TypeScript 支持，打造更加完善的工程化项目。
Vue3用脚手架创建
12-05
Vue3创建项目通常会使用官方推荐的脚手架工具——Vue CLI（Command Line Interface）。以下是使用Vue CLI快速创建Vue3项目的步骤： 1. **安装Node.js**：首先确保你的计算机上已经安装了Node.js，因为Vue CLI依赖于...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值