vue-cli3.0配置安装

Vue CLI升级与项目创建
最新推荐文章于 2022-05-27 12:30:26 发布
原创 最新推荐文章于 2022-05-27 12:30:26 发布 · 520 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何卸载旧版Vue CLI并安装新版，通过全局安装@vue/cli。随后指导如何创建一个名为client的新项目，包括配置选择、依赖安装及项目启动等关键步骤。
1.首先卸载旧的版本
npm uninstall vue-cli -g
2.使用新的命令安装到全局
cnpm install @vue/cli -g

或者

yarn global add @vue/cli
3.创建项目

创建一个名为client的项目

vue create client

这里会提示用默认的npm安装会很慢，是否切换到淘宝的地址，输入y
在这里插入图片描述

3.配置选择

第一个是默认配置，第二个是自定义，可以通过键盘上下箭头切换选择，我们选择第二个
在这里插入图片描述

空格键可以切换选中状态，这里选择常用的三个
在这里插入图片描述

用历史router模型

输入y
在这里插入图片描述

选择package.json

在这里插入图片描述

是否把这次的配置保存为未来项目的预设

输入n
在这里插入图片描述

项目配置完成后开始安装

开始安装，直至安装完成
在这里插入图片描述

启动项目

进入client目录，启动项目

cd client
npm run serve

在这里插入图片描述
在这里插入图片描述

vue-cli3.0 脚手架搭建项目的过程详解
10-17
然后，你可以通过以下命令全局安装 Vue CLI 3.0： ```bash npm install -g @vue/cli # 或者使用 yarn yarn global add @vue/cli ``` 安装完成后，运行 `vue -V` 检查版本，确保安装成功。 接下来，你可以使用 `...
深入浅析vue-cli@3.0 使用及配置说明
10-17
在深入探讨vue-cli@3.0的使用及配置说明之前，我们先简单回顾一下vue-cli的背景。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而vue-cli是Vue.js的官方脚手架工具，旨在帮助开发者快速搭建Vue.js项目的...
vue-cli 3.0 安装 (一)
如果没有_明天
10-08 145
安装 cli npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个新项目 vue create hello-world 通过空格键和上下键选择配置 挺简单的 Tips: 不要用git base 这种工具创建 GUI 使用vue ui进行图形界面创建和管理项目 vue ui 下一步了解下 cli 的配置 ...
用vue-cli3.0安装脚手架
caimingxian401的博客
06-05 7960
vue-cli 3.0 正式版在18年 8月10号发布了！作为前端，当然是得赶紧用起来才能跟上脚步，而且不用不知道，一用就会爱上，因为3.0的版本，比2.0的配置文件简洁了很多，它好像是将大部分配置都放在了node_modules里面了。所以生成的脚手架只有两个主文件夹了。 因为我电脑之前用的是vue-cli2.0，所以要先卸了2.0的先： npm uninstall -g vue-cl...
vue-cli3.0的安装使用
rainbow8300的博客
03-11 1041
怎么办我也很绝望，在我学习vue的路上杀出来个程咬金——vue-cli3.0，能怎么办，盘它！ 下面记录一下我在首次使用vue-cli3.0的过程 第一步：卸载自己的vue-cli npm uninstall vue-cli -g // 官网指出还可以用yarn global remove vue-cli进行卸载 第二步：安装vue-cli3.0 npm install -g @vue/c...
VUE安装
liguangix的博客
05-20 1282
VUE安装教程 —— 新手必备VUE之windows安装VUE介绍vue安装必不可少的环境创建项目项目目录介绍 VUE之windows安装 VUE介绍 VUE作为目前常用的一种前端技术，现在已经被广泛使用了，当然它也确实比较简单好用，并且是轻量级。 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。V...
VUE3.0的改变
一入前端深似海
11-07 2929
文章地址点我跳转 英文原文：https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf
vue-cli V3.0版本的使用详解
10-17
通过本文，我们来详细介绍如何使用Vue-cli V3.0版本创建和配置Vue项目。 1. Vue-cli V3.0版本概述 Vue-cli V3.0是Vue.js官方提供的一个完整、灵活的Vue.js项目脚手架，它通过预设的配置能够快速开始项目开发。随着V...
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
10-17
在使用Vue CLI 3.0构建项目时，经常会遇到打包后文件体积过大的问题，尤其当构建一个单页应用(SPA)时，首屏加载速度成为影响用户体验的重要因素。首屏加载时间过长会直接导致用户感觉网页响应缓慢，从而降低用户满意...
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
10-17
vue-cli 3.0相较于之前的版本在项目构建和配置方面做了较大的改进，提供了更多的默认配置，使得项目搭建更为简便。 在多页应用（MPA，Multiple Page Application）开发模式中，每个页面都有自己独立的入口文件和...
vue-cli 版本3.0项目搭建和详解
一个懒惰前端的博客
05-27 7184
介绍 首先官方文档：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.0安装及配置（完整版）
热门推荐
qq_36711388的博客
03-11 3万+
这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个， 这里是 让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个 当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键 选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步，这里 演示，我随便选了几个 下一步之后问询问你安装哪一种 CSS 预处理语言，你随...
基于@vue/cli 3.0 快速构建vue 项目
奋斗的小绿萝
07-31 3万+
写在前面的话： vue命令行工具的包名字已经从vue-cli变成了@vue/cli，@vue/cli 是vue 的3.x版本，而vue-cli的最高版本目前只到 @2.9.6。如果你原先在电脑上全局安装过vue-cli，需要先执行 npm uninstall vue-cli -g 或者 yarn global remove vue-cli 将其卸载掉。 一、安装 @vue/cli ...
一份超级详细的Vue-cli3.0使用教程[赶紧来试试！]
weixin_34306593的博客
11-15 1050
前言 在vue-cli 2.X的时候，也写过一篇类似的文章，在八月份的时候vue-cli已经更新到了3.X，新版本的脚手架，功能灰常强大，试用过后非常喜欢，写篇教程来帮助各位踩一下坑。 游泳、健身了解一下：博客、前端积累文档、公众号、GitHub 主要内容： 零配置启动/打包一个.vue文件 详细的搭建过程 重点推荐：使用图形化界面创建/管理/运行项目 安装： 卸载旧版本： 如果你事先已...
自定义vue-cli3项目配置
花神的博客
10-29 3653
修改默认配置 vue.config.js module.exports = { outputDir: 'docs', baseUrl: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/' } 官方文档： 具体配置 去掉console.log提醒 package.json "rules": { "no-cons...
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-cli实现Markdown解析为Html以及highlight高亮代码块
weixin_33834679的博客
01-12 1203
2019独角兽企业重金招聘Python工程师标准>>> ...
vue-cli@3.0 使用及配置说明
weixin_34354945的博客
05-07 1168
使用vue-cli3已经有相当一段时间了，一直没怎么去注意其中的配置，所以趁着这段时间总结下应用过程中的一些经验，本文是从安装到开发使用的一个过程讲解，也可以说是新手向的文章，文字有点多，请耐心观看。 （一）安装： 1、下载安装node: 登陆node官网 并选择自己合适的node版本进行安装； 2、安装vue-cli脚手架工具 npm install -g @vue/cli # OR # 推...
Vue-cli3.0配置教程：详细解析vue.config.js
### Vue-cli 3.0 配置基础知识点 Vue-cli 3.0 是 Vue.js 官方提供的一个完整 Vue.js 开发工具链，它提供了一个快速构建项目的基础配置，极大地简化了项目的搭建和配置流程。接下来，我们将详细探讨在使用 vue-cli ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值