使用VueCLI脚手架创建项目

最新推荐文章于 2024-04-30 18:04:42 发布
最新推荐文章于 2024-04-30 18:04:42 发布
阅读量86 收藏 1
点赞数
文章标签： vue vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49431999/article/details/109405556
版权
本文详细介绍了如何使用VueCLI创建项目。首先全局安装VueCLI，然后在项目目录通过cmd运行命令创建项目，选择自定义配置并选取所需插件如Babel和Less。接着配置文件存放位置，不保存配置，等待项目创建完成。最后，在项目目录运行npm run serve启动项目，访问指定地址即可查看。
摘要由CSDN通过智能技术生成

##VueCLI脚手架创建项目

  • 安装脚手架 [VueCLI官网]
    (https://cli.vuejs.org/zh/guide/installation.html)
    全局安装
npm install -g @vue/cli
  • 项目创建，在项目目录运行cmd，输入命令
    projectname为项目名称，项目名称好像不能用大写字母
 vue create projectname

3、小黑窗选择

  • 使用上下箭头选择，回车确认，这里选择了自定义配置

在这里插入图片描述

  • 自定义配置选择，根据需求勾选，上下键与空格键操作（这里选择了babel 和css预处理器） 按回车下一步

在这里插入图片描述

  • css预处理器选择，选择了less
    在这里插入图片描述
  • 配置文件存放地方，选择独立文件夹
    在这里插入图片描述
  • 是否记录一下以便下次继续使用这套配置，输入N

在这里插入图片描述

  1. 等待项目创建完成，会在您指定的目录下生成项目文件夹
  2. 在项目目录运行项目（可以直接在vscode使用终端）
npm run serve
  1. 运行成功进入项目地址

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

pany_k
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用脚手架（Vue-Cli）快速创建一个vue项目的步骤
qq_59808309的博客
01-22 5053
一、安装vue https://cn.vuejs.org/v2/guide/installation.html 二、先确定是否安装了node.js、npm和cnpm node.js的下载地址：Node.js NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编
利用脚手架 创建项目
weixin_59153556的博客
09-24 350
利用 vue 命令，创建一个项目，并启动webpack开发服务器 0、准备 全局安装@vue/cli模块包 #全局安装@vue/cli模块包 yarn global add @vue/cli # OR npm install -g @vue/cli #查看`Vue`命令版本 vue -V 查看`Vue`命令版本 vue -V 1、创建项目 vue create vuecli-project # vue和create是命令, vuecli-project是自己的文件夹名 vue ..
使用脚手架创建单模块项目
tanhaichao的专栏
02-05 395
使用脚手架创建单模块项目 学习如何使用脚手架创建一个单模块项目。 本指南将引导您完成创建一个基于Leopard的单模块项目，可以了解到从Model、DAO、Service、Controller的代码划分，如何使用Jetty在本机测试、如何进行单元测试。 How to complete this guide 你可以从头开始并完成每一个步骤,或者您可以绕过你已经熟悉的基本设置步骤。无论哪种方式
VUE——使用VUE脚手架创建项目
weixin_68567820的博客
06-20 1万+
Vue脚手架安装及配置
Vue2使用脚手架创建项目
codefan※的博客
07-18 2506
先解释一下关于脚手架的概念        可以理解为像我们盖房子，需要打牢地基，也就是做一些前提准备工作，例如webpack的配置文件、node一些包的下载等等，形成项目的基本构架，这样就大大提高了项目的开发效率。试想一下，如果在你想要写一个项目的时候，需要你自己配置这些东西，心态先崩掉 前提准备——脚手架安装 可以使用编译器的终端或者cmd：npm install @vue/cli(@version) -g 建议安装cli3以上，不然
图文讲解用vue-cli脚手架创建vue项目步骤
10-17
它简化了创建项目、配置构建流程以及开发环境的步骤，使得开发者能够更专注于编写应用程序本身，而非繁琐的配置工作。接下来，我们将详细探讨如何使用Vue CLI创建Vue项目。 **一、安装Vue CLI** 在开始之前，确保...
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
为了解决这个问题，Vue 官方提供了 `vue-cli` 这个脚手架工具，它可以帮助开发者快速地生成一个包含所有必需配置的项目模板。 1. **安装Node.js环境**： 在搭建Vue项目之前，首先确保你的计算机上安装了Node.js。...
使用vue脚手架创建项目
weixin_46375001的博客
02-26 177
作为一个前端新手，学习一个前端框架是必要的，这里给大家介绍一下怎么安装vue脚手架 首先vue要node的环境，我们需要先安装node，nodejs中文官网选择稳定版下载，一步一步安装就行，安装完成后window+r 输入cmd 在终端输入node -v 看到版本号就说明安装成功，注意，node版本不要太低，也不要太高，太低会有兼容性的问题，太高会有未知的bug，安装官方推荐的稳定版就好 安装 n...
Vue2 通过脚手架（cli）创建项目方式
最新发布
weixin_45703831的博客
04-30 942
【注意，创建的文件夹名字最好不要与项目名同名】
使用VUE脚手架搭建VUE项目
weixin_45508558的博客
08-05 1925
1、新建文件夹 2、进入新建的文件夹，输入npm i @vue/cli -g 或者：npm i "@vue/cli" -g 3、检查是否安装vue-cli : vue -V 会显示脚手架vue-cli的版本@vue/cli xxx 4、创建项目： vue create name---在之前创建的目录中创建 选择default-----按回车键 5、启动项目： 1）进入当前文件目录 2）npm run serve 3）在浏览器输入：http://localhost:显示的端口号 6..
Vue脚手架创建项目的方式
qq_37543356的博客
10-30 557
脚手架版本 ：@vue/cli 4.5.8 1. 命令行 vue create 项目名 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0DAEXPDf-1604050808749)(https://gitee.com/nfLJ/Pic/raw/master/blog/20201030170547.png)] 官方给出了3个创建选择，分别是Vue2默认、Vue3默认和自定义 我们选择自定义，即 Manually select features [外链图片转存失败,源站可能.
用vue构建项目笔记1(用vue脚手架创建项目)
风云的博客
07-14 1568
自用的vue开发笔记
使用vue脚手架创建一个项目(一)
在无知中学习，在学习中成长，在成长中学习
09-07 6694
使用vue脚手架创建一个项目第一步:是否安装Vue CLI 的包第二步：检查版本是否正确或者是否安装成功第三步：创建一个项目第四步：预设置项目1.选择vue的版本2.x或者3.x2.选择代码校验第五步：启动项目1.启动报错2.报错3.启动成功 第一步:是否安装Vue CLI 的包 按住wins+r,打开命令行，输入下面命令 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-c
使用vue-cli脚手架创建项目步骤
m0_45144737的博客
04-19 4240
使用vue-cli脚手架快速创建项目
创建vue脚手架项目的一般步骤
Jump_Monkey的博客
08-29 754
1.全局安装vue2.0脚手架 npm install --global vue-cli 2.安装全局的 npm i webpack webpack-cli webpack-dev-server -g （如果自己的电脑中没有这是哪个插件vue项目是运行不起来的） 3.安装vue2.0版本下的 3.1官方模版（推荐） vue init webpack my-project （my-project 为...
脚手架安装与部署项目流程
u012746918的博客
05-07 853
1:依赖软件 nodejs 1.1： 下载nodejs http://nodejs.cn/download/ https://npm.taobao.org/mirrors/node/ X86 适用 32 windows X64 适用 64 windows 1.2: 下一步下一步 ...
Vue使用脚手架部署一个项目的三种方式
qq_42617735的博客
12-21 1049
1.安装node.js，安装好后系统就自带npm 命令，（也可以利用npm 安装一个cmpn一个淘宝镜像的东西，比npm 快一点 ） 2.npm -v 查看npm 的版本 3.cnpm install vue 安装Vue 4.cnpm install --global vue-cli 安装vue-cli脚手架构建工具 5.vue init webpack my-project 创建一个基...
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
使用vuecli脚手架创建一个项目
07-10
要使用Vue CLI脚手架创建一个项目，你可以按照以下步骤进行操作： 1. 首先，确保你的系统已经安装了Node.js。你可以在命令行中运行`node -v`来检查是否已经安装。 2. 安装Vue CLI。在命令行中运行以下命令来全局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值