博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
①Vue3 使用Vite或@vue/cli 创建项目
阅读量:3966 次
发布时间:2019-05-24

本文共 1151 字,大约阅读时间需要 3 分钟。

Vue3


写下博客主要用来分享知识内容,并便于自我复习和总结。

如有错误之处,请各位大佬指出。


前言

2020年9月18日,Vue3.0版本算是发布了,虽然在很多方面有了较大提升,但显然它还需要不断地进行更新和调整。而且很多组件库和插件短期内不可能快速升级到Vue3.0,因此公司的项目短期内还没决定将Vue2.0全部升级到Vue3.0。虽然现在还未普及,但随着现在版本的发布,Vue3.0的学习需要提上日程,为之后的使用做准备了。所以现在记录一些,现阶段对Vue3.0版本需要了解的一些很基础的知识内容。

(需要补充一点的是:Vue3.0采用TypeScript重写,所以如果想阅读Vue3.0的源码需要学习TS,之后我也会发布TypeScript学习文章)


Vue3.0的新特性

在这里插入图片描述

之后的内容会围绕这些新特性进行学习。


创建项目

Vite

我在这里也是第一次知道Vite,这个Vite是Vue作者开发的一款意图取代webpack的工具。它的实现原理是利用ES6的import会发送请求去加载文件的特性,拦截这些请求,做一些预编译,省去webpack冗长的打包时间。(这种方式建出的项目是Vue3项目,和@vue/cli不同。详情见下面@vue/cli的建项目流程)

流程:

在这里插入图片描述


@vue/cli

流程:

在这里插入图片描述
具体:
首先是新建Vue3的项目工程,其中Vue-CLI的版本一定要在4.3.1及以上

查看@vue/cli版本方式:vue -V

如果是3.0版本以前都是叫做vue-cli,现在叫做@vue/cli。

因此如果是安装了老版本的vue-cli,先卸载老版本:npm uninstall vue-cli –g
然后安装新版本即可:npm install –g @vue/cli

当@vue/cli升到新版本后,node版本也需要提升,否则在之后的使用中会报错:

在这里插入图片描述
查看node版本方式:node –v。最低限度的node版本暂时不知道。

更新node.js:去本地下载路径中卸载老版本,然后去官网下载最新版本。

以上都做好了之后,我们像Vue2一样,去创造项目。

(2020/10/27时,自动生成的项目还是2.x,如果之后变成3.x,请忽略以下内容)

现在打开项目之后,先去package.json中,可以发现此时的vue还是2.x,

在这里插入图片描述
那么要想使用3.x需要手动升级到vue3。
升级方法:vue add vue-next
在这里插入图片描述
然后通过看项目结构,以及各个文件中的内容就可以发现,真的很简洁。现在去掉生成项目时的默认内容(assets和components中的内容),就可以开始我们的项目了。

现在升到3.x版本后,运行项目可能会出现以下提示:

在这里插入图片描述
我们只需要删除package.json中的依赖就可以了。
在这里插入图片描述

转载地址:http://zmyki.baihongyu.com/

你可能感兴趣的文章
Flutter UI基础 - Row、Column详解
查看>>
Flutter UI基础 - 添加背景图片
查看>>
Flutter UI基础 - 布局之Row/Column/Stack
查看>>
Flutter UI基础 - 层叠布局Stack的使用
查看>>
Flutter UI基础 - webview 使用和交互
查看>>
Flutter UI基础 - 时间选择器
查看>>
Idea - 创建Java类时,自动在文件头中添加作者和创建时间
查看>>
Docker - ASP.NET Core Docker部署
查看>>
Docker - 容器运行 .Net Core
查看>>
Django - TypeError: __init__() missing 1 required positional argument: ‘on_delete‘ 的解决办法
查看>>
Go - 解决 go get 超时问题
查看>>
Go - goose 数据库迁移工具
查看>>
SQL - SQL Server 之遍历数据集合的几种方法
查看>>
SQL - SQL Server 之处理JSON数据
查看>>
SQL - SQL Server 之ETL详解
查看>>
SQL - SQL Server 之Merge函数使用详解
查看>>
SQL - SQL Server 之WHILE循环的坑
查看>>
SQL - SQL Server中如何获取当前年,月,日,时,分,秒
查看>>
SQL - SQL Server 性能优化之SQL语句总结
查看>>
Docker - docker-compose常用命令
查看>>