vue项目创建的两种方式

已于 2022-10-10 11:09:10 修改
阅读量641 收藏 1
点赞数 1
分类专栏： vue 文章标签： 前端 vue.js
于 2022-10-10 10:40:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ftg1852vyf/article/details/127239880
版权

1. vite

npm init vue@latest

使用 npm init vue@latest 构建vue3项目,要注意Node.js 版本 14.18+，16+
不然npm run dev运行报错会error when starting dev server: Error: Cannot find module 'node:path'
在这里插入图片描述
这是因为vue3工程依赖的node版本比较高所导致的
vite文档原话：Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

2. vue-cli

vue create 【项目名】

需要先全局安装脚手架

npm install -g @vue/cli

//测试安装是否成功
vue -V
ftg1852vyf
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue创建项目的步骤
m0_51636525的博客
08-09 1万+
可以有两种创建vue的方式，一种是vue CLI脚手架，一种是vite工具。npm更新到最新版本方法 npm install -g npm。检查一下npm和node版本。
vue笔记-vue简单使用
Goodight的博客
10-26 2577
vue以及相关插件的简单使用
vue create 和 vue init 区别
少健终望成，波中取千金----张少波
12-09 2367
一.vue cli2升级到vue cli3 1.先升级npm的版本 npm install -g npm 2.再卸载之前的vue cli 2.9.6 npm uninstall -g @vue/cli 3.下载最新的vue cli版本 npm install -g @vue/cli 二.vue3,0版本创建项目 1、vue create myproject 2、默认选择default方式即可 vu...
使用vue create vue（基于webpack）创建的vue项目和使用npm init vue@latest（基于vite）的区别是什么？
最新发布
gaoqiandr的博客
05-25 498
本文主要介绍的是基于webpack和基于vite配置创建的vue3项目之间的区别
npm init vue@latest
2301_79568779的博客
10-06 1619
npm config set registry https://registry.npmmirror.com # 最新的国内镜像地址。:是vue官方创建vue3项目的命令，项目是基于vite打包的构建设置，会安装并执行create-vue，将会看到一些可选功能提示。vue -V # 查看vue的脚手架的版本，只要看到版本，就表示安装成功，否则重装。打开windows的黑窗口（dos命令）输入下面命令，全局安装Vue的脚手架。创建的vue3项目是基于webpack打包的，自带默认配置；
vue-cli脚手架和npm init vue@latest 区别
MR.杜的博客
11-15 5938
npm init vue@latest项目是基于vite打包的。脚手架创建的vue3项目是基于webpack打包的。
VUE学习笔记（Day1）
Mr_Yangobs的博客
10-18 1256
此文是Vue从0开始，带你逐渐精通Vue的教程哦
vue3项目创建流程-基于 vite + vue3
weixin_61382400的博客
07-05 363
命令初始化Vue.js项目时，您需要确保您的开发环境中已经安装了Node.js和npm。此外，该命令会使用最新的Vue.js版本，因此如果您需要使用特定的版本，可以使用类似。这些依赖项包括Vue.js的核心库、相关的插件和工具，以及一些标准的开发工具，例如Babel和Webpack等。命令是用于初始化一个新的Vue.js项目，并使用最新版本的Vue.js作为项目的入口。文件之前，该命令会要求您输入一些关于项目的信息，例如项目名称、版本号、描述等。这个命令会创建一个新的npm项目，并在项目目录下生成一个。
基于脚手架创建Vue项目实现步骤详解
10-15
创建Vue项目分为两种情况，根据Vue CLI的不同版本： 1. **Vue CLI 3.x版本**： 在想要创建项目的路径下，运行`vue create test`，其中`test`是你的项目名称。随后，CLI会询问你选择预设配置还是自定义配置。选择...
Vue2图像灰度处理两种方式源码
05-07
下面我们将详细讨论这两种方法。 1. **CSS滤镜方法** Vue2中的CSS滤镜可以方便地应用到DOM元素上，包括图片。CSS3提供了`filter`属性，其中的`grayscale()`函数可以将图像转换为灰度。以下是如何在Vue组件中使用...
浅谈vue项目用到的mock数据接口的两种方式
10-16
在开发Vue项目时，我们经常会遇到需要模拟数据接口的情况，以在没有真实后端服务时进行前端功能的测试和开发。...通过这两种方式，开发者可以在没有真实后端服务的情况下，快速地进行前端功能的开发和测试。
使用vue-cli创建项目的图文教程(新手入门篇)
08-27
* 安装 Vue CLI 有两种安装途径：npm 和 cnpm。 * 使用 npm 安装 Vue CLI，全局安装，运行：`npm install -g vue-cli` * 使用 cnpm 安装 Vue CLI，首先注册 cnpm，运行：`npm install -g cnpm --registry=...
vue项目实现github在线预览功能
08-27
本文主要介绍了 Vue 项目实现 GitHub 在线预览功能，通过解决两个问题，带领大家一起学习整个过程。 问题 1：为什么页面显示为空白？ 当我们在命令行执行 `npm run build` 后，项目的目录下会生成一个 `dist` ...
npm create vite@latest 与 npm init vue@latest之间的区别
2301_76979068的博客
07-22 6615
如果你需要构建一个 Vue 项目，并且需要使用 Vue 生命周期、Vue Router、Vuex 等 Vue 生态的全套功能，以及一些预定义的配置和插件，可以选择使用 npm init vue@latest。 如果你希望创建的项目是一个现代化的、轻量级的项目，不依赖传统的打包工具如 webpack，而且希望享受到 Vite 的极速开发体验，可以选择使用 npm create vite@latest。
npm init vue@latest 一直没反应然后报错
qq_40287084的博客
03-05 938
将网址修改为https://registry.npmmirror.com/运行如下命令后再执行“npm init vue@latest” 就成功了。
【Vue】构建vue项目的几种方法以及区别
qq_51307413的博客
09-08 2894
总的来说，npm init vue@latest和vue create用于创建基于 Vue.js 的项目，而npm init vite@latest用于创建基于 Vite 的项目。它们都是创建前端项目的命令，但使用的工具链和项目模板有所不同。npm init vue@latest和npm init vite@latest是通过 npm 包管理器直接安装 Vue.js，并创建一个基本的项目结构，而vue create是使用 Vue CLI 创建项目，并提供了更多的项目配置选项。
vue3 - 01.配置项目安装脚手架
qq_34111842的博客
10-16 893
/ https://github.com/coreybutler/nvm-windows/releases 进入网址，选择：nvm-setup.exe，下载并安装，需要注意的是，路径中不能有空格，中文。// 下载双击安装node：官网：https://nodejs.org/en/download/// win+R -> cmd -> 输入node-v / npm-v，出现版本号，说明安装成功。// 安装成功之后打开，在 拓展 搜索chinese汉化包，点击install安装，然后重启。
初始化创建安装 vue3工程项目的3种方法！超详细
南北极之间
06-12 8217
​ vue向导官方文档： Quick Start | Vue.js Vue.js - The Progressive JavaScript Framework https://vuejs.org/guide/quick-start.html#with-build-tools vue3官方文档： 安装 | Vue.js Vue.js - The 渐进式 JavaScript 框架 https://v3.cn.vuejs.org/guide/installation.html#发布版本说明 介绍 | Vue.
vscode怎么创建vue项目
01-20
在VSCode中创建Vue项目有两种方法： 方法一：使用vue-cli快速构建项目 1. 打开终端（Terminal）。 2. 在终端中执行以下命令安装vue-cli： ```shell npm install -g vue-cli ``` 3. 创建一个新的Vue项目，执行以下命令： ```shell vue init webpack myvue ``` 其中，myvue是你想要创建的项目名称，你可以根据需要进行修改。 4. 进入到项目目录，执行以下命令： ```shell cd myvue ``` 5. 安装项目依赖，执行以下命令： ```shell npm install ``` 6. 启动项目，执行以下命令： ```shell npm run dev ``` 7. 终端会显示浏览器访问地址，例如：http://localhost:8080，说明项目已经创建成功。此时，你可以在VSCode的左侧目录中看到Vue项目的相关文件夹。 方法二：手动创建Vue项目 1. 打开VSCode，创建一个新的文件夹，作为你的Vue项目的根目录。 2. 在VSCode中打开终端（Terminal）。 3. 在终端中执行以下命令，初始化一个新的npm项目： ```shell npm init -y ``` 4. 安装Vue和Vue相关的依赖，执行以下命令： ```shell npm install vue vue-router vuex ``` 5. 在根目录下创建一个index.html文件，并在文件中添加Vue的基本结构。 6. 在根目录下创建一个main.js文件，并在文件中编写Vue的入口代码。 7. 在根目录下创建一个App.vue文件，并在文件中编写Vue组件的代码。 8. 在根目录下创建一个src目录，并在该目录下创建其他需要的文件和文件夹，例如components、views等。 9. 在根目录下创建一个webpack.config.js文件，并在文件中配置Webpack的相关设置。 10. 在终端中执行以下命令，安装Webpack和其他相关的依赖： ```shell npm install webpack webpack-cli webpack-dev-server babel-loader css-loader vue-loader vue-template-compiler html-webpack-plugin ``` 11. 在终端中执行以下命令，启动项目： ```shell npm run dev ``` 12. 终端会显示浏览器访问地址，例如：http://localhost:8080，说明项目已经创建成功。此时，你可以在VSCode的左侧目录中看到Vue项目的相关文件夹。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值