使用 Vue-cli 脚手架创建项目

已于 2022-10-13 22:26:25 修改
阅读量2.1k 收藏 10
点赞数
分类专栏： Vue3 文章标签： npm 项目管理 javascript vue vue-cli3
于 2021-07-14 14:18:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47901007/article/details/118724726
版权
本文详细介绍了在WIN10系统下，如何一步步使用Vue-cli创建Vue项目，包括安装npm，进入命令行，安装Vue-cli，创建项目，以及启动项目。同时推荐了Vetur插件，它为Vue代码提供代码高亮和感知功能。
摘要由CSDN通过智能技术生成

文章目录

本次以WIN10系统为例，其他系统略有差异。

第一步，安装npm：进入Node.js官网下载左侧稳定版，因为node包含npm

由于node包含npm，所以我们只需要安装node就好了。

进入Node.js官网首页下载左侧稳定版，根据提示安装即可。没什么特殊注意的情况，这里就不做演示了，安装过的同学可以跳过这一步。

在这里插入图片描述

第二步，进入命令行：按下键盘 WIN+R 键，输入 cmd 回车进入命令行

按下键盘 WIN+R 键，输入 cmd 回车进入命令行。

在这里插入图片描述

安装过的同学，可以输入 npm -v 查看npm的版本：

	npm -v

输入node -v 查看 node.js 的版本：

	node -v

版本过低的建议升级。

在命令行中点击鼠标右键进行粘贴

在这里插入图片描述

第三步，安装Vue-cli脚手架工具：在命令行输入 npm install @v

最低0.47元/天 解锁文章
爱划水de鲸鱼哥～
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue创建脚手架项目
m0_62181310的博客
06-14 6139
@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目目录一、创建脚手架项目1.全局安装命令2.查看vue脚手架版本3.@vue/cli 创建脚手架项目-启动3.1 创建项目3.2 选择模板3.3 回车生成文件3.4 进入项目启动文件 二、vue脚手架文件说明1.目录和代码分析2.主要的3个文件和关系 三、vue/cli自定义配置1.自定义服务配置2.eslint暂时关闭设置 四、单vue文件开发五、清空脚手架欢迎界面 2.查看脚手架版本 如果出现版本号就安装成功
webpack4+vue3.0+element-plus创建基于vue3的项目
Mr_XiMu的博客
01-15 3357
webpack4+vue3.0+element-plus创建基于vue3的项目
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目_vuecli搭建项目(1)
最新发布
2401_84447043的博客
05-16 435
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一、什么是VueCLI1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。3、CLI是什么意思？4、脚手架长什么样？5、脚手架依赖于node.js和webpack二、安装Vue CLI脚手架三、runtime-compiler和runtime-only的区别。
vue脚手架如何创建vue项目
wbnyua
06-15 1230
y。
vue项目的创建命令选取&ESLint的安装命令选取
qq_45426187的博客
02-27 624
6.Pick a linter/formatter config 选择 ESLint + Prettier(最下面的)target:'http://localhost:8081', //代理目标的基础路径 真实请求路径。config.headers.Authorization = token // 设置请求头。//匹配所有以 '/api'开头的请求路径。2.等待跳出选项, 选择 //手动选择功能。
Vue-cli（脚手架）的创建
计算机硕士的博客
04-26 3004
Vue-cli（脚手架）的创建。
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
vue使用vue-cli快速创建工程
01-19
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 -g代表全局安装。 i就是install的缩写。 其中webpack-simple代表模板的名称。vue-todos是你给自己的项目起的名称，这个随便起...
vue-cli脚手架-bulid下的配置文件
08-27
要使用Vue-cli脚手架，首先需要安装Node.js，并且全局安装Vue-cli。然后，可以使用Vue-cli创建一个新的Webpack项目。创建项目时，需要填写一些信息，如项目名称、项目描述、作者等。同时，也可以选择是否安装Vue-...
图文讲解用vue-cli脚手架创建vue项目步骤
01-19
用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构。今天小编我便来记录一下vue-cli脚手架的构建项目的经验。 1、首先便是要搭建好vue-cli脚手架工具才行滴。搭建vue-cli脚手架工具的方法便是如图所示这样...
详解vue-cli 脚手架项目-package.json
12-08
使用vue-cli脚手架新建的项目中，含有package.json。 package.json是npm的配置文件，里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。 { "name": "vue-manage", // 项目名称 ...
4.3 认识Vue-cli3
天天向上
01-06 570
Vue-cli3与2版本有很大区别 Vue-cli3基于webpack4打造，Vue-cli2是基于webpack3； Vue-cli3设计原则是0配置，移除了build和config等目录； Vue-cli3提供了vue ui命令，提供了可视化配置； 移除了static文件夹，新增puclic文件夹，并且index.html移至public中； 现在做项目都用Vue-cli3。 Vue-cli3创建步骤 Please pick a preset? 有Default ([Vue 2] babel,.
vue项目搭建
qq_32586679的博客
12-01 280
1.node.js安装: node -v 查看版本 2.vue-cli安装: 低版本先移除，再全局安装新版本 vue -V(版本) 3.版本初始化： vue create name 4.选择初始化配置： Default是自动安装，Manually是手动安装 5.添加配置项： *Babel：使用babel，便于将我们源代码进行转码（把es6=>es5） ...
Vue（八）vue脚手架
qd520_1314的博客
04-25 2020
a.先决定要把项目文件夹保存在哪个位置； b.然后在整个文件夹的位置，shift+鼠标右键打开power shell窗口，运行：vue create 自定义项目名；系统出现提示后按照以下过程进行选择： 1）? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features 2）? Check the
Vue-Cli 脚手架 搭建 Vue项目
灵魂学者的博客
02-03 2178
本篇主讲如何通过vue提供的vue-cli脚手架来搭建vue项目，自此开始进行Vue基于项目中的介绍，Vue-cli 是官方提高用于搭建基于 Vue、Webpack、ES6 项目目的脚手架工具，通过脚手架创建项目势必会较为高效！
VUE学习笔记：24.脚手架vue-cli之vue cli3初始化项目及其相关选项
ouyicnm的博客
06-27 1033
1.vue cli3初始化项目 命令：vue create 项目名称 在初始化项目时会有许多选项供我们选择，如下： Please pick a preset：请选择配置。该选项有两个选择：1.default（默认的）；2.Manually select feature（手动选择）。如果使用手动选择则可以手动选择以下配置项（空格选择配置项，回车提交选择） Where do you prefer placing config for Babel, ESLint, etc.?：你的Babel, ESL.
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
VUE3+TS学习-项目搭建
肥晨开发的学习之路
08-02 1872
vue3和vue2的项目安装基本没太大区别。 1.node安装 方式一：nvm安装node 个人比较喜欢使用nvm控制node版本，切换版本自如。 nvm下载地址：https://github.com/coreybutler/nvm-windows/releases node包下载地址：https://nodejs.org/download/release/{node版本} 方式二：直接安...
vue项目实战（一）之vue-cli脚手架搭建项目
abcwanglinyong的博客
10-17 4722
首先假如你已经安装了node和npm,如果没有的话自己百度安装一下。 如果感觉npm下载速度慢，可以使用淘宝镜像cnpm,链接地址： http://npm.taobao.org/ 安装cnpm 方式一： npm install -g cnpm --registry=https://registry.npm.taobao.org 方式二： alias cnpm="npm --...
9. Vue-cli脚手架如何创建项目及特点
04-04
Vue-cli脚手架可以通过以下步骤创建项目： 1. 安装Node.js环境 2. 全局安装Vue-cli脚手架：`npm install -g vue-cli` 3. 创建项目：`vue init <template-name> <project-name>` 4. 进入项目：`cd <project-name>` 5...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱划水de鲸鱼哥～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值