怎么创建脚手架，到运行

最新推荐文章于 2024-05-03 15:14:05 发布
最新推荐文章于 2024-05-03 15:14:05 发布
阅读量216 收藏
点赞数
文章标签： Vue.js CLI 项目创建 前端开发 脚手架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoquan1997/article/details/125546457
版权

首先我们要准备好所要使用的东西：

1：插件下载好vuter 插件  骷髅头的别选

2.创建一个项目，demo文件夹随便起什么名字

3.npm i -g  @vue/cli   安装全局的脚手架  

4.检查是否安装成功    vue  -V  或者  vue  --version

5.在你创建的文件夹下启动cmd 黑窗口 然后运行命令：   vue create 项目名称

项目名称自己起  运行之后 自动生成项目名称

后面会有命令图片怎么选择

 

 使用空格键来选择绿色亮起的三个

 选择2.0的

后面的选项可以y或者n过去

最后的才是创建成功后的服务端口

 

 

 

 

显示这样就是代表你创建成功了在浏览器打开local网址就行了，自行复制 

 

 显示这样我们就可以开始做项目了

快点码啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
脚手架常用命令
m0_51279688的博客
11-16 1842
1.Vue3 1.安装脚手架 npm install -g @vue/cli 2.初始化项目 vue create my-project 3.启动项目 npm run serve（yarn serve） 4.打包上线 npm run build 5.路由安装 npm install vue-router@next --save 安装一些依赖有问题,可能由于版本不够,可以在命令后面加上@next 2.Vite 1.安装vite npm i -g create-vite-app 2.创建vite项目 creat
vue3之搭建脚手架快速创建vue项目
soos的博客
08-11 862
通过脚手架创建vue项目
vue脚手架（安装、创建与运行）
zh15930366635的博客
03-22 5481
安装前准备： 可以先查看本机pc端是否配置了镜像源地址，（如果没有配置安装时是去国外地址下载，下载速度很慢）。 如果有图片中的内容说明安装了nrm 如果发生了代码错误，安装一下nrm npm i nrm 实例： 然后配置国内的下载地址 nrm use nrm 实例： 一、安装vue脚手架 可以使用下列任一命令安装这个新的包： npm install -g @vue/cli # OR yarn global add @vue/cli 安装之后，你.
如何使用脚手架
limmt2020的博客
08-23 477
如何使用脚手架 1、安装可以反复生成脚手架的工具 在cmd中： a. 设置淘宝镜像——下载快 npm config set registry https://registry.npm.taobao.org b. 安装可生成脚手架代码的命令行工具 npm i -g @vue/cli 当看到: + @vue/cli@版本号 说明安装成功 2、用工具反复为每个项目创建专门的脚手架结构 a. 决定把项目文件夹保存在哪个位置 要保存在哪个位置，就在哪个文件夹中地址栏中输入 cmd 回车 b. 再在整个文件夹位置
windows安装npm环境，运行vue脚手架 -- node.js
piaolaoshi的博客
04-08 1296
windows安装npm环境 -- node.js
安装react脚手架，运行
谷咕咕
07-05 259
安装react脚手架，运行
基于脚手架创建Vue项目实现步骤详解
10-15
在想要创建项目的路径下，运行`vue create test`，其中`test`是你的项目名称。随后，CLI会询问你选择预设配置还是自定义配置。选择“default”则使用默认配置，包括Babel和ESLint；选择“Manually select features...
IDEA2020.1创建springboot项目(国内脚手架)安装lombok
08-19
在本文中，我们将深入探讨如何使用IntelliJ IDEA 2020.1版本创建一个Spring Boot项目，并利用国内阿里云的脚手架（Maven阿里云）进行配置。此外，我们还将介绍如何安装和使用Lombok插件，以简化Java开发中的对象封装...
基于spring boot配置的jsp项目脚手架源码(易配置易运行)+项目说明.zip
最新发布
08-22
基于spring boot配置的jsp项目脚手架源码(易配置易运行)+项目说明.zip 基于spring boot配置的jsp项目脚手架源码(易配置易运行)+项目说明.zip 基于spring boot配置的jsp项目脚手架源码(易配置易运行)+项目说明.zip ...
使用Vue脚手架创建Vue项目
m0_70955866的博客
11-04 417
5. 检查你是否安装vue/cli,只需要在命令行运行vue指令,如果不报错,则说明安装成功。Vue脚手架隐藏了所有的webpack相关的配置,若想查看具体的webpack配置,请执行。在弹出的选项中,选择你需要安装的配置项: 通过上下键进行切换,通过空格键进行是否选中。在弹出的选择中,表示是否是使用history方式创建路由:默认,选择y。参考:资料/vue.js环境搭建.docx。vue create 项目名。
VUE脚手架搭建运行及部署
gsls200808的专栏
05-11 325
VUE脚手架搭建 1.安装nodejs 官网 https://nodejs.org/en/ 下载地址 https://nodejs.org/dist/v14.16.1/node-v14.16.1-x64.msi 验证安装 node -v npm -v 2.安装vue-cli npm install -g vue-cli 淘宝镜像方式安装 npm config set registry http://registry.npm.taobao.org/ npm install -g vue-cl
mavne如何使用脚手架
07-23 670
一、使用mvaven脚手架： 1、进入脚手架目录，执行mvn clean install ；将脚手架安装到本地 2、进入要创建项目的目录：eg：d://tmep 3. 执行命令：mvn archetype:generate -DarchetypeCatalog=local，展示本地local已有的maven脚手架 此处 有...
Vue CLI脚手架项目目录和运行流程介绍
m0_74462339的博客
05-03 434
$mount('#app')用于指定vue所管理的容器，这里的意思是index.html里面id为app的元素为vue所管理的容器。其中render: h=>h(App)指的是基于App.vue创建元素结构。3.实例化Vue,将App.vue渲染到index.html容器中。项目在启动时会先运行main.js。main.js的核心代码如下。2.导入App.vue。
使用vue脚手架并运行项目
m0_58509896的博客
06-18 307
2、如何解决 error Component name "Student" should always be multi-word vuemulti-word-component-names/multi-word-component-names。1、如何解决 error Mixed spaces and tabs no-mixed-spaces-and-tabs这种报错。如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry。配置 vue.config.js 文件。
如何搭建一个脚手架工具
qq_35379703的博客
03-19 1018
一.需要事先安装好npm和node.js 二.使用 vue-cli 搭建项目 1.在cmd里面进入创建项目的文件夹。（cd …）或者直接将文件拖入cmd将自动生成路径 2.敲入命令vue init webpack 3.按照图示来输入创建项目 4.输入指令 npm install 三.运行项目 输入指令npm run start ...
脚手架安装与部署项目流程
u012746918的博客
05-07 855
1:依赖软件 nodejs 1.1： 下载nodejs http://nodejs.cn/download/ https://npm.taobao.org/mirrors/node/ X86 适用 32 windows X64 适用 64 windows 1.2: 下一步下一步 ...
vue脚手架安装及创建、运行项目教程
交小新的博客
04-09 4136
1.下载node.js 如果是window7系统: 下载安装13的版本 2).安装node.js 之后一路下一步安装即可. 3).检查node js版本 cmd中任意位置输入 node -v npm -v 进行检查 5).切换淘宝NPM库 5.1).npm install -g cnpm --registry=https://registry.npm.taobao.org 方式2: 5.2).npm config set registry https://registry.npm.taobao.org
【vue系列-07】vue脚手架的基本使用
zhenghuishengq的博客
01-18 6687
深入理解vue的基本使用
（三）使用 Vue 脚手架
释怀°Believe的博客
08-29 1226
脚手架
在cll脚手架上创建vue文件运行
05-24
要在 cll 脚手架上创建 Vue 文件并运行，可以按照以下步骤： 1. 确保已经安装了 Node.js 和 cll 脚手架。如果没有安装，请先安装它们。 2. 打开终端或命令行工具，进入你想要创建 Vue 文件的目录。 3. 运行以下命令创建一个新的 Vue 项目： ``` cll create my-vue-app ``` 其中 `my-vue-app` 是你想要创建的项目名称，可以自定义。 4. 进入项目目录并启动开发服务器： ``` cd my-vue-app npm run serve ``` 5. 在浏览器中打开 http://localhost:8080，你应该能够看到 Vue 应用程序正在运行。 6. 要创建一个新的 Vue 文件，可以在 `src/components` 目录下创建一个新的 `.vue` 文件。例如： ``` <template> <div> <h1>Hello World!</h1> </div> </template> <script> export default { name: 'MyComponent' } </script> <style scoped> h1 { color: red; } </style> ``` 7. 要在 Vue 应用程序中使用这个组件，可以在 `src/App.vue` 文件中导入它并将其添加到模板中： ``` <template> <div id="app"> <my-component /> </div> </template> <script> import MyComponent from './components/MyComponent.vue' export default { name: 'App', components: { MyComponent } } </script> ``` 8. 保存文件并刷新浏览器，你应该能够看到一个红色的 "Hello World!" 标题。 这就是在 cll 脚手架上创建 Vue 文件并运行的基本步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值