学习Vue3.0,先从搭建环境开始
Bug源测试,上线来几个。愿君多修改,今夜眼难合。
这是小编关于Vue3.0
系列文章的第二篇,本文将带您从零搭建一个基于Vue3.0
与vite
的Vue3.0
开发环境,通过本文的学习,你将学习到以下内容:
使用
vite
初始化Vue3.0
项目配置
ts
配置
vue-router
配置
vuex
使用
Vue3.0
开发一个TodoList
示例
本文首发于公众号【前端有的玩】,您也可以通过微信搜索【前端有的玩】关注我的公众号加我微信好友,手摸手和你一起学习
Vue3.0
。同时点击下方链接可以访问小编更多精彩文章
学习Vue3.0,先来了解一下Proxy
实战技巧,Vue原来还可以这样写
绝对干货~!学会这些Vue小技巧,可以早点下班和女神约会了
我在项目中是这样配置Vue的
前方高能,这是最新的一波Vue实战技巧,不用则已,一用惊人
学会使用Vue JSX,一车老干妈都是你的
使用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 Rollup for production. 翻译成中文就是:Vite
是一个由原生 ES Module
驱动的 Web
开发构建工具。在开发环境下基于浏览器原生 ES imports
开发,在生产环境下基于Rollup
打包。
上面这段话提到了一个关键字ES Module
,这个是什么呢?详细的介绍大家可以访问 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules 进行查看。此处我们长话短说。在最早的时候,还没有前端工程化,然后我们写javascript
都是写到一个文件,然后通过script
标签去引用,后来随着前端发展越来越壮大,js
之间依赖越来越复杂,这时候就需要有一种可以将JavaScript 程序拆分为可按需导入的单独模块
的机制来维护这个依赖,随之就诞生了AMD
,CMD
等等,而ES Module
就是浏览器支持的原生模块依赖的功能。
为什么要用vite
为什么尤大大要推出vite
,在我们使用webpack
的时候,每次开发时候启动项目都需要几十秒甚至超过一分钟,比较慢,而且热更新也比较慢,而vite
的主要特点就是快,官网对于vite
的特点是这样描述的
快速的冷启动
即时的模块热更新
真正的按需编译
到底有多快呢,我们先新建一个项目试试
初始化vite项目
初始化项目, 在工作空间打开终端窗口,对于
window
用户即cmd
,然后执行下面命令yarn create vite-app my-vue3
执行之后就会输出以下内容,可以看到新建项目特别快,仅仅用了
1.63s
初始化完项目,通过
cd my-vue3
进行到项目里面,然后再执行yarn
安装依赖(此处建议使用淘宝镜像,比较快)依赖安装完需要通过
yarn dev
启动项目是不是瞬间体验到了秒启项目的感觉,启动之后就可以通过
http://localhost:3000
来访问项目了
查看项目结构
使用vscode
打开项目之后,可以查看到新建的项目结构与vue-cli4
创建的项目结构基本一样,都是我们很熟悉的App.vue
和main.js
查看main.js文件内容
打开main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'createApp(App).mount('#app')
发现创建Vue
的方式变了,原来是通过new Vue
的方法来初始化Vue
,在Vue3.0
中,修改为了通过createApp
的方式,关于Vue3.0
的更多使用方式,我们将在后面的系列文章中逐渐为您带来讲解。
配置typescript
typescript
现在已经成为了前端必备技能之一,大量的项目也开始基于typescript
进行开发。在使用Vue2.0
的时候,因为Vue2.0
没有对typescript
进行支持,所以使用ts
开发功能显示有些别扭。但到了Vue3
,其自身源码便是基于ts
开发的,所以对ts
天生有着很好的支持。使用vite
配置typescript
很简单,只需要进行以下几步操作.
安装
typescript
yarn add typescript -D
初始化
tsconfig.json
# 然后在控制台执行下面命令 npx tsc --init
将
main.js
修改为main.ts
,同时将index.html
里面的引用也修改为main.ts
, 通过还需要修改App.vue
与HelloWorld.vue
文件,修改方式如下<!--将 <script> 修改为 <script lang="ts">--> <script lang="ts"> import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld} } </script>
修改完之后,重启就可以访问项目了。虽然这样配置是可以了,但是打开
main.ts
会发现import App from App.vue
会报错:Cannot find module './App.vue' or its corresponding type declarations.
,这是因为现在ts
还没有识别vue
文件,需要进行下面的配置:接下来你就可以开开心心的在组件中使用
ts
了在项目根目录添加
shim.d.ts
文件添加以下内容
declare module "*.vue" {import { Component } from "vue";const component: Component;export default component; }
配置 vue-router
在Vue2.0
中我们路由一般会选择使用vue-router
,在Vue3.0
依然可以使用vue-router
,不过和Vue3.0
一样当前vue-router
的版本也是beta
版本,在本文撰写的时候,版本是4.0.0-beta7
安装vue-router
因为当前vue-router
针对vue3.0
的版本还是beta
版本,所以不能直接通过yarn add vue-router
进行安装,而是需要带上版本号
yarn add vue-router@4.0.0-beta7
配置vue-router
在项目src
目录下面新建router
目录,然后添加index.ts
文件,在文件中添加以下内容
import {createRouter, createWebHashHistory} from 'vue-router'// 在 Vue-router新版本中,需要使用createRouter来创建路由
export default createRouter({// 指定路由的模式,此处使用的是hash模式history: createWebHashHistory(),// 路由地址routes: []
})
与新的Vue3.0
初始化方式发生变化一样,vue-router
的初始化方式也发生了变化,变成了通过createRouter
来初始化路由。
将router
引入到main.ts
中
修改main.ts
文件内容如下
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'const app = createApp(App)
// 通过use 将 路由插件安装到 app 中
app.use(router)
app.mount('#app')
配置 vuex
与vue-router
一样,新的vuex
当前也处于beta
版本,当前版本是4.0.0-beta.4
安装vuex
yarn add vuex@4.0.0-beta.4
配置vuex
在项目src
目录下面新建store
目录,并添加index.ts
文件,文件中添加以下内容
import { createStore } from 'vuex'interface State {userName: string
}export default createStore({state(): State {return {userName: "子君",};},
});
引入到main.ts
中
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
import store from './store/index'const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
开发TodoList
通过上面的一系列操作,我们的开发环境就已经配置完成了,接下来我们就通过新的开发环境先开发一个TodoList
,来验证一下是否正常。
添加todolist
页面
首先我们先在
src
目录下面新建一个views
目录,然后在其中新建文件todo-list.vue
,并为文件添加以下内容<template><div class="todo-list"><div><label>新增待办</label><input v-model="state.todo" @keyup.enter="handleAddTodo"></div><div><h3>待办列表({{todos.length}})</h3><ul><li v-for="item in todos" :key="item.id" @click="handleChangeStatus(item, true)"><input type="checkbox"><label>{{item.text}}</label></li></ul></div><div><h3>已办列表({{dones.length}})</h3></div><ul><li v-for="item in dones" :key="item.id" @click="handleChangeStatus(item, false)"><input type="checkbox" checked><label>{{item.text}}</label></li></ul></div> </template> <script lang="ts">// 在vue2中 data 在vue3中使用 reactive代替 import { reactive, computed } from 'vue' import { useRouter } from 'vue-router' export default {// setup相当于vue2.0的 beforeCreate和 created,是vue3新增的一个属性,所有的操作都在此属性中完成setup(props, context) {// 通过reactive 可以初始化一个可响应的数据,与Vue2.0中的Vue.observer很相似const state = reactive({todoList: [{id: 1,done: false,text: '吃饭'},{id: 2,done: false,text: '睡觉'},{id: 3,done: false,text: '打豆豆'}],todo: ''})// 使用计算属性生成待办列表const todos = computed(() => {return state.todoList.filter(item => !item.done)})// 使用计算属性生成已办列表const dones = computed(() => {return state.todoList.filter(item => item.done)})// 修改待办状态const handleChangeStatus = (item ,status) => {item.done = status}// 新增待办const handleAddTodo = () => {if(!state.todo) {alert('请输入待办事项')return}state.todoList.push({text: state.todo,id: Date.now(),done: false})state.todo = ''}// 在Vue3.0中,所有的数据和方法都通过在setup 中 return 出去,然后在template中使用return {state,todos,dones,handleChangeStatus,handleAddTodo}} } </script> <style scoped> .todo-list{text-align: center; }.todo-list ul li {list-style: none; } </style>
调整路由
首先将
App.vue
文件内容修改为<template><router-view></router-view> </template><script lang="ts">export default {name: 'App' } </script>
然后修改
router/index.ts
文件,添加新的路由import {createRouter, createWebHashHistory} from 'vue-router'// 在 Vue-router新版本中,需要使用createRouter来创建路由 export default createRouter({// 指定路由的模式,此处使用的是hash模式history: createWebHashHistory(),// 路由地址routes: [{path: '/todolist',// 必须添加.vue后缀component: () => import('../views/todo-list.vue')}] })
这时候我们就可以通过
http://localhost:3000/#/todolist
来访问TodoList
了,效果如下图所示
总结
到此,我们Vue3.0
的开发环境算是搭建完成了,当然现在还有好多好多要完善的东西,比如我们还需要去调整一下typescript
的配置,然后添加eslint
等等。同时如何在组件中跳转路由,使用vuex
还没有去讲解,不过至少我们已经起步了,更多的内容将会在下一篇文章中讲到。
结语
不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。——文森特・梵高
推荐阅读
那个从深圳流水线工人去Google上班程序媛,最近失业了!阿里正式取消周报:打击低效加班,拒绝形式主义!什么是a站、b站、c站、d站、e站、f站、g站、h站、i站、j站、k站、l站、m站、n站…z站?中国程序员VS美国程序员,太形象了...
欢迎扫描加我微信一起交流基金理财知识,技术,项目管理
当前有哪些投资机会?可转债打新,怎么参与?风险怎么样?怎么操作?欢迎加入免费知识星球
同800+朋友们交流~如有收获,点个在看,诚挚感谢♡
学习Vue3.0,先从搭建环境开始相关推荐
- ESP32学习笔记(1)——搭建环境、编译烧写(Windows+VS Code)
Espressif-IDE 环境搭建参看 ESP32学习笔记(50)--搭建环境.编译烧写(Windows+Espressif-IDE) 一.搭建环境 1.1 官方资料 ESP-IDF 编程指南 1. ...
- ESP8266学习笔记(1)——搭建环境、编译烧写(NONOS SDK)
RTOS SDK环境搭建参看 ESP8266学习笔记(17)--搭建环境.编译烧写(RTOS SDK) 一.搭建环境 1.1 ESP8266 SDK 入门指南 官网下载:https://www.esp ...
- ESP32学习笔记(51)——搭建环境、编译烧写(Windows+Espressif-IDE)
VS Code 环境搭建参看 ESP32学习笔记(1)--搭建环境.编译烧写(Windows+VS Code) 一.搭建环境 1.1 官方资料 ESP-IDF 编程指南 1.2 下载Espressif ...
- 学习Vue3.0,先来了解一下Proxy
产品经理身旁过,需求变更逃不过. 测试姐姐眯眼笑,今晚bug必然多. 据悉Vue3.0的正式版将要在本月(8月)发布,从发布到正式投入到正式项目中,还需要一定的过渡期,但我们不能一直等到Vue3正式投 ...
- CC2640R2F学习笔记(1)——搭建环境、编译烧写
一.搭建环境 1.1 安装BLE5.0 协议栈 SDK 官网下载:http://www.ti.com/tool/download/SIMPLELINK-CC2640R2-SDK 百度网盘:https: ...
- 学习Vue3.0笔记
Vue3.0快速上手 @[TOC](Vue3.0快速上手) Vue3简介 Vue3.0相对于Vue2多了些什么? 1.性能的提升 2.源码改变 3.拥抱TS 4.新特性(重点) 常用的组合式API V ...
- IMX6ULL学习笔记(1)——搭建环境、编译烧写
一.搭建环境 1.1 安装VMware 官网下载:https://customerconnect.vmware.com/en/downloads/info/slug/desktop_end_user_ ...
- NRF52832学习笔记(1)——搭建环境、编译烧写
一.搭建环境 1.1 安装Keil 5 官网下载:http://www2.keil.com/mdk5/ 百度网盘:https://pan.baidu.com/s/1T_eF5NDYeq38bR0cqj ...
- MT7688学习笔记(1)——搭建环境、编译烧写
一.搭建环境 1.1 安装VMware 链接:https://pan.baidu.com/s/1bnmU5tSrk6WyUGHu2oNBgw 密码:iec1 1.2 安装Ubuntu 链接:https ...
最新文章
- pandas将字典转换成dataframe,两重字典
- 超炫jQuery测试答题功能
- java 多线程同步问题_Java多线程同步问题:一个小Demo完全搞懂
- [导入]身份验证方面的问题
- 有关Monkey命令的两个隐藏选项
- 集结500+CEO北京共“吹牛”,移动认证又搞什么大事情?
- Android系统联系人全特效实现(上),分组导航和挤压动画
- windows纯手工安装php和Apache以及连接mysql
- 十三、mysql 分区之 RANGE LIST
- 蓝桥杯备战(一)3n+1问题
- python语法详解大全_Python语法大全
- GIF图片批量改JPG格式
- 计算机十年歌曲,抖音还有多少个十年原唱是谁 歌词一览
- SQL语句记了又忘?常用的SQL语句,配语句和图解超详细o
- Pygame实战:多年后“魂斗罗”像素风归来 不止是经典与情怀@全体成员
- 信用评分模型详解(下)之 信用评分系统搭建
- 甜心奶酪用英文怎么说_您组织中没有人会碰到什么奶酪,更不用说动弹了?
- 【技美百人计划】图形 4.4 抗锯齿概论
- 郁闷,做了很多无用功
- 修复typec otg数据线