【Vue】使用Vue脚手架(vue-cli)构建Vue3项目

已于 2023-02-01 09:41:41 修改
阅读量2k 收藏 2
点赞数
分类专栏： Web前端 Vue 文章标签： vue.js 前端 javascript
于 2022-08-17 21:29:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51481135/article/details/126388646
版权
本文介绍了如何通过命令行工具cmd和Visual Studio Code (VSCode) 或 WebStorm 创建Vue3项目。首先，确保安装Vue3脚手架并升级到4.5.0以上版本。然后，使用`vue create`命令创建项目，选择Vue3.0并配置所需内容。进入项目目录，通过`npm run serve`启动本地服务器。项目主要目录包括：public、src（包含assets、components等）。在`main.js`中注册和导入自定义组件。同样，也可以在WebStorm中创建项目并启动。
摘要由CSDN通过智能技术生成

一、利用cmd和vscode创建

1.在cmd安装或升级Vue3脚手架

        npm install -g @vue/cli

2.查看版本号，保证版本号在4.5.0以上

        vue --version

3.进入工作目录创建Vue项目

        vue create 项目名称

按下键盘上下箭头选择创建vue2.0或vue3.0项目

 注：最后一项是手动选择需要下载的内容。

4.进入项目目录，启动项目

        cd 项目名称

        npm run serve

以本地网络为例：复制本地网络地址于浏览器，打开vue项目的启动界面。

最低0.47元/天 解锁文章
vue3 脚手架创建项目
PrimaryColor
01-05 342
升级版本（卸载旧版本再安装新版本）： npm uninstall vue-cli -g npm i @vue/cli -g “上下键”切换，“空格”勾选，“回车”确认。 1、创建项目。 2、 3、 4、 5、 6、 7、 8、 9、 10、 11、最后是否保存之前配置的模板，可以选择“y”。 ...
安装vue-cli，使用脚手架 vue-cli 构建项目，package.json
Mb_JUJI的博客
11-19 1340
安装vue-cli，使用脚手架 vue-cli 构建项目，package.json，npm intall的区别
vue3脚手架搭建
贝西奇谈
10-18 5149
Vue3CLI（脚手架）
使用 Vue 官方脚手架初始化 Vue3 项目
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
10-21 3945
使用 Vue 官方脚手架初始化 Vue3 项目： 1. 安装 Node 环境 2. 切换 NPM 镜像源 3. 安装 Pnpm 包管理工具 4. 使用 Vue 官方脚手架初始化项目 5. 认识 Vue 项目目录结构 6. 统一包管理器工具下载依赖 7. 项目环境变量配置 8. 安装 Element Plus 9. 集成 sass 配置全局变量 10. 清除浏览器默认样式 11. 安装 Tailwind CSS 12. 封装 SvgIcon 组件 13. 安装 Piana 持久化插件
Vue 3 脚手架搭建
Dily_Su的博客
05-18 2809
手把手带你创建属于自己的 vue3 脚手架 技术栈：vite、vue3、typescript、pinia、axios、eslint、prettier、element-plus、unplugin-auto-import、unplugin-vue-components、unplugin-icons
VUE3脚手架工具cli配置搭建及创建VUE工程
雾林小妖的博客
06-17 3557
VUE3脚手架工具cli配置搭建及创建VUE工程
vue 脚手架 创建vue3项目
aayygg1234的专栏
04-30 481
而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。lint and fix on commit (用户提交代码到git时检查)选择配置文件（babel, EsLint等）存放的位置。选择配置模式：手动选择模式 (上下键+回车)选择配置（上下键+空格+回车）开始生成项目，等待·····
vue-cli-plugin-element-Vue CLI 3插件，可在几秒钟内用element-ui构建企业应用程序-Vue.js开发
05-27
该项目不仅是vue-cli插件，而且是vue-cli-plugin-element，可在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该项目不仅是vue-cli插件，而且是vue-cli预设。 玩得开心！ :United_States:英文| Example...
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
01-19
1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 ...
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（可选）└─...
脚手架创建vue3项目的方式
loly_zhang的博客
12-13 581
【代码】脚手架创建vue3项目的方式。
用vuecli3搭建的vue项目脚手架
08-09
用vue-cli3搭建的vue项目脚手架
Vue3 脚手架搭建项目详细过程
热门推荐
weixin_45304198的博客
12-04 1万+
一. 安装vue3.0脚手架 如果之前安装了2.0的脚手架，要先卸载掉,输入：npm uninstall vue-cli -g 进行全局卸载 然后重新安装： npm install @vue/cli -g 二，项目搭建过程 由于 git bash 来执行命令的时候无法使用键盘上下键来进行选项选择，所以我们要使用 cmd / powershell，这里使用 powershell 1.vue create + 项目名称 2.模板选择，通过键盘上下键来选择，我们选择第三个 自定义 这三个选择分别是 vue2 /
Vue CLI脚手架创建Vue3项目
乾坤鸟的博客
09-19 1706
1、打开命令窗口切换到项目保存目录。 2、选择Vue 3创建。 3、等待创建，提示Successfully created project创建成功。 4、创建好的项目目录。 5、用开发工具idea、vscode等打开hello-vue3项目开发就可以了，按个人喜好我用的是idea。 6、启动成功，发挥创造吧~~~~第一次运行时先初始化安装。 7、yarn命令没有安装的小伙伴可以参考这个。
Vue3 脚手架创建项目
Deng872347348的博客
09-02 868
Vue3 脚手架创建项目
适用脚手架搭建vue3项目
Xiaochen1239的博客
01-02 434
1，下载node#2，下载vue@cli#3, 使vue create 项目名称进行手动选择#4, 根据所需要的进行选择# 5. 进行文件清理即可。
vue脚手架搭建vue3
qq_40576549的博客
02-21 1022
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脚手架搭建（三）
sodakii的博客
09-26 702
使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。Props定义：提供默认值，使用type属性校验类型，使用props之前先检查prop是否存在。无特殊情况不允许使用原生API操作dom,谨慎使用this.$refs直接操作dom。指令缩写：都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。函数中统一使用_this=this来解决全局指向问题。使用计算 规避v-if和v-for用在一起。为v-for设置Key值。
使用vue-cli快速构建vue项目教程
"使用vue-cli构建Vue项目的详细步骤与解析" Vue CLI是Vue.js官方提供的一个命令行工具，用于快速搭建Vue.js项目。它简化了项目的初始化过程，避免开发者手动配置复杂的Webpack配置，使得创建和维护Vue项目变得更为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值