基于3.x和2.x版本的vue-cli脚手架搭建vue项目大全

已于 2022-03-25 17:32:01 修改
阅读量986 收藏 1
点赞数
文章标签： vue.js npm javascript
于 2022-03-11 18:00:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jgujgu/article/details/123426479
版权
本文详细介绍了如何使用vue-cli 3.x和2.x版本搭建vue项目，包括交互式命令、图形化界面和旧版模版创建方法。内容涵盖项目配置、选择功能、ESLint设置以及模板保存，旨在提供全面的搭建教程。
摘要由CSDN通过智能技术生成

首先我们电脑先安装vue脚手架
最好安装3.x的版本，3.x版本同时也可以创建2.x的项目；

npm install -g @vue/cli

基于3.x版本的脚手架创建vue项目

1、基于 交互式命令 的方式，创建新版本vue项目

vue create my-project

在这里插入图片描述
出现这个是问你使用默认模版还是手动创建；（我一般会选第二个手动创建）
在这里插入图片描述
你可以自定义安装需要的功能，这里我安装了babel、router、linter（上下键移动位置，使用空格键来选中）然后回车下一步；
在这里插入图片描述
问你是否安装历史模式的路由（n 是hash）
在这里插入图片描述
问你使用那个版本的ESLint 我们一般使用标准类型的

最低0.47元/天 解锁文章
蜡笔大帅
关注
【Vue学习笔记_14】Vue CLI 2&3 脚手架
weixin_44752429的博客
11-28 628
【Vue学习笔记_14】Vue CLI 2&3 脚手架Vue CLI 初识Vue CLI 2初始化项目ESLint规范Runtime-only和Runtime+Compiler的区别目录结构解析Vue CLI 3Vue CLI3与Vue CLI2的区别初始化项目目录结构解析Vue CLI3配置文件的查看和修改 配套可执行代码示例 => GitHub Vue CLI 初识 需求：使用Vue开发大型项目时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情，如果每个项目都要手动完
Vue脚手架搭建项目
m0_59075169的博客
06-13 548
Vue脚手项目
Vue脚手架的安装（超详细篇，保姆级教程）
最新发布
cfjbcg的博客
08-06 1747
打开一下你刚刚的安装目录nvm，双击打开，找到settings.txt，然后用记事本编辑打开，复制粘贴。nvm install 14 nvm install latest // 安装最新版本node。-g的意识是全局安装，就-g和-s，-s是局部安装，就是只在当前项目可以使用。这边的安装版本可以跟我的一样，安装16.20.2和14.21.3的版本。可以看到这个就说明你刚刚安装的版本成功了！16版本的node就是跟着8版本的npm。14版本的node就是跟着6版本的npm。在这边进行项目的运行，快捷键。
搭建vue-cli脚手架3.x版本和2.x版本项目
qq_32755875的博客
05-08 635
命令行搭建 一、 3.x版本 1、 安装 3.x 版本的 Vue 脚手架： npm install -g @vue/cli 2、基于交互式命令行的方式，创建3.x版vue项目 输入vue create 新建项目名称，然后开始进行如图所示的项目配置 安装成功后会显示安装成功，并提示运行项目的命令 3、运行上图的命令 cd 你刚刚创建的项目名称 npm run serve 然后会提示你项目开始启动… 见到如下页面说明搭建成功 一、 2.x版本 1、 安装 2.x 版本的 Vue 脚手架： npm i
vue脚手架的搭建2.0和3.0
Lazy_Goat的博客
10-22 987
1.首先安装nodejs，查看node版本。 安装npm，查看npm版本 全局安装webpack。先安装3.0版本，vuecli2依赖3.0版本。 局部安装，先进入项目目录，执行 初始化项目之后，执行 只需要安装一次 vue-cli2 2.安装vue-cli2 切换淘宝镜像： npm install cnpm -g --registry=https://registry.npm.taobao.org 创建项目：Vue init webpack 项目名 选项使用这里的选项： 使用vscode打
vue/cli@3.x
神zhi殇的博客
01-28 250
旧版本：npm install -g vue-cli 新版本：npm install -g @vue/cli 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。
vue-cli3.0 脚手架搭建项目的过程详解
10-17
Vue CLI 3.0 是 Vue.js 官方提供的一个强大脚手架工具，它简化了 Vue.js 项目的初始化和构建过程。本篇文章将详细介绍如何使用 Vue CLI 3.0 来搭建一个新的 Vue 项目。 首先，你需要确保已经安装了 Node.js 和 npm...
基于vue-cli3脚手架搭建的项目模板
02-19
在这个基于 Vue CLI 3 脚手架搭建的项目模板中，我们将深入探讨相关的知识点。 首先，Vue CLI 3 提供了一个可自定义的项目模板，允许开发者根据需求选择不同的预设或构建配置。这个项目模板很可能包含了基本的 Vue....
详解如何使用vue-cli脚手架搭建Vue.js项目
10-19
- 使用vue-cli脚手架创建的项目已经包含了热加载、代码检查、单元测试和CSS分离等现代Web开发所需的功能。 - Vue.js项目的目录结构是预设好的，这包括源码、资源、构建配置等不同部分的文件夹。 - 在进行项目开发时...
vue2 vs vue3 -- vue与脚手架之间的关系（从新建环境开始）vue2、vue3手脚架搭建一个项目实操
Penk的博客
11-22 1462
了解vue与脚手架之间的关系。 从新建搭建环境开始到新建项目，到启动项目。从webpack，到vue.config.js，从vue2到vue3。
深度解析 vue cli 2.x 与Vue-cli3.x的项目架构
weixin_44099397的博客
09-19 931
node -v npm -v cnpm -v vue -V 深度解析 vue cli 2.x 与Vue-cli3.x的项目架构 vue cli3.x： 去掉了 vue cli2.x build和config等目录，大部分配置都集成到了vue.config.js这里面了。需要拓展的话，在vue.config.js里面拓展。 vue.config.js里大概包括了配置 常用的输出 根目录 预处理 de...
推荐 7 个 Vue2、Vue3 源码解密分析的重磅开源项目
全栈修炼
03-22 1719
大家好，我是你们的 猫哥，那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~1. 为什么要学习源码 ?阅读优秀的代码的目的是让我们能够写出优秀的代码。不给自己设限，不要让你周围人的技术上限成为你的上...
vue-cli脚手架Vue2.x与Vue3.x安装与预设
m0_51062476的博客
08-23 686
https://next.router.vuejs.org/vue路由 https://v3.cn.vuejs.org/vue官网 Vue.js中this.$nextTick()的使用 vue里ref ($refs)用法
Vue-cli脚手架2.0和3.0创建项目的区别
轻风细雨_林木木
10-16 451
一般表示下一个发布的版本，但它只是一个标识，用来找到对应的版本，需要项目开发者打包上传的时候手动添加。（人话就是，@next 一般表示最新版本，但实际还是要看开发者设置的具体是什么）安装 node.js -> 安装webpack -> 安装vue脚手架 -> 启动vue ui ，即可启动。存在vue-cli3.0后，安装2.0需要一个。才能使 vue-cli 2.x创建项目。vue-cli2.0 配置主要通过，vue-cli3.0 中，主要通过。，会对应到模块的一个具体版本；
11-Vue脚手架
码字不易，大家的支持就是我坚持下去的动力
12-07 754
Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。Vue脚手架的最新版本是4.x，这个版本和项目使用的Vue版本无关。全局安装脚手架：
vue-cli（vue脚手架）超详细教程（包含二版本 ，三版本(推荐)）
月亮不说谎! 的博客
04-25 3168
一. 安装Vue脚手架 1.1 全局安装vue ui在cmd或者在PowerShell中 全局安装 npm install -g @vue/cli 查看版本 注意这里是大写的V vue -V 然后使用命令行创建项目my-peoject表示你要创建的项目名称 回车等地安装： 之后会跳出来几个问题让你回答：如果看不懂往下看1-9 1.请选择一个预设：default是默认的我们选择第二个点击...
新版vue脚手架安装
无八哥
06-08 911
mac和windows都适用，mac需要sudo，win不需要先安装这个（无脑安装，一直点下一个） http://nodejs.cn/download/ 查看版本 2.安装Vue 下载脚手架 查看版本 创建项目 运行项目 使用webpack搭建项目失败 使用npm报错 使用sudo npm install -g @vue/cli-init......
vue脚手架(vue-cli)快速搭建项目教程(最新版)
m0_58697127的博客
01-20 854
vue-cli3安装两种方式： 方式一：npm安装vue-cli 执行命令：npm install -g @vue/cli 方式二：淘宝镜像cnpm安装vue-cli 执行命令：cnpm install -g @vue/cli 检查vue-cli安装好了没 执行命令vue -V 3.vue-cli3创建项目的两种方式 方式一：vue-cli3图形界面（好处就是方便、直观） 执行命令：vue ui ​​​​​ 方式二：v...
Vue.js项目开发：使用vue-cli搭建脚手架指南
"这篇文档详细介绍了如何使用vue-cli搭建基于Vue.js的开发脚手架，同时涉及到了Node.js环境的安装、npm包管理工具以及Webpack自动化构建工具的使用。" 在现代前端开发中，Vue.js作为一款轻量级且功能强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值