vue-cli（vue脚手架）超详细教程（包含二版本 ，三版本(推荐)）

最新推荐文章于 2024-05-28 11:10:38 发布
最新推荐文章于 2024-05-28 11:10:38 发布
阅读量3.1k 收藏 11
点赞数 1
分类专栏： vue 文章标签： vue vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45600332/article/details/105744486
版权

一. 安装Vue脚手架

1.1 全局安装vue ui在cmd或者在PowerShell中

全局安装

npm install -g @vue/cli

查看版本 注意这里是大写的V

vue -V

然后使用命令行创建项目my-peoject表示你要创建的项目名称

在这里插入图片描述

回车等地安装：

之后会跳出来几个问题让你回答：如果看不懂往下看1-9
在这里插入图片描述

1.请选择一个预设：default是默认的我们选择第二个点击回车
在这里插入图片描述

  1. 让你选择项目要用到的依赖这里勾选router(路由)点击回车
    在这里插入图片描述
    3.是否使用路由器的历史模式？点击回车
    在这里插入图片描述
    4 . 选择一个代码检查工具选择第三个（标准）点击回车
    在这里插入图片描述
    5.什么时候检查？选第一个是保存的时候检查。点击回车
    在这里插入图片描述
    6.配置文件问题 默认选第一个点击回车在这里插入图片描述
    7.是否希望打成模板填写y点击回车

在这里插入图片描述
8.预设名字填写创建的项目名称就好了点击回车
在这里插入图片描述
9.回车等待安装
安装完成之后就是这个样子啦
然后进入cd到创建项目的目录下，使用npm run serve运行项目就可以啦
在这里插入图片描述
10.在浏览器中输入两个地址的其中一个
在这里插入图片描述
11.看到这个界面就是安装成功啦
在这里插入图片描述
12.以上安装的是三版本的可以通过vue-V查看版本
在这里插入图片描述

1.2如需使用安装二版本请参见如下地址

https://www.jianshu.com/p/32beaca25c0d

月亮不说谎！
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】Vue-cli、Vite相关的脚手架
zhaohb2016的博客
07-29 475
VueCLI致力于将Vue生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需eject。使用Vue-cli是一个基于vue.js进行快速开发的完整系统，运行时的依赖可升级，基于webpack配置，通过插件扩展，@vue/cli是一个全局安装的npm包，提供了终端里的vue命令，可以通过vuecreate快速搭建一个新项目。...
vue-cli2,vue-cli3（vue脚手架）超详细教程
m0_60721514的博客
03-03 145
文章目录 vue-cli脚手架 Node.js环境安装 vue-cli2的安装 npm，cnpm介绍 安装脚手架 用脚手架生成项目目录 vue-cli3的安装 使用vue-cli3图形界面 vue-cli脚手架 顾名思义，脚手架就是用来协助，配合，帮助构建一个项目的。使用vue-cli仅需5分钟就可以搭建一个完整的Vue.js应用,相较于人工操作，具有安全,高效的特点。 vue-cli与平台无关,功能更加齐全。无论是预编译模板，注入依赖，还是模拟生产环境等功能，vue-cli都具
vue-cli（vue脚手架）安装 详细教程
热门推荐
keke2486的博客
08-26 2万+
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 一.安装vue-cli 1、 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.
vue脚手架与创建vue项目
最新发布
qq_48843954的博客
05-28 664
vue脚手架的安装与创建vue项目需要先行安装配置node与npm，详情可以看node、npm的下载、安装、配置_node 下载安装-CSDN博客。
第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架
mebell的专栏
09-18 764
Vue CLI 是一个用于快速搭建 Vue.js 项目的脚手架工具。它集成了开发所需的各种工具和常见配置，让你可以专注于编写代码而不用为构建过程烦恼。本教程将介绍如何使用 Vue CLI 来搭建一个基本的 Vue.js 项目。
Vue CLI脚手架
凉茶铺的博客
01-18 1133
介绍了vue脚手架的安装，和其使用方式
Vue脚手架主流版本介绍
addmt的博客
05-27 151
原文链接：https://blog.csdn.net/Web_Lvz/article/details/130866764。参考文档: https://www.cnblogs.com/wisewrong/p/9740173.html。在vue/cli5.x之后, 项目搭建时,vue.config.js会自动创建, 结构如下。以上是vue/cli 3.x/4.x的写法, 手动创建vue.config.js。publicPath:'/', // 启动页地址。
vue-cli3-template：基于Vue-cli3建造的脚手架项目模板
01-31
项目介绍基于Vue-cli3建造的前端开发脚手架项目模板，主要包括以下内容：Webpack4.x性能调优配置，Vue.js全家桶，移动端vw适应，单元测试等功能，可以参考，欢迎大家围观指教！项目特点特征 巴别塔 VueRouter 威克斯...
webstorm建立vue-cli脚手架的傻瓜式教程
01-18
2、点击 create 后出现以下选项，按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动 3、选择配置，这时你会...
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli脚手架bulid下的配置文件 Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于创建和配置Vue.js项目。通过学习和掌握这些配置文件，可以帮助开发者更好地理解Vue.js项目的结构和工作原理，...
thinkphp集成前端脚手架Vue-cli的教程图解
01-21
本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli。...注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上 1.2 全局安装vue-cli 命令行执行 : npm install -g vue-cli 加-g是安装到全局，有
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的版本命令，以及vue脚手架的版本命令
ONLYSRY的博客
07-15 6379
升级vue至最新版本【vue3.2非常香，反正以后都要用新的，何不直接学新的，setup语法糖了解一下】vue-V或者vue--version。脚手架版本命令，这个大家倒是都知道。
如何搭建一个vue项目
再小的帆也能远航，把分享变成一种习惯
10-10 2178
如何搭建一个vue项目
Vue3+Typescript学习笔记（九）脚手架VueCLi和Vite
coderYYY的博客
08-02 984
关注我，可以收到更新推送哦。
Vue (七) --------- Vue 脚手架
在森林里麋了鹿
06-25 1453
Vue 脚手架概念与基本使用
vue-脚手架
m0_60970928的博客
09-26 400
​ 等待创建项目，稍等一会儿之后，就创建 完成了。，即可打开Vue的网页说明安装成功。
vue-cli(vue脚手架)超详细教程
08-30
Vue CLI（vue脚手架）是一个官方提供的对Vue.js开发的脚手架工具，通过它我们可以快速初始化一个基于Vue.js的项目。下面是一个超详细的Vue CLI教程，包括如何安装、创建项目、常用命令等。 1. 安装Node.js：首先确保已经安装了Node.js，去Node.js官网下载安装包，按照指引完成安装。 2. 安装Vue CLI：打开命令行工具（如终端、命令提示符等），运行以下命令安装Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建Vue项目：在命令行中进入你想要创建项目的目录，运行以下命令创建项目： ``` vue create project-name ``` 其中，`project-name`是你要创建的项目名称，可以根据需要自定义。 4. 选择项目配置：在创建项目的过程中，Vue CLI会让你选择一些项目配置，比如使用的包管理工具、需要的特性等，根据需要选择或者保持默认配置。 5. 运行项目：进入项目目录，运行以下命令启动项目： ``` cd project-name npm run serve ``` 6. 编写代码：打开项目目录，在`src`文件夹下可以看到`main.js`文件，这是项目的入口文件，可以在这里编写Vue代码。 7. 构建项目：完成代码编写后，运行以下命令构建项目： ``` npm run build ``` 这会生成一个可部署的静态网站文件放在`dist`目录下。 8. 常用命令： - `npm run serve`：启动开发服务器，实时编译和热重载。 - `npm run build`：构建生产环境的项目。 - `npm run lint`：检查和修复代码风格。 以上就是一个超详细的Vue CLI教程，希望能够帮到你入门Vue开发。如果想要进一步学习和掌握Vue CLI，建议查阅Vue CLI官方文档，了解更多详细信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值