Vue-脚手架的创建

最新推荐文章于 2024-07-08 16:10:00 发布
最新推荐文章于 2024-07-08 16:10:00 发布
阅读量934 收藏
点赞数 3
分类专栏： vue 文章标签： vue.js vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52998673/article/details/127700825
版权

本篇vue3的脚手架主要是使用vue-cli进行创建，有网的情况下才能创建成功

文章目录

一、下载node.js

1、打开node的官网 node官网
2、点击下方图片的位置进行下载
在这里插入图片描述
3、在cmd终端检查是否安装成功
在这里插入图片描述

二、全局安装@vue/cli

打开cmd终端 输入命令 npm install -g @vue/cli 等下载完成

三、使用vue-cli创建项目

3.1 使用vscode打开终端

在vscode中使用快捷键 Ctrl+` (1左边的符号)
命令框如下：
在这里插入图片描述

3.2 创建项目

1、使用命令 vue create 项目名 创建项目
在这里插入图片描述
2、现阶段选择Manually select features(全手动创建) 随着以后学习的深入可以直接选择Default（[Vue3…]） – 通过键盘上下键进行选择，通过空格键确认，回车进入下一步
在这里插入图片描述
3、选择需要配置的参数（这里直接回车）
在这里插入图片描述
4、选择版本
在这里插入图片描述
5、这时会弹出是否使用history的方式创建路由，默认选择y
在这里插入图片描述
6、选择代码校验规范，默认选择第一项，只进行报错提示
在这里插入图片描述
在这里插入图片描述
7、是否保存模板提示，这里是选择保存模板（可选可不选）在这里插入图片描述
8、没有图片讲解的都选择默认的即可

3.3 创建成功

在这里插入图片描述

四、注意事项

1、vue3在创建时会默认有自带的代码检查机制，为了防止这个检查机制影响后续编码可以在
vue.config.js 文件中添加代码关闭语法检查
在这里插入图片描述

2、当需要将代码拷贝给其他人时，需要对文件进行相关的修改（不必须）因为在文件中node_modules文件夹所占大小达到百兆所以可以将该文件删除，后续需要将该文件加载进入，可以在终端运行命令

3、需要用到两个插件，可在vscode中下载
在这里插入图片描述
在这里插入图片描述

糊涂涂是个小盆友
关注
专栏目录
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 4633
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
2024最新：关于基于vue-cli脚手架创建vue项目（图文版）
m0_69097184的博客
09-21 557
它确保各种构建工具与合理的默认值一起顺利运行，因此您可以专注于编写应用程序，而不是花费数天时间争论配置。同时，它仍然提供了调整每个工具配置的灵活性，而无需弹出。TypeScript 是一个 JavaScript 的超集，包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript 在浏览器运行。代码风格检查和格式化（如：ESLint）【建议选择】vue-router（Vue 路由）【建议选择】。vuex（Vue 的状态管理模式）。E2E（端到端）测试。概述（来源于官方文档）
vue3 脚手架创建项目
PrimaryColor
01-05 314
升级版本（卸载旧版本再安装新版本）： npm uninstall vue-cli -g npm i @vue/cli -g “上下键”切换，“空格”勾选，“回车”确认。 1、创建项目。 2、 3、 4、 5、 6、 7、 8、 9、 10、 11、最后是否保存之前配置的模板，可以选择“y”。 ...
Vue创建脚手架
qq_48617322的博客
09-01 943
vue创建脚手架
使用脚手架搭建vue项目
最新发布
m0_65520060的博客
07-08 812
下面这个是对创建vue项目的方式进行选择，下面主要讲解下面三种方式Default ([Vue 3] babel, eslint) 创建vue3项目（默认配置）Default ([Vue 2] babel, eslint) 创建vue2项目（默认配置）Manually select features 自定义的方式搭建vue项目（重点）下面呢主要对如何自定义配置vue项目来进行讲解（通过上下箭头进行选择，Enter键确定那种搭建模式）
Vue——创建Vue脚手架
m0_53912558的博客
02-19 586
a.安装全局@vue/cli(仅第一次执行，只需要在第一次创建脚手架的时候执行一次，电脑上会多出来一个全新的命令vue，以后创建脚手架时只需要呼唤vue，以后都不需要执行)1)Vue CLI使用的前提Node.js、webpack（npm install webpack -g全局安装）。脚手架作用是创建项目的初始文件，本质是方案的封装。b.执行下列命令，在执行过程中遇到一些警告属于正常现象，如果遇到卡顿的情况按一下回车就行。这是Vue为你准备的hello world组件，到此vue脚手架创建完毕。
vue脚手架的创建
m0_65535661的博客
05-05 866
第一步：.电脑必须装有node，没有node,先去进行安装Node版本，node官网地址：下载 | Node.js 中文网http://nodejs.cn/download/ 第二步：电脑搜索cmd，打开小黑框， 全局下载脚手架，npm install -g @vue/cli(只需要在第一次使用的时候才进行下载，除非你重装系统或者重装node才需要再次进行下载） 第三步：下载完成之后查看版本 vue --version，一般使用的都是5.0版本的脚手架。 第四步：vue create 项目名（弹出来
Vue创建脚手架项目
aa
04-06 778
vue脚手架创建项目要使用Vue脚手架创建一个新的项目，请按照以下步骤操作：确保你已经安装了Node.js和npm。安装Vue CLI（Vue的官方命令行工具）：这里我已经安装完了 从创建项目开始演示打开vscode终端（ctrl + ~）直接输入以下命令我这里创建到C盘上了，你可以切换到别的盘符此时屏幕会显示?选择你要创建vue2或者vue3项目，这里我选的是vue2（键盘上下按键就可以选择,完毕后按回车）此时屏幕会显示一些信息等待即可。
[VUE]通过脚手架创建Vue项目
Lailalalala的博客
08-08 363
Vue.cli创建Vue项目
通过vue脚手架创建项目
weixin_45844109的博客
09-09 429
使用vue-cli脚手架搭建vue开发环境 安装全局vue-cli脚手架，用于帮助搭建vue框架的模板项目。 打开cmd，执行以下指令。 cnpm install vue-cli -g 安装vue脚手架 关闭cmd重新打开，执行以下命令，验证vue安装是否成功 vue vue -V 验证vue安装成功 或者如下： 使用webpack打包工具，启动vue项目 创建一个工作空间用于保存项目，比如本文使用D:\workspace\vs_workspace 打开cmd，通过cd指令进入该目录 进入
vue使用vue-cli快速创建工程
01-19
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 -g代表全局安装。 i就是install的缩写。 其中webpack-simple代表模板的名称。vue-todos是你给自己的项目起的名称，这个随便起...
Vue使用vue-cli创建项目
01-19
vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：https://github.com/Aleczhang1992/my-vue-project/tree/dev 一、步骤 1.要求已安装Node.js (>=4.x, 6.x ...
Vue3：创建脚手架
孤安先生的博客，作者主站正在重构中，敬请期待！
11-18 501
Vue3 运行性能是 Vue2 的 1.5 倍。Vue3 支持 tree-shaking，可以进行按需编译，编译后的文件体积比 Vue2 更小。Vue3 提供更先进的功能，teleport、suspense 等。Vue3 对 TypeScript 的支持更友好，对大型前端应用的支持更好。Vue3 组合式 API 使应用中的功能代码更聚合，使组件间公共逻辑的抽取更容易。Vue3 在 2022年2页左右。使用 Proxy 代替 defineProperty 实现响应式。
【Vue】脚手架搭建
z914020826的博客
11-03 1927
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
vue脚手架创建全过程
weixin_47190975的博客
07-28 2139
vue最新脚手架项目细致的创建过程
vue创建脚手架
qq_47648083的博客
11-30 738
初始化脚手架 一、说明 1.Vue脚手架是Vue官方提供的标准化开发工具 2.具体查看 官方文档 二、具体步骤 1.全局安装@vue/cli（仅第一次执行） 注意：要以管理员的身份打开cmd npm install -g @vue/cli 安装完成后在输入vue，显示下图则证明安装成功 2.切换到要创建项目的目录 ，然后使用命令创建项目 vue create xxxx 自行选择适合的vue版本 3.启动项目 1.先进入创建的文件夹的路径： cd vue_text 2. 然后输入 ： np
如何创建vue脚手架
weixin_52869806的博客
05-14 8257
创建vue脚手架 Vue脚手架是vue官方提供的标准化开发工具(平台) 参照官方文档vue CLI(command line interface)–命令行接口工具 https://cli.vuejs.org/zh/guide/ 确认电脑中未安装vue脚手架 需要先安装node.js 进入官方http://nodejs.cn/ 根据自己的电脑选择下载的版本 双击文件下载 点击下一步，选择安装路径（建议安装到D盘） 一直点击下一步，不需要选择什么，知道finish出现 查看安装环境： Wi
vue创建脚手架项目
m0_62181310的博客
06-14 6382
@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目目录一、创建脚手架项目1.全局安装命令2.查看vue脚手架版本3.@vue/cli 创建脚手架项目-启动3.1 创建项目3.2 选择模板3.3 回车生成文件3.4 进入项目启动文件 二、vue脚手架文件说明1.目录和代码分析2.主要的3个文件和关系 三、vue/cli自定义配置1.自定义服务配置2.eslint暂时关闭设置 四、单vue文件开发五、清空脚手架欢迎界面 2.查看脚手架版本 如果出现版本号就安装成功
mac使用vue-cli创建脚手架
07-15
### 回答1： 使用vue-cli在Mac上创建脚手架的步骤如下： 首先，确保你的机器已经安装了Node.js和npm。你可以在终端中输入以下命令来检查是否已正确安装： $ node -v $ npm -v 如果没有安装，请先安装Node.js和npm。 安装vue-cli，可以使用以下命令： $ npm install -g @vue/cli 安装完成后，你就可以使用vue命令来创建Vue项目了。进入你要创建项目的文件夹，例如，你的项目名为"my-project"，那么你可以在终端中输入以下命令： $ vue create my-project 然后，会提示你选择一些配置项，如babel、Router、Vuex等等。你可以根据需要进行选择，也可以直接按回车键来选择默认配置。 等待一段时间后，Vue脚手架会自动创建并安装所需的文件和依赖项。安装完成后，进入项目文件夹： $ cd my-project 然后，运行以下命令来启动开发服务器： $ npm run serve 在浏览器中打开 http://localhost:8080 就可以看到项目的欢迎界面了。 接下来，你可以根据自己的需求在src目录下进行开发，并使用Vue的语法和组件来构建应用程序。 需要注意的是，vue-cli提供了很多其他命令和功能，如构建生产版本的项目、进行单元测试等等。你可以在官方文档中查找更多相关信息。 以上就是在Mac上使用vue-cli创建脚手架的简单步骤。希望对你有所帮助！ ### 回答2： 在Mac上使用Vue CLI创建脚手架是一种非常方便和快速的方式，下面我会详细说明步骤。 首先，在你的Mac上确保已经安装了Node.js和npm。你可以在终端中输入`node -v`和`npm -v`来检查是否已经安装。如果没有安装，请先安装这两个软件。 接下来，打开终端，并全局安装Vue CLI。在终端中输入以下命令： ``` npm install -g @vue/cli ``` 这样就完成了Vue CLI的安装。 然后，你可以使用以下命令来创建一个新的Vue项目： ``` vue create 项目名 ``` 在这个命令中，你可以替换“项目名”为你自己的项目名称。执行命令后，Vue CLI会为你创建一个新的项目，并自动安装项目所需的所有依赖。 在项目创建完毕后，你可以使用以下命令进入到项目目录中： ``` cd 项目名 ``` 在进入到项目目录后，你可以使用以下命令来启动项目： ``` npm run serve ``` 这样，你就可以在浏览器中访问`http://localhost:8080`来查看你的Vue项目了。 除了创建项目和启动项目，Vue CLI还提供了其他一些有用的命令来帮助你开发和打包项目。例如，你可以使用以下命令来添加新的Vue组件： ``` vue add 组件名 ``` 总结起来，使用Vue CLI在Mac上创建Vue项目非常简单。只需要几个简单的命令，你就可以快速搭建起一个完整的Vue开发环境，方便你开发和管理Vue项目。 ### 回答3： Mac使用vue-cli创建脚手架非常简单。首先，您需要确保您的Mac上已经安装了Node.js和npm。您可以在终端中运行“node -v”和“npm -v”命令来检查它们的版本。 一旦您确认安装了Node.js和npm，您可以使用以下命令全局安装vue-cli： ``` npm install -g @vue/cli ``` 安装完成后，您可以使用以下命令来创建一个新的Vue项目： ``` vue create 项目名称 ``` 如果您希望使用更详细的配置，可以添加“-p”或“--preset”参数并选择一个预设选项。您可以通过运行以下命令来查看可用的预设选项： ``` vue create --preset ``` 一旦您选择了预设选项并输入了项目名称，vue-cli将会下载并安装项目的所有依赖项。这可能需要一些时间，具体取决于您的网络连接和计算机性能。 完成后，您可以使用以下命令进入项目目录： ``` cd 项目名称 ``` 然后，您可以使用以下命令来启动开发服务器： ``` npm run serve ``` 这将启动一个本地服务器，您可以在浏览器中访问项目。默认情况下，服务器将在“http://localhost:8080”上运行。 这只是使用vue-cli创建脚手架的基本过程。您可以通过编辑项目中的源代码以及添加其他插件和库来进一步定制您的Vue项目。祝您使用vue-cli创建出优秀的Vue项目！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值