vue 脚手架(vue CLI)安装以及项目的创建

Vue2项目搭建：配置Babel和ESLint
最新推荐文章于 2024-06-17 06:00:00 发布
原创 最新推荐文章于 2024-06-17 06:00:00 发布 · 167 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue-cli3

本文详细指导如何使用Vue CLI安装淘宝镜像，配置ES6转ES5的Babel和语法检查工具ESLint，适合初学者快速上手Vue2项目开发。

选择时,不要出现,你选了一个vue的高版本,但是脚手架版本很低

CLI全称

命令行接口工具

 

 

步骤一、

并且在cmd执行npm时,要进行淘宝镜像,否则会很慢

 

安装完毕重新打开cmd输入vue

 

步骤二、 

 

 

 进行项目配置

1.我们这边选择vue2 这边的babel是专门做把es6 会转化成es5的

而eslint是语法检查的

创建成功

 

 

 步骤三、启用项目

 

 

 

 

 

 

 

脚手架vue-cli自定义创建Vue项目，完整详细步骤！
共同学习，共同成长
06-04 929
脚手架vue-cli自定义创建Vue项目，完整详细步骤！
Vue-Cli - Vue 脚手架的创建 以及 目录结构说明
CYK_byte的博客
10-18 3446
f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.
vue脚手架安装过程
01-29
vue脚手架安装过程,只是简单的介绍了vue-cli的安装过程
vue-cli安装
可爱又迷人的反派少女
12-21 229
vue2.0 1.全局安装webpack npm install webpack -g 2.全局安装vue-cli npm install vue-cli -g 以上两步只需要安装一次 下面就是创建项目 3.vue init webpack demo 项目名称为小写名字即可 4.cd demo 进入创建的文件中 5.npm run dev 启动项目 ...
精选资源
Vue 安装 vue-cli 脚手架 & 创建 vue 项目
01-06
windows vue vue-cli 安装 macos 前往 node.js 官网下载 MacOS 版然后无脑下一步。安装完成后验证一下。 node -v # 验证 nodejs 版本 npm -v # 验证 npm 版本 切换 npm 为淘宝源。 // 切换到淘宝镜像 npm config ...
VUE3脚手架工具cli配置搭建及创建VUE3工程
雾林小妖的博客
06-17 4388
VUE3脚手架工具cli配置搭建及创建VUE工程
Mac Vue脚手架vue-cli 安装&卸载
m0_73783485的博客
08-10 978
Vue Mac脚手架安装与卸载 和本地安装 全局安装及cmd指令
Vue-Cli的安装
YYYYYG_的博客
05-07 526
一、安装vue-cli 安装vue-cli的前提是你已经安装了npm，可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。 npm/cnpm install vue-cli -g cnpm是淘宝镜像，安装会快一些。 二、初始化项目 vue init <template-name> <project-name> 例子 vue init webpack v...
vue-cli 安装
博客
01-19 513
使用脚手架工具 vue-cli 可以快速地构建项目安装过程：1、全局安装 ： npm install -g vue-cli2、初始化webpack: vue init webpack my-test(工程名称)3、根据提示走4、进入你的工程目录 ： cd my-test5、下载所有配置文件的内容： npm install6、热加载（启动服务器）： npm run dev注：第六步如果报错，node.
vue-cli的安装
m0_51437180的博客
11-13 214
vue-cli安装
前端基础-Vue.js构建一个项目
逍遥云恋
03-26 659
第12章 构建一个项目 12.0 命令行工具 (CLI) https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included ...
Vue-vue-cli的安装
莫莫
06-19 888
Vue脚手架---vue-cli的安装安装vue-cli1. 安装node.js2. 全局安装nrm（用来切换下载源）3. 全局安装脚手架（vue-cli)4. 创建项目进入创建好的项目文件夹运行项目---不要关闭命令窗口浏览器运行---命令窗口会给出运行地址 安装vue-cli 1. 安装node.js 下载Node.js Node.js地址 键盘win+R键 打开运行，输入cmd 输入：node -V 查看版本，如果安装成功则可以查看 2. 全局安装nrm（用来切换下载源） npm i
安装vue-cli
weixin_43145591的博客
02-23 214
在将vue基础学完之后，熟悉了webpack的基础配置今天学习vue/vli 在开始安装的时候 npm i -g @vue/cli安装失败。错误提示。乱七八糟看不懂。然后运用管理员权限，提示core-js版本低，然后将core-js@2卸载 npm uninstall core-js@2.下载了npm install core-js@3. vue/cli安装要再有vue。webpack的项目下安装...
[Vue-CLI] 一、vue-cli安装
艾二古的博客
05-22 177
一、安装Node 1、安装NodeJS 网址：下载 | Node.js 中文网 2、检测版本 node -v npm -v 3、什么是npm？ npm --- Node Package Manager，是一个NodeJS包管理和分发工具。 二、安装Vue-CLI 1、安装命令 npm install @vue/cli -g 如果想用CLI 2版本，使用下面命令拉取2.x模板： npm install @vue/cli-init -g 2、初始化项目 Vue CLI2初始化
安装Vue脚手架vue-cli
最新发布
05-01
<think>好的，我现在需要帮助用户解决如何安装Vue CLI脚手架工具的问题。首先，我需要回顾用户提供的引用内容，看看里面有哪些有用的信息。 用户给出的引用[1]提到了安装最新版的@vue/cli，需要Node.js版本8.11.0+，并说明了卸载旧版的方法。引用[2]提到如果安装cli3失败，可以用cnpm安装，还提到了cli2的兼容性问题。引用[3]则提到使用nvm管理多版本Node.js。 接下来，我应该按照逻辑分步骤说明安装过程。首先确保Node.js和npm已正确安装，并检查版本是否符合要求。如果用户之前安装过旧版vue-cli，需要先卸载，再安装新版。然后介绍使用npm或yarn全局安装Vue CLI，验证安装是否成功。可能还需要补充cnpm的安装方法，以防npm速度慢或失败的情况。 另外，用户可能遇到的问题包括旧版本未卸载干净、Node.js版本过低、网络问题导致安装失败，这些都需要在注意事项里提到。比如，建议使用nvm管理Node版本，或者换用yarn/cnpm来安装。 最后，根据用户的历史问题，生成相关问题，比如如何创建项目、升级Vue CLI、切换Node版本等。确保回答结构清晰，步骤明确，并覆盖常见问题。</think>### 分步安装 Vue CLI 脚手架指南 #### 一、环境准备 1. **安装 Node.js** Vue CLI 需要 Node.js 8.11.0 或更高版本（推荐 12+）。 - 官网下载安装包：[Node.js 官网](https://nodejs.org) - 验证安装： ```bash node -v # 查看 Node.js 版本 npm -v # 查看 npm 版本 ``` 2. **多版本管理（可选）** 如需管理多个 Node.js 版本，可使用 `nvm` 工具[^3]： ```bash # Windows 安装 nvm choco install nvm # macOS/Linux 安装 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash ``` --- #### 二、卸载旧版脚手架（如有） 如果已安装过 `vue-cli`（旧版），需先卸载： ```bash # 使用 npm 卸载 npm uninstall vue-cli -g # 使用 yarn 卸载 yarn global remove vue-cli ``` --- #### 三、安装 Vue CLI 1. **全局安装最新版** ```bash # 使用 npm npm install -g @vue/cli # 使用 yarn yarn global add @vue/cli ``` 2. **验证安装** ```bash vue --version # 显示版本号即成功，如 @vue/cli 5.0.8 ``` --- #### 四、兼容旧版 CLI（可选） 如需使用 Vue CLI 2.x 模板创建项目： ```bash # 安装桥接工具 npm install -g @vue/cli-init # 使用旧版命令创建项目 vue init webpack my-project ``` --- #### 五、常见问题解决 | 问题类型 | 解决方案 | |------------------------|--------------------------------------------------------------------------| | 安装速度慢 | 使用淘宝镜像：`npm install -g cnpm --registry=https://registry.npmmirror.com`，再用 `cnpm` 安装 | | 权限不足（macOS/Linux）| 在命令前加 `sudo`：`sudo npm install -g @vue/cli` | | 版本冲突 | 通过 `nvm use [版本号]` 切换 Node.js 版本[^3] | --- ### 创建第一个项目 ```bash vue create my-project # 使用交互式配置 cd my-project npm run serve ``` ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值