【二】使用create-vue创建vue3的helloworld项目(推荐)

已于 2024-01-07 19:07:16 修改
阅读量485 收藏 6
点赞数 9
文章标签： vue.js 前端 javascript
于 2024-01-07 18:47:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42670590/article/details/135438605
版权

create-vue

官网：快速上手 | Vue.js

create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。

1、使用方式

npm create vue@latest

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。

创建好项目的目录结构如下：

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

  cd vue-project
  n
最低0.47元/天 解锁文章
恋上钢琴的虫
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue-cli3生成的Vue项目加载Mxgraph方法示例
10-15
接下来，使用Vue-cli3创建一个新的Vue项目： ```bash vue create my-mxgraph-project ``` 进入项目目录并安装Mxgraph及相关依赖： ```bash cd my-mxgraph-project cnpm install mxgraph --save cnpm install ...
Vue-Hello Wolrd
qq_31387691的博客
03-31 840
上述步骤就是对Vue项目的环境搭建，接下来我们就可以使用 vue-cli 脚手架工具进行Vue项目的构建了。以上就是Vue项目的创建和基本使用，后续将会继续学习Vue的相关知识，并将学习过程中的收获和心得总结分享出来。项目启动后会返回一个地址，将地址拷贝到浏览器地址栏，出现vue官网的欢迎页面，则一个Vue项目构建完成了。（2）创建项目过程中，需要对项目名称、描述、作者等信息进行确认或者填写，案例如下。（2）查看 vue-cli 版本号，检查是否安装成功。（1）cd命令进入到项目的路径下，再执行命令。
「网页开发｜前端开发｜Vue」01 快速入门：快速写一个Vue的HelloWorld项目
过美好生活，做高效程序员
08-22 3152
本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。
vue-cli3.x创建项目vue create hello-world
weixin_30378623的博客
07-08 1229
在git中输入指令vue create hello-world,没反应,因为vue-cli的版本问题,必须3.x版本才能使用这个指令于是按照官网的提示升级vue vue-cli从2.x版本升级到3.x版本卸载包报错. 根据官网的指令输入:yarn global remove vue-cli 报错: error This module isn't specified in a p...
Vue创建项目详解
蓝亚之舟的博客
07-03 4995
1、前提 第一步：安装node.js 什么是nodejs？ 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境； Node.js使用一个事件驱动、非阻塞式 I/O 的模型，使其轻量且高效； Node.js的软件包生态系统npm是全球最大的开源库生态系统。 为什么要安装nodejs? 安装vue需要使用npm，而npm依赖于node.js（当然，安装vue也可以使用其他方法，但是都不如npm简单实用）
关于运行Vue3源码使用HelloWorld.vue报错解决方案
qq_57437881的博客
11-16 242
解决方案将代码放在html文件中成功。
【一】使用vue-cli创建vue3的helloworld项目
码农从0到1
01-07 717
接下来我们创建 runoob-vue3-app 项目。按下回车键后就会进入安装，等候片刻即可完成安装。2、使用 vue create 命令创建项目。1、安装vue的环境。
SpringBoot_Vue3 《Hello World》项目入门教程
y6123236的专栏
06-08 1337
前后端分离模式，可以让后端和前端开发人员致力于自己擅长的领域，且可以让前端和后端业务逻辑高度解耦合。本文从一个简单的案例入手，讲解使用和vue3如何实现前后端的分离。前后端分离有2逻辑分离：在一个项目中的前后分离。项目整体架构还是MVC模式，适合于小型项目。物理分离：独立的前后端项目分离。因是不同项目，会涉及远程调用等问题，适合于中、大型项目。后端项目仅是API提供者，可以服务于不同平台的前端项目，如网页版、微信小程序版的前端项目。本文将使用分别构建这2种分离模式。无论使用哪一种分离模式，其后端。
vue[初级] WebStorm中开发VUE的HelloWorld项目
u011664286的博客
09-22 1018
vue WebStorm中开发VUE的HelloWorld项目
基于vue-cli3创建libs库的实现方法
10-15
要开始创建libs库，首先使用vue-cli3生成一个新的项目。在终端运行以下命令： ```bash vue create myLib ``` 这将在当前目录下创建一个名为`myLib`的项目，包含所有必要的依赖和默认配置。 二、修改目录结构 接下来...
配置并使用vue3编写项目
09-26
使用命令`vue create 项目名`创建一个新的Vue3项目，然后在项目目录下执行命令`npm install`来安装依赖项。最后，我们可以使用命令`npm run serve`来启动我们的Vue3项目。 四、Vue3项目配置 在我们的Vue3项目中，...
vue cli 3.0 搭建项目的图文教程
10-16
使用 `vue create` 命令创建新项目，例如创建名为 "hello-world" 的项目： ```bash vue create hello-world ``` 在创建过程中，你可以选择不同的预设配置或手动选择特性。手动选择时，可以根据实际需求选择 Babel、...
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
10-15
要创建一个新的Vue项目，使用`vue create`命令，选择自定义选项，然后添加TypeScript支持： ```bash vue create vue-cli3-ts ``` 在交互式提示中，选择`手动选择特性`，然后勾选`TypeScript`以及根据项目需求的...
vue3 HelloWord项目搭建方法
mark885的博客
09-13 819
1.default（vue3 babel，eslint）：默认设置（直接enter）非常适合快速创建一个新vue3项目的原型，没有带任何辅助功能的 npm包。2.default（vue2 babel，eslint）：默认设置（直接enter）非常适合快速创建一个新vue2项目的原型，没有带任何辅助功能的 npm包。3.Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包。1.1：检查是否安装成功：node -v。
vue入门教程 简单实现一个hello world
热门推荐
marendu的博客
05-21 2万+
vue入门教程 简单实现一个hello world 此篇适合没学习过vue的小白观看，有一定基础可观看笔者vue笔记相关文章，本文主要介绍，和讲解vue。 1.vue运行模式 简单如下图 view:表示视图层，就是显示的ui界面 model：表示数据层，用于定义数据修改和操作业务逻辑 viewModel：用于同步view和model的对象 在MVVM架构下，View 和 Model 之间并没...
vue3之hello world
weixin_68376171的博客
01-20 1314
App.vue文件：看上去就是把html、css、javascript前端的这三个部分放在一起用一个vue组件文件实现前端。tsconfig.json中"extends": "@vue/tsconfig/tsconfig.web.json"标红。运行后它会根据env.d.ts文件去安装相关模块依赖，生成node_modules文件。main.js：程序入口文件，整个程序中最先执行的文件。在 main.ts 中，我们需要先引入相关的模块。相关的依赖，运行下面命令安装。APP.vue：唯一的根组件。
Vue - Helloworld案例详解
qq_39123467的博客
10-10 301
Vue - Helloworld案例详解
你的第一个Vue项目HelloWorld看这一篇就够了
一起coding，一起嗨。
06-20 5249
一、初始化模板 模板：vue官方初始化了几种常用模板，如图使用vue list查看官方模板 vue list 选择模板创建vue项目骨架，此处选择模板为webpack-simple，项目名称为myvuedemo0620，回车后需要填写项目名称 项目描述 作者 许可协议 是否使用sass 一路回车就可以 vue init webpack-simple mybuedemo0620 二、安装依赖、运行项目 #进入项目目录 cd mybuedemo0620 #安装依赖 npm inst
javaWeb项目-ssm+vue企业台账管理平台功能介绍
最新发布
weixin_42874480的博客
06-20 550
Tomcat 虽然是Apache的扩展，但是它们都是可以独立运行的，二者是不互相干扰的。当配置正确的时候，Apache服务器为HTML页面的运行提供技术支持，Tomcat 的任务则是运行Servle和java 页面。Tomca也具有一定的HTML页面处理功能。Tomcat属于一种轻型的服务器，所以说在中小企业中并不具有普适性。但是当程序员需要开发或调试java 程序时，则通常会将该服务器作为首选。
如何创建vite + vue3+ element-plus项目
07-13
创建 Vite + Vue3 + Element Plus 项目的步骤如下： 1. 确保已经安装了 Node.js 和 npm。 2. 打开终端或命令行工具，创建一个新的项目文件夹，并进入该文件夹。 3. 执行以下命令初始化一个新的 Vue 项目： ``` npm init @vitejs/app ``` 4. 在初始化过程中，你会被要求选择一个模板。选择 Vue 3 并按回车键确认。 5. 完成初始化后，进入项目文件夹，并安装 Element Plus： ``` cd your-project-name npm install element-plus ``` 6. 创建一个新的 Vue 组件，例如 `HelloWorld.vue`，并在其中引入 Element Plus 组件： ```vue <template> <div> <el-button type="primary">Hello World</el-button> </div> </template> <script> import { ElButton } from 'element-plus'; export default { components: { ElButton } } </script> ``` 7. 在 `main.js` 中引入 Element Plus 的样式和组件库： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import 'element-plus/dist/index.css'; createApp(App).mount('#app'); ``` 8. 在 `App.vue` 中使用你刚刚创建的组件： ```vue <template> <div id="app"> <HelloWorld /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue'; export default { components: { HelloWorld } } </script> ``` 9. 运行以下命令启动开发服务器： ``` npm run dev ``` 10. 打开浏览器，在地址栏中输入 `http://localhost:3000`，即可看到运行中的 Vite + Vue3 + Element Plus 项目。 这样，你就成功创建了一个 Vite + Vue3 + Element Plus 项目。你可以根据自己的需求继续开发和定制化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

恋上钢琴的虫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值