手把手学习Vue3.0：如何利用Vue-CLI4.5.1脚手架创建Vue3.0工程

最新推荐文章于 2022-11-18 13:08:42 发布
最新推荐文章于 2022-11-18 13:08:42 发布
阅读量421 收藏 1
点赞数 1
分类专栏： 手把手学习Vue3.0 前端 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shishuai4206/article/details/114068798
版权

目录

背景

构建步骤

创建命令

选择预设配置​

具体可选配置 

选择Vue版本

选择路由器模式

选择CSS样式处理器

选择代码校验规则

选择配置文件处理方式

选择是保存本地模板

项目创建成功

总结

背景

上篇《手把手学习Vue：Vue环境搭建》末尾提到了工程构建，没有详细给出操作步骤。今天单独拿出来我觉得还是非常有必要的，因为不同的配置项决定后面怎么编码。也希望学习的小伙伴们也重视这些基础环节，正所谓磨刀不误砍柴工。我用的都是最新版本的工具，目的是理清知识脉络。如果你是生产环境一定要用兼容性最成熟稳定的版本，不同的版本构建操作步骤也会有出入。顺便大家也要明确一个概念，Vue不是单纯一个框架，而是一堆框架的组合使用，所有需要各个版本都要兼容好，才会发挥最大的优势。

构建步骤

创建命令

vue create project_name

选择预设配置

  • 第一个2.0的默认配置
  • 第二个3.0的默认配置
  • 第三个自定义配置，我一般选择这个，完成后保存一个模板，后面按保存的模板创建，方便快捷。
了解本专栏 订阅专栏 解锁全文 超级会员免费看
帅哥趣谈
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
3 Vue3.0 脚手架&组件(核心概念FH)
harvestUachieve的博客
08-10 600
},};
配置vue3.0 + ts + axios + 反向代理 + px转rem
ZQmxy的博客
04-21 2317
前提 你需要安装好vue-cli脚手架 注意：该文章只针对与vue-cli版本为4.5.13 查看自己vue版本 vue -V 搭建vue3.0 创建一个项目文件夹，cmd打开该文件夹，输入vue create . 回车 注意：create后面有 点 vue create . 敲 y 然后回车 按上下键进行选择，选择最后一个，回车 按上下键进行选择，按空格选中，按需选择，选择好后回车 选择vue版本 选择3.x ，回车 这里三次全部按 n ，回车 选择css预处理器
vue3.0脚手架搭建
莫不静好
06-30 6093
1、安装vue-cli 3.0 先卸载旧版本 npm uninstall vue-cli -g 再安装Vue CLI 3 npm install -g @vue/cli 安装成功查看版本 vue-V 2、创建项目 去指定目录下创建项目 vue create project-name（自己定义项目名，不可使用驼峰式命名） 3、选择配置（自定义配置） 4、在css预编译我选择了less 5、在语法检测工具选择了 ESLint + Standard config 6、在选择语法检测方式中，这
Day 100/100 Vue3.0 & Vue-cli4.5 跨域问题
xinghuowuzhao的博客
02-02 312
写在前端的话 除了后端解决跨域问题 前端可以解决吗？ 答案是可以~~~ （一）问题 遇到了跨域问题，本地的URL是 http://localhost:8080/#/ 接口请求是IP:端口 报错，跨域了... （二）解决方案 1、后端配置 Access-Control-Allow-Origin Access-Control-Request-Method 2、前端解决问题 1）在vue.config.js文件加入生产环境代理 devServer: { ..
Vue3.0脚手架创建
weixin_44822939的博客
01-07 229
1.先查看需要的环境 node -v npm -v 2.下载淘宝镜像cnpm，国内快 npm install cnpm -g --registry=https://registry.npm.taobao.org 3.查看版本 cnpm -v 4.安装vue cli3 npm install -g @vue/cli 或者 安装vue cli2 cnpm install -g vue-cli 5.查看vue版本 vue -V 6.选择安装的目录 vue create project(projiect为文件名)
vue-cli3.0 脚手架搭建项目的过程详解
10-17
Vue CLI 3.0 是 Vue.js 官方提供的一个强大脚手架工具，它简化了 Vue.js 项目的初始化和构建过程。本篇文章将详细介绍如何使用 Vue CLI 3.0 来搭建一个新的 Vue 项目。 首先，你需要确保已经安装了 Node.js 和 npm...
vue-cli-plugin-browser-extension:适用于vue-cli 3.0的浏览器扩展开发插件
05-13
vue-cli-plugin-browser-extension vue-cli 3.x的浏览器扩展开发插件 它有什么作用？ 这旨在作为的替代品（现在，使用此插件已预设为 ）。 该插件为您的vue应用程序更改了serve命令。 此新命令仅用于在测试您的...
Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.rar
04-12
Vue3.0 devtools 6.0.0 beta 7 ，Vue3.0 devtools调试工具
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
如何使用Vue-cli4.5.x创建Vue3.0多组件并发布到npm(完整教程）
07-05 400
闭坑教程开始： 1、安装vue-cli的最新版本，或者用 npm view @vue/cli versions看看自己想要的版本安装。 npm i @vue/cli -g 2、创建自己的工程 vue create my-project 在空工程里，基于vue2.x的项目和vue3.x最大的区别就在于一个是new Vue，一个是createAPP的方法。在这里我们选择vue3.x.x和使用独立的配置文件，因为后面我们使用vue.config.js，其他的按照自己的需要选择。 3、配置工程...
使用Vue CLI v4.5(+)搭建Vue3.0项目框架搭建
serdonty的博客
03-18 572
@[TOC](使用Vue CLI v4.5(+)搭建Vue3.0项目框架搭建) 开发环境准备 请安装以下开发工具（未详述的可在网上找相关资料） 安装vscode 安装Node.js 为npm配置国内镜像 npm config set registry https://registry.npm.taobao.org/ 配置命令执行完毕后，可用如下命令检测 npm config get registry 安装yarn npm install -g yarn 为yarn配置国内镜像 ya
vue-cli 3 VUE脚手架项目搭建（详解）
meteorites的博客
06-11 8008
vue-cli 3 VUE脚手架 注： vue cli3 需要node8.9或者以上版本 vue-cli版本检查 // 命令行 vue -V // 查看当前版本 npm uninstall -g vue-cli //卸载之前的 npm install -g @vue/cli //安装最新的 开始构建项目 vue create ‘项目名’ 回车创建 配置 default 是默认配置 Manually select features 是自己手动选择 （上下箭头切换，回车确定） 手动配置： 需
Vue3.0 10分钟上手体验-Vue-cli 4
程序猿GTC
09-29 752
上一篇通过克隆官方vue3.0的demo来体验，现在vue/cli 4.5.6已经发布了，可以直接创建vue3的项目了。 直接使用脚手架，如果本地没有安装的可以执行脚手架安装命令： npm install -g @vue/cli 如果本地安装过的，可以尝试更新一下： npm update -g @vue/cli（不好用） cnpm uninstall vue-cli -g （先卸载旧版本，再用上面的命令安装） 测试 vue-cli 版本： vue -V @vue/cli 4.5.6 .
Vue 3.0 脚手架配置 (TypeScript + pinia + less转px转rem + 反向代理 + axios )
weixin_68903201的博客
11-18 305
target: 'http://....................', //这里是后端接口地址。在src目录下创建api文件夹 , 文件夹内创建 index.ts 和 request.ts 两个文件。打开vue.config.js配置文件,在module.exports 中添加以下代码。1.在项目根目录下创建 vue.config.js 并在里面配置。在 src 目录下创建 store 文件 在创建 index.ts 文件。open: true //启动项目自动打开浏览器。
VueCLI v4.5.4 创建vue项目（手选模式创建）
热门推荐
{竹子}
09-06 2万+
创建项目 vue create v1 v1 项目名称 大意：请选择一个预设（有3个预设置） Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features # 手动选择功能 选择 Manually select features创建 Vue CLI v4.5.4 ? Please pick a preset: Manually select fea
vue3.0 脚手架配置
weixin_43072453的博客
02-28 3039
版本需求 vue cli 需求node.js版本8或者更高 全局安装 npm install -g @vue/cli yarn global add @vue/cli 如果没有安装yarn的需要安装 安装地址；https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable” 检测安装 1.vue项目创建 1.0运行 vue cre...
Vue-CLI3 脚手架搭建教程（全都是图）
缚己
01-27 6079
脚手架是什么 Vue 脚手架用于快速生成 Vue 项目基础架构，网址：Vue CLI 安装脚手架： npm install -g @vue/cli 使用命令行创建项目 在终端中输入如下命令进入交互式命令行： vue create project 这个界面让你选择创建的模式，按上下键可以移动，分别为： 默认：vue2 默认：vue3 手动选择 如果选择手动，会变成下面界面： 按下 a 选择所有，按下 i 反向选择，按下空格选择当前，选择完毕按下回车确认。 弹出下面界面： 这个界面让选择使用的 v
sh: 1: vue-cli-service: not found
最新发布
01-17
根据提供的引用内容，出现"sh: 1: vue-cli-service: not found"错误是因为在Heroku部署vue项目时找不到vue-cli-service命令。这个错误通常是由于缺少依赖或配置问题导致的。以下是两种可能的解决方法： 1. 确保在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

帅哥趣谈

请帅哥抽根烟

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

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

打赏作者

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

抵扣说明：

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

余额充值