五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）(1)

于 2024-05-16 05:48:46 发布
阅读量651 收藏 13
点赞数 5
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84093973/article/details/138937989
版权

四、选择manually select (enter键确认,并进入下一步)

在这里插入图片描述

对于每一项的功能，王同学做一个简单的描述：

  • Babel 主要是对es6语法转换成兼容的js （选上）

  • TypeScript 支持使用TypeScript语法来编写代码

  • Progressive Web App (PWA) Support [把网页做的更像原生app]

  • Router 支持vue路由配置插件（一般都会选择）

  • Vuex 支持vue程序状态管理模式 (一般都会选择)

  • CSS Pre-processors 支持css预处理器 （一般都会选择）

  • Linter / Formatter 支持代码风格检查和格式化 （选上）

  • Unit Testing 单元测试

  • E2E Testing E2E测试

常见的项目选择如下

在这里插入图片描述

五、选择完成之后回车 这里我们选择3.x的

在这里插入图片描述

六、完成之后回车 出现以下界面

在这里插入图片描述

这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n

七、回车 出现以下界面

在这里插入图片描述

这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个

八、回车出现以下界面

在这里插入图片描述

这里的意思是选择一种格式化代码方式：我一般选择 ESLint + Prettier

九、回车出现以下界面

在这里插入图片描述

这里的意思是问你什么时候进行代码规则检测，我一般会选择保存就检测，也就是Lint on Save

十、回车出现以下界面

在这里插入图片描述

这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个

十一、回车出现以下界面

在这里插入图片描述

这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了，完成后如下图：

在这里插入图片描述

十二、根据提示，启动项目

根据指令提示 我们先执行cd code，然后执行npm run serve

在这里插入图片描述

在这里插入图片描述

十三、当我们需要自定义webpack相关配置的时候需要在项目根目录中创建vue.config.js文件，它会被@vue/cli-server自动加载，相关配置内容官网将的很详细，大家可以自己去官网看

好了，今天的内容就到这里了，本期结束 我们下期见！！！

===========================

Vue脚手架的基本用法

方法一：基于交互式命令行的方式，创建vue项目

在这里插入图片描述

详细步骤请参考上文

方法二：基于图形化的方式创建新版的vue

在这里插入图片描述

第一步：Windows+R打开面板—输入cmd命令—回车

第二步：输入命令 vue ui

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

方法三：基于2.X的旧版本，创建旧版的vue项目

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84093973
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3创建Vue项目
程序员柒的博客
02-09 2919
本文讲解了如何使用vue-cli3创建属于自己的Vue项目，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。下面案例可供参考。
通过 vue-cli 创建一个 vue3 的项目
桂如的博客
08-07 731
通过vue-cli创建一个vue3项目
vue-cli 版本3.0项目搭建和详解
一个懒惰前端的博客
05-27 6725
介绍 首先官方文档：https://cli.vuejs.org/ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： cli：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） cli 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令） cli 插件：
vue-cli3搭建项目
一名女程序猿的博客
05-19 190
准备工作 ： 环境要求vue cli要求node版本8或者更高（8.10.0+推荐） vue cli3 需要node版本>=8.9, （官方推荐：8.11.0+ ） 有node的情况下就可以使用npm进行安装了 1.打开项目文件夹进入cmd 输入 `npm install -g @vue/cli@3` 2.下载好之后输入vue create ‘你的项目名’ 回车创建 3.接着就会进入问答环节（选择一些配置） 3.1 如果你是第一次使用3.0版本的话， 下面的第一个选项是没有的可以忽略
Vuecli3
qq_41558265的博客
06-08 578
VueCLI3的使用： VueCLI3与Vuecli2的使用略有不同。 cli3相比cli2的优势： 1：功能丰富：对babel、Typescript、ESLint...提供开箱即用的支持 2：易于扩展：它的插件系统可以让社区根据需求构建和共享可复用的解决方案 3：无需Eject：vue cli 完全可配置的，无需再使用webpack配置 4：CLI图形化界面：vue ui图形化界面创...
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
vue使用vue-cli快速创建工程
01-19
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 -g代表全局安装。 i就是install的缩写。 其中webpack-simple代表模板的名称。vue-todos是你给自己的项目起的名称，这个随便起...
使用vue-cli创建项目的图文教程(新手入门篇)
01-21
使用npm 与vue-cli 构建vue 项目 第一步：安装运行环境（node与npm） nodeJ官网：http://nodejs.cn/下载安装包( 安装) 安装完成后，需要检测是否安装成功 使用命令行cmd 打开dos 黑窗口，运行 node -v 和 npm –v，...
vue-cli创建一个vue3项目
最新发布
wushijun5200的博客
12-17 117
【代码】vue-cli创建一个vue3项目。
vue-cli创建vue3
bestyinjun的专栏
08-07 176
vue-cli创建vue3
Vue3 项目创建
qq_48294048的博客
10-10 2万+
vue 3需要node10以上版本node官网下载地址以往的版本 | Node.js。
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
vue-cli3安装使用
Mi的博客
01-15 1万+
Vue-cli 3安装及使用vue-cli安装vue-cli创建项目自定义脚手架vue-cli3.0添加插件方法 vue-cli安装 使用下面的命令安装vue-cli3 npm install -g @vue/cli # OR yarn global add @vue/cli 安装完成，检查vue版本 vue -V 可以通过一下命令查看vue3.x对应的命令 vue --help # OR v...
VueCLI3安装
m0_54797663的博客
09-11 2900
VueCLI3 安装node.js 下载地址:http://nodejs.cn/download/ 请下载对应的系统和对应的系统位数 软件下载完成后，打开安装界面，一直点击Next即可，无需过多配置。 检查安装是否成功 1. 安装完成后，打开cmd命令，输入node -v与npm -v  2. 显示版本号，说明已经安装成功了 安装脚手架(vue.js) 1. 由于vue使用的是国外的脚手架导致下载速度很慢，所以将脚手架地址改为国内的脚手架，就可以让下载速度变快  2. 一般国内使用的脚手
使用vue-cli3.0创建一个项目
weixin_48187749的博客
06-09 262
使用vue-cli3.0创建一个项目
vue cli-3项目的搭建以及优化
最恨不过不努力
03-29 2147
vue cli-3 项目的搭建以及优化 项目模板参见地址 vue-cli3-template 欢迎star 1.创建一个vue 项目 1.1 node.js 安装 中文官网地址 根据自己的实际需要进行下载 1.2 安装 @vue/cli # 全局安装脚手架 npm install -g @vue/cli # OR yarn global add @vue/cli 1.3 创建项目 vue c...
Vue CLI v3.3.0 快速创建并启动项目全过程
技术能量站
01-12 2924
vue cli 3 介绍 上次用vue的时候，vue cli的版本还是2，对应指令还是 vue init < 模板名称 > < 项目名称 > vue-cli提供的模板有： webpack             一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。 webpack-simple      一个简单...
vue3cli创建项目
瑾年
07-08 113
vue脚手架创建项目
vue-cli3创建项目
05-13
使用vue-cli 3创建项目的步骤如下： 1. 确保已经安装了Node.js和npm。 2. 打开终端或命令行窗口，输入以下命令安装vue-cli 3： ``` npm install -g @vue/cli ``` 3. 创建新项目，输入以下命令： ``` vue create my-project ``` 其中，my-project是你的项目名称，可以自定义。 4. 根据提示选择你需要的配置，或者选择默认配置。 5. 等待安装完成后，进入项目目录，输入以下命令启动项目： ``` cd my-project npm run serve ``` 6. 打开浏览器，在地址栏输入http://localhost:8080，即可查看项目页面。 希望对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值