Vue入门 - vue-cli

最新推荐文章于 2025-07-02 00:15:00 发布
最新推荐文章于 2025-07-02 00:15:00 发布
阅读量347 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 【VUE】 【NodeJs】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shenzhen_zsw/article/details/91840277
本文介绍了Vue CLI的安装、快速上手步骤，详细解析了生成项目的默认结构，并重点讲解了单文件组件的概念和组成部分，最后提到了运行项目的不同脚本选项。

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

Vue入门 - vue-cli

9.vue-cli

9.1.介绍和安装

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。

幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli

使用它能快速的构建一个web工程模板。

官网：https://github.com/vuejs/vue-cli

安装命令：npm install -g vue-cli

9.2.快速上手

我们新建一个module：
在这里插入图片描述

切换到该目录：
在这里插入图片描述

用vue-cli命令，快速搭建一个webpack的项目：vue init webpack
在这里插入图片描述

在这里插入图片描述

前面几项都走默认或yes

下面这些我们选no

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue-Cli详解
qq_41359998的博客
08-17 605
Vue-Cli详解 vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板 ; 预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速; 主要的功能: 统一的目录结构 本地调试 热部署 单元测试 集成打包上线 一、配置Vue-Cli环境 mac 终端命令 配置环境一般需要比较高的权限，最后进入管理员模式，执行命令su 并输入密码 1.首先如果npm的版本不是最新版本，在安装东西时会报错，首先更新np
vue-cli-plugin-quasar：Quasar Framework Vue CLI插件
02-03
类星体框架：vue-cli-plugin-quasar :rocket: 在2分钟内开始使用Quasar Framework构建Vue应用！ :warning_selector: 为了获得Quasar的高级（推荐）体验，包括构建Mobile＆Electron应用程序以及轻松升级到新...
vue-cli
qq_33879627的博客
09-28 513
（十六）vue-cli 16.1 vue-cli起步 16.1.1 什么是vue-cli Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行扩展。 一
03.Vue CLI项目创建详细指南
最新发布
yk_dflkg的博客
07-02 2486
Vue CLI（Command Line Interface）是Vue.js官方提供的标准化命令行工具，用于快速搭建Vue.js项目。它提供了一整套完整的开发环境配置，包括项目结构、构建工具、开发服务器、测试框架等，让开发者可以专注于业务逻辑的开发。
Vue Cli
m0_46966817的博客
07-25 157
Cli是Command-LineInterface，翻译为命令行界面，但是俗称脚手架。runtime+compilertemplate->ast->render->virtualdom->真实DOM。runtime-only[性能更高，代码量更少]render->virtualdom->真实DOM。修改配置可以创建一个vue.config.js文件【后面会进行配置合并】4、VueCli3及以上的项目流程及目录结构。3、vuecli2创建项目流程以及目录结构。...
Vue cli
HBF__cg的博客
05-02 217
vue cli 一、 vue cli是vue提供的一个用于自动化构建和开发项目的工具,也称为脚手架,它是一系列工具的集合 二、主要功能:  1.根据配置选项自动构建服务项目,并安装所需要的依赖  2.启动一个本地开发服务器,通过这个服务器可以基于服务器环境访问本地项目,同时提供了跨域代   理服务  3.项目的自动编译,打包  4.项目测试(单元测试,e2e测试) 三、安装  npm instal...
Vue CLI
qq_63843408的博客
08-16 1087
Vue的使用有 3 种方式：1. 页面引入vue.js，2.CDN引入，3.Vue CLI创建Vue项目。Vue CLI中的CLI是指，即命令行界面。Vue CLI是一个用于快速搭建Vue.js的脚手架工具，通过命令行界面可以方便地创建、管理和构建Vue.js项目。单页面应用（single page application）：简称 SPA，通俗点说就是只有的应用。
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
vue-cli-plugin-element-Vue CLI 3插件，可在几秒钟内用element-ui构建企业应用程序-Vue.js开发
05-27
vue-cli-plugin-element可以在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该项目不仅是vue-cli插件，而且是vue-cli-plugin-element，可在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该...
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！ 您准备好出发了！ 要启动开发服务器，请执行以下操作：如果您使用Yarn（强烈建议使用）：yarn ...
fast-vuecli-starter：快速-vuecli-starter
02-04
fast-vuecli-starter/ ├── src/ │ ├── __tests__/ │ │ ├── api.test.js │ │ ├── card.test.js │ │ └── store.test.js │ │ │ ├── components/ │ │ └── Card.vue │ │ │ ├── ...
vue之Vue CLI
WHTGS的博客
04-08 274
通过vue cli 可以快速进行vue项目的框架搭建，接下来对其搭建和使用进行简单的介绍。 一、全局安装： npm install -g @vue/cli 二、创建一个vue项目 1 vue create 项目名称（比如：test）回车 2 选择手动选择功能 正常情况选择 babel router vuex css 就够了，其它根据情况选择（选择时按空格键）如下图： 3 路由选择 n代表ha...
快速构建Vue项目：fast-vuecli-starter使用教程
标题：“fast-vuecli-starter：快速-vuecli-starter”所指的知识点主要涉及如何利用Vue CLI工具快速搭建一个Vue.js项目的开发环境。Vue CLI是一个基于Vue.js进行快速开发的完整系统，它为用户提供了项目脚手架搭建、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值