Vue3.0 - 项目初始化的两种方式

已于 2023-03-21 16:28:03 修改
阅读量3.5k 收藏 5
点赞数 4
分类专栏： Vue 文章标签： Vue cli vite
于 2021-09-11 12:59:36 首次发布
以下为本篇文章的主要内容，希望大家多提意见，如果喜欢记得点个推荐哦 作者：梦想是咸鱼 本文版权归作者和CSDN博客共有，欢迎转载，转载时保留原作者和文章地址即可。
本文链接：https://blog.csdn.net/weixin_41182727/article/details/120226152
版权
本文记录了将Vue项目升级到3.0的两种初始化方法：使用更新后的Vue CLI和Vite。首先，升级或安装Vue CLI至4.0以上版本，然后通过`vue create`命令初始化CLI项目，选择Vue 3.x和ESLint配置。另一种方式是使用Vite创建项目，通过`npm init vite`，安装依赖并用`npm run dev`启动。这两种方式都是Vue 3.0项目开发的良好起点。
摘要由CSDN通过智能技术生成

目录

前言

最近将vue升级到了3.0，记录下3.0 下项目初始化的两种方式


cli 脚手架升级

  • node.js版本
    在这里插入图片描述

  • vue-cli 卸载（对应vue2.0）（如果之前安装的是2.0版本，需要执行该操作卸载后升级，如果没有安装过跳到下一步直接安装）

npm uni -g vue-cli
  • vue/cli 安装（对应vue3.0）
cnpm i -g @vue/cli

在这里插入图片描述

  • cli 版本号(vue3.0需要确保cli版本在4.0以上)
vue -V

在这里插入图片描述


cli 初始化3.0项目

  • 创建项目
vue create 项目名称

在这里插入图片描述

  • 选择自己的配置（根据自己所需，来下载所需的东西）

在这里插入图片描述

  • 选择vue3.x

在这里插入图片描述

  • 选择ESLint标准规则

在这里插入图片描述

  • Lint保存

在这里插入图片描述

  • 存到单独的配置文件

在这里插入图片描述

  • 是否保存以上配置步骤的选项为今后所有项目的默认配置

在这里插入图片描述

  • 项目创建

在这里插入图片描述

  • 项目目录

在这里插入图片描述

  • package.json->vue版本

在这里插入图片描述

  • 运行项目
npm run serve

在这里插入图片描述

  • 项目访问

在这里插入图片描述


vite 初始化3.0项目

  • vite是vue3里提供的一个开发小工具，其特点是开发阶段编译重启速度快

  • 创建项目

npm init vite-app 项目名

在这里插入图片描述

  • 进入项目目录，执行安装命令
npm install

在这里插入图片描述

  • 项目目录

在这里插入图片描述

  • package.json->vue版本

在这里插入图片描述

  • 项目启动
npm run dev

在这里插入图片描述

  • 项目访问

在这里插入图片描述


- End -
- 个人学习笔记 -
- 仅供参考 -

Maggieq8324
关注
专栏目录
VUE3.0学习系列随笔（一）：VUE3.0项目初始化
一方通行的博客
01-20 1万+
VUE3.0学习系列随笔（一）：VUE3.0项目初始化 1、VUE3.0简介 VUE3.0相对于VUE2.0的提升主要有以下几点： Performance：性能更比Vue 2.0强。 Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。 Composition API：组合API Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念” Better TypeScript support：更优秀的Ts支持 Custom
vue3.0 - Composition API
m0_50744582的博客
11-08 514
一. 介绍 》使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的。 》Composition API字面意思是组合APl，它是为了实现基于函数的逻辑复用机制而产生的。主要思想是，我们将它们定义为从新的 setup函数返回的JavaScript变量，而不是将组件的功能（例如state、method、c
VUE3.0项目初始化
Jack, what else can you do besides holding your little darling?
09-14 688
VUE3.0学习系列随笔（一）：VUE3.0项目初始化 1、VUE3.0简介 VUE3.0相对于VUE2.0的提升主要有以下几点： Performance：性能更比Vue 2.0强。 Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。 Composition API：组合API Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念” Better TypeScript support：更优秀的Ts支持 Custom
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 588
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
vue3.0进阶-----------------构建初始化项目
qq_42112846的博客
08-24 328
1、首先在终端输入 vue ui 打开浏览器可视化界面，如下： 2、第一个会列出你当前拥有的项目，第二个是创建项目的地方； 在这里我们点击第二个，创建自己的项目： 3、之后点击下一步,选择手动配置项目， 4、之后如下：我们勾选babel 编译器、router路由、vuex 状态管理公开、css预处理器、ea-linter(检测代码风格下的规范性)、最后勾选使用配置文件（英文状态...
01_初始化vue3.0项目
PrototypeOne的博客
05-14 209
使用脚手架创建 vue create xxx 然后根据提示选择配置 vue3+typescript 使用vite创建 vite是一个由原生ESM驱动的web开发构建工具。在开发环境下，基于浏览器原生ES imports 开发 他做到了本地快速开发启动，在生产环境下，基于Rollup进行打包 快速的冷启动，不需要等待打包操作; 即时的热模块更新，替换性能和模块数量的解耦让更新飞起; 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。 npm init vite-app xxx cd xxx
Vue3.0的初始化
weixin_44867717的博客
09-06 8497
Vue3.0的初始化 官方文档（ 中文版 ）：https://vue3js.cn/docs/zh/ 1、创建一个Vue3.0的项目 1、npm init vite-app vue3.0 2、cd vue3.0 3、npm install 4、npm run dev 此时，项目已经创建成功！！！！ 2、体验一下Vue3.0的新变化 1、setup() ——beforeCreate 、created 之前执行。 setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Com
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
10-18
在创建项目的过程中，CLI会提供两种配置方式：`default`和`manually select features`。这里我们选择手动选择特性(`manually select features`)，以便自定义项目配置。 手动选择特性时，您会看到一系列可选的项目...
vue-cli2.0转3.0之项目搭建的详细步骤
10-17
Vue CLI 3.0 引入了许多新特性，旨在简化项目初始化、配置和维护的过程，使得开发者能更专注于编写应用程序本身。 在从 Vue CLI 2.0 迁移到 3.0 的过程中，首先需要了解两者的主要区别。Vue CLI 2.0 使用的是基于 `...
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
10-17
创建项目时，Vue CLI 3.0 提供了两种方式： - 使用指令 `vue create <project-name>`，然后根据提示选择配置选项。 - 通过可视化界面 `vue ui` 创建项目，按照向导操作。 2. **项目结构变化**： Vue CLI 3.0 的...
Vue的初始调用方法
热门推荐
qq_40666620的博客
09-05 2万+
Vue的初始调用方法 如果想进入vue component时就立即执行该组件中methods中的其中一个方法，并且要求在vue加载完毕后（如组件中data中的数据已经加载完毕），可以使用vue自带属性：vue.mounted,在其中调用methods中的方法即可，如下 export default { data:function () { return { a...
Vue3 程序初始化流程
weixin_38099964的博客
07-18 1484
初始化 在vue3中，程序的初始化不再沿用vue2的new Vue()方法，而是使用了createApp。在createApp中发生了什么呢？ 改写的原因 createApp是一个Vue中的工厂函数，以函数的方式进行导入和调用。而函数式的好处是 1、消灭了原来挂载在Vue上的静态方法，变成实例方法，可以减少内存占用，便于tree-shaking，减小了打包体积； 2、因为函数式和class装饰器对ts的支持好，使用函数的方式调用，可以更好的支持ts，提高类型支持 3、根组件的api，如data要和子组件的a
vue 初始化方法_前端发展方向指南—Vue源码初始化
weixin_33400388的博客
01-26 2115
Vue 的源码结构比较绕，同时使用了大量的面向对象的高级技巧。重写方法，扩展方法，多态等应用。从 Vue 实例的加载过程就可以看出来，这一节重点看看 Vue 的源码加载流程是什么。前言vue已是目前国内前端web端三分天下之一，同时也作为本人主要技术栈之一，在日常使用中知其然也好奇着所以然，另外最近的社区涌现了一大票vue源码阅读类的文章。在下借这个机会从大家的文章和讨论中汲取了一些营养，同时对一...
vue3-setup
qq_52135740的博客
08-02 302
setup 理解：Vue3.0中一个新的配置项，值为一个函数。 setup是所有Composition API（组合API）“ 表演的舞台 ”。 组件中所用到的：数据、方法等等，均要配置在setup中。 setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！） 若返回一个渲染函数：则可以自定义渲染内容。（了解） 注意点： 尽量不要与Vue2.x配置混用 Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性
vue3-init
cwjxyp的博客
01-04 1227
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
vue 初始化方法 create,beforeMount,mount,computed,watch 方法执行顺序及使用场景
朝立的博客
06-26 4478
vue 存在一些基本属性和相关对象如果合理使用，可以避免代码混乱。
Vue 初始化 执行过程
qt的博客
01-09 3233
Vue 初始化 执行过程 先在platforms 下的 entry-runtime-with-compile.js 调用 Vue.$mountd 的获取el对象， 挂载mount方法 ，将Vue的模块导出 找到 core/instance/index.js ，获取 vue的构造函数， 初始化Vue 上的静态方法，例如 set，delete，nextTick 初始化Vue 上的实例成员，就是在Vue的原型上混入相应的成员，进行patch方法进行初次的渲染到el对象上， 例如 data,data,data,pr
使用Vue Cli3.0脚手架初始化Vue项目(现在最新版本是Vue Cli4)
努力的nana
03-17 751
1.新建一个文件夹（Docker-Vue-Demo）,在终端将文件夹打开，路径跳转到Docker-Vue-Demo文件夹下。 2.安装Vue：npm install vue 3.查看Vue版本：npm vue -v 4.全局安装Vue cli：npm install -g @vue/cli 5.新建项目：vue create 项目名称，如果是在当前文件夹下，则直接使用vue create ...
Vue实例初始化的选项配置对象详解_vue 初始化对象
2401_84412050的博客
04-27 494
watch: {// 监控a变量变化的时候，自动执行此函数},// 深度 watcherc: {deep: true})//注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Maggieq8324

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

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

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

打赏作者

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

抵扣说明：

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

余额充值