Vue脚手架项目

文章介绍了VueCLI的基本概念,包括其主要工具如CLI、CLIService和插件,以及如何进行项目环境配置(如安装Node和VScode),并通过vuecreate命令快速创建Vue项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

Vue脚手架(Vue CLI)是一个官方提供的命令行工具,用于快速搭建和管理Vue.js项目的开发环境。它提供了一套可配置的脚手架,帮助开发者初始化Vue项目,并集成了开发所需的工具和依赖项,包括构建工具、开发服务器、打包工具等。babel、webpack都集成在其中。


一、Vue CLI三个主要工具

1、 CLI

CLI是一个npm包,通过Vue.js命令提供核心功能。它可以轻松构建一个新项目,同时,如果你希望通过可视化界面来构建(创建)项目的话,你可以运行vue ui命令行来打开可视化界面。

2、 CLI Service

CLI Service是一个开发依赖项,安装在脚手架项目当中,可以帮助开发项目、打包项目和检查项目的一些相关配置。

3.、CLI插件

CLI插件也是npm的包,可以为项目提供一些额外的功能,在开发的过程中,可以通过命令行vue add添加CLI插件,比如路由插件(vue-router)、vuex插件等等。

二、vue脚手架项目环境配置

1、下载安装node,下载之后一步步默认安装即可。

  1. 点击这个下载地址

  2. PS:检查node是否安装成功,并查看版本号:按住电脑的win+R键盘,调出终端控制台,输入命令行:node -v或node --version,如果能出现以下界面,即代码node安装成功。

在这里插入图片描述

2、下载安装VScode代码编辑工具

VScode代码编辑工具点击下载 然后安装按步骤来就不会出错了

3、vue2项目调试插件,下载vue.js_devtools,项目使用此插件

  1. 下载,解压

  2. 在浏览器打开,点击扩展

  3. 然后开启开发者模式
    在这里插入图片描述

  4. 最后把.crx结尾的文件拖入浏览器的扩展程序中即可使用。

三、使用Vue Cli快速构建项目

1、vue cli 脚手架的安装

 //  通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本,如果不写,则下载最新版本
           `npm install -g @vue/cli`
            PS:如果使用npm方式安装脚手架速度太慢,或者是卡死的话,可以选择淘宝镜像cnpm的方式安装
           //安装淘宝镜像的命令行
           ①  npm install -g cnpm --registry=https://registry.npmmirror.com
          // 如果安装了cnpm淘宝镜像的话,可使用下面的命令行安装@vue/cli脚手架,网速会相对来说快一些
           ②  cnpm install -g @vue/cli
          //PS:如需要卸载vue/cli包,可执行以下命令行
          npm uninstall -g @vue/cli 注意:最近发现很多同学使用npm命令经常容易出现卡死不懂是情况,如出现这种情况,清执行此命令,即可解决: npm config set
 registry https://registry.npm.taobao.org  或者,哪个方式快,用哪个 npm config set registry https://registry.npmmirror.com

如下操作步骤

1.步骤一
在这里插入图片描述
2.步骤二
成功安装界面:
在这里插入图片描述
3.步骤三

重新打开cmd命令符,输入vue -V

再次检查是否存在
在这里插入图片描述
存在后,就可以进行下一个操作了

2、vue create 命令创建项目

1.在创建vue create操作之前,可以先将自己所要创建的项目指定到相应的文件夹中(下图是我本人想要指定的文件夹)存在指定的文件夹最好不要存在有中文 ,不然可能会出错!!!
在这里插入图片描述
2.再创建vue create创建项目

//tuxiang 是项目名,可自行定义
vue create tuxiang
输入完后就会出现下图模样

在这里插入图片描述

3.在这个步骤中,可以使用键盘的↑和↓方向键选择创建项目的方式,default是默认选择项,表示使用默认的方式创建项目;Manually select features选项表示使用手动配置方式创建项目,在这里,我们选择手动的方式创建,手动配置界面如下图所示:在这里插入图片描述
4.此界面中,可以使用键盘的↑和↓方向键选择创建项目的方式,按住空格键选择某一项,再次按住空格键,取消选择,每个配置项的作用如下表所示:

配置项说明
BabelJavaScript语法编译器
TypeScriptTypeScript是JavaScript的超集,其包含了并扩展了JavaScript的语法,需要被编译输出为JavaScript才能在浏览器运行
Progressive Web App (PWA) Support渐进式Web应用程序
Routervue-router(vue路由)
Vuexvue的状态管理模式
CSS Pre-processorsCSS预处理器,如less或sass
Linter/Formatter代码风格检查和格式化(如:ESlint)
Unit Testing单元测试(unit tests)
E2E Testing端对端测试

5.然后回车,大家根据需求选择相应的配置项,一步步往后创建项目即可。项目创建成功之后,根据界面提示,可以执行如下两个命令行,进入项目目录,启动项目:
在这里插入图片描述

(1)cd tuxiang
(2)npm run serve
(3)项目加载完成

(1)在这里插入图片描述
(2)
在这里插入图片描述
(3)
在这里插入图片描述
6.接下来,在浏览器输入:http://localhost:8080/ 地址,即可看到如下页面
在这里插入图片描述
7.(我用的是tuxiang) 项目创建成功之后,可以看到项目的目录结构如图所示:
在这里插入图片描述
8.使用Visual Studio Code,可进行运行与添加项目里面的内容与修改,我上一个文章也简单说明了下载Visual Studio Code和如何运行等等,可以去看一下

Visual Studio Code目录结构说明如下:

在这里插入图片描述

总结

这个也是我这段时间学到的,希望对大家有用,有写得不好的地方,也请大家多多见谅!
最后,祝大家学习进步,快快乐乐度过每一天!

创建Vue脚手架项目是通过使用vue-cli这个工具进行的。vue-cli是一个对Vue项目构造做了封装的脚手架工具,它可以帮助我们快速创建Vue项目,并且自动完成一些常用的配置,省去了手动配置webpack的过程。 下面是创建Vue脚手架项目的一些步骤: 1. 首先,你需要安装Node.js和npm,因为vue-cli是基于Node.js的命令行工具。 2. 安装vue-cli:通过运行命令`npm install -g @vue/cli`来全局安装vue-cli。 3. 创建项目:使用命令`vue create project-name`来创建一个新的Vue项目,其中project-name是你自己定义的项目名称。 4. 根据提示进行配置:在创建项目的过程中,你可以选择手动配置或者使用默认配置来初始化项目。你可以根据自己的需要进行选择。 5. 安装依赖:创建完成后,进入项目目录并运行`npm install`命令来安装项目所需的依赖。 6. 启动项目:安装完成后,可以通过运行`npm run serve`命令来启动开发服务器,然后在浏览器中访问http://localhost:8080来预览你的项目。 在创建完成后,你可以在生成的项目中找到一些由脚手架自动生成的文件,如App.vue和main.js。这些文件是构建Vue项目的基础,你可以在其中编写组件和配置项目的入口文件。 总结来说,通过使用vue-cli工具,你可以快速创建并初始化Vue项目,省去了手动配置的繁琐过程,让你能够更专注于开发自己的应用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [VUE——使用VUE脚手架创建项目](https://blog.csdn.net/weixin_68567820/article/details/125379407)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [基于脚手架创建Vue项目实现步骤详解](https://download.csdn.net/download/weixin_38550605/12924495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值