Vue3.0环境如何搭建
导读:本文共5821字符,通常情况下阅读需要19分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 使用vite初始化项目vite 介绍vite是尤大大在今年新鼓捣出来的一个工具,尤大大对vite的描述是这样的: Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with R... ...
目录
(为您整理了一些要点),点击可以直达。vite
是尤大大在今年新鼓捣出来的一个工具,尤大大对vite
的描述是这样的: Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. 翻译成中文就是:Vite
是一个由原生 ES Module
驱动的 Web
开发构建工具。在开发环境下基于浏览器原生 ES imports
开发,在生产环境下基于Rollup
打包。
上面这段话提到了一个关键字ES Module
,这个是什么呢?详细的介绍大家可以访问 developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules 进行查看。此处我们长话短说。在最早的时候,还没有前端工程化,然后我们写javascript
都是写到一个文件,然后通过script
标签去引用,后来随着前端发展越来越壮大,js
之间依赖越来越复杂,这时候就需要有一种可以将JavaScript 程序拆分为可按需导入的单独模块
的机制来维护这个依赖,随之就诞生了AMD
,CMD
等等,而ES Module
就是浏览器支持的原生模块依赖的功能。
为什么尤大大要推出vite
,在我们使用webpack
的时候,每次开发时候启动项目都需要几十秒甚至超过一分钟,比较慢,而且热更新也比较慢,而vite
的主要特点就是快,官网对于vite
的特点是这样描述的
快速的冷启动
即时的模块热更新
真正的按需编译
到底有多快呢,我们先新建一个项目试试
初始化项目, 在工作空间打开终端窗口,对于window
用户即cmd
,然后执行下面命令
执行之后就会输出以下内容,可以看到新建项目特别快,仅仅用了1.63s
初始化完项目,通过cd my-vue3
进行到项目里面,然后再执行yarn
安装依赖(此处建议使用淘宝镜像,比较快)
依赖安装完需要通过yarn dev
启动项目
是不是瞬间体验到了秒启项目的感觉,启动之后就可以通过http://localhost:3000
来访问项目了
使用vscode
打开项目之后,可以查看到新建的项目结构与vue-cli4
创建的项目结构基本一样,都是我们很熟悉的App.vue
和main.js
打开main.js
发现创建Vue
的方式变了,原来是通过new Vue
的方法来初始化Vue
,在Vue3.0
中,修改为了通过createApp
的方式。
typescript
现在已经成为了前端必备技能之一,大量的项目也开始基于typescript
进行开发。在使用Vue2.0
的时候,因为Vue2.0
没有对typescript
进行支持,所以使用ts
开发功能显示有些别扭。但到了Vue3
,其自身源码便是基于ts
开发的,所以对ts
天生有着很好的支持。使用vite
配置typescript
很简单,只需要进行以下几步操作.
安装 typescript
初始化tsconfig.json
将main.js
修改为main.ts
,同时将index.html
里面的引用也修改为main.ts
, 通过还需要修改App.vue
与HelloWorld.vue
文件,修改方式如下
修改完之后,重启就可以访问项目了。虽然这样配置是可以了,但是打开main.ts
会发现import App from App.vue
会报错:Cannot find module './App.vue' or its corresponding type declarations.
,这是因为现在ts
还没有识别vue
文件,需要进行下面的配置:
接下来你就可以开开心心的在组件中使用ts
了
在项目根目录添加shim.d.ts
文件
添加以下内容
在Vue2.0
中我们路由一般会选择使用vue-router
,在Vue3.0
依然可以使用vue-router
,不过和Vue3.0
一样当前vue-router
的版本也是beta
版本,在本文撰写的时候,版本是4.0.0-beta7
因为当前vue-router
针对vue3.0
的版本还是beta
版本,所以不能直接通过yarn add vue-router
进行安装,而是需要带上版本号
在项目src
目录下面新建router
目录,然后添加index.ts
文件,在文件中添加以下内容
与新的Vue3.0
初始化方式发生变化一样,vue-router
的初始化方式也发生了变化,变成了通过createRouter
来初始化路由。
修改main.ts
文件内容如下
与vue-router
一样,新的vuex
当前也处于beta
版本,当前版本是4.0.0-beta.4
在项目src
目录下面新建store
目录,并添加index.ts
文件,文件中添加以下内容
通过上面的一系列操作,我们的开发环境就已经配置完成了,接下来我们就通过新的开发环境先开发一个TodoList
,来验证一下是否正常。
首先我们先在src
目录下面新建一个views
目录,然后在其中新建文件todo-list.vue
,并为文件添加以下内容
a. 首先将App.vue
文件内容修改为
b. 然后修改 router/index.ts
文件,添加新的路由
import {createRouter, createWebHashHistory} from 'vue-router'
这时候我们就可以通过http://localhost:3000/#/todolist
来访问TodoList
了
Vue3.0环境如何搭建的详细内容,希望对您有所帮助,信息来源于网络。