Vite+Vue3+TypeScript学习笔记

黑森林有鹿 發表於 2021-10-5 08:41:00

1、学习背景 
随着前端web应用的需求不断发展和变化，vue生态圈也紧跟开发者步伐，不断演化。尽管vue2.0已经很完善了，很多人掌握的vue2.0，感觉实在学不动了，意料之外的是尤先生继续更新vue到3.0版本，以补充vue2.0的不足之处。随着vue3.0问世，vite2.5.1也油然而生，vue始终没有放弃对项目响应速度和编译速度的追求，vite的到来，对于前端开发者而言，简直不要太幸福了。vue3.0不仅全面支持TypeScript语法，还对生命周期钩子进行了优化和剔除，加上工具setup的语法糖，vue单页面多个根元素的扩展，代码精简不说，还很有条理，vue3.0的出现再次提升了开发者的编码体验和幸福感。另外vue3整合typescript语言是前端未来发展的必然趋势，而生为vue家族的新成员vite也是前端技术爱好者的学习目标，赢在起点，从学习新技术开始。活到老，学到老，是一个合格前端开发者的毕生信仰。 
2、vite简介 
vite诞生是为了提升web项目运行性能，以更快的速度将应用页面展示给用户。Vite 以原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。 
提供的驱动力： 
2.1、优化缓慢的服务器启动（冷启动开发服务器和正式环境响应速度）； 
2.2、优化缓慢的项目更新（vite服务器）；
3、vite创建项目 
兼容性注意: 
Vite 需要 Node.js 版本 >= 12.0.0。 
必须安装Volar插件，用vscode编辑器 
// 安装vite 
1、npm init vite@latest
// 安装vite同时创建vite项目 
2、npm init vite@latest my-vue-app --template vue 
{ 
"scripts": { 
"dev": "vite", // 启动开发服务器 
"build": "vite build", // 为生产环境构建产物 
"serve": "vite preview" // 本地预览生产构建产物 
} 
} 
4、版本依赖兼容和项目目录介绍 
package.json版本依赖说明, 这里是整个项目依赖版本配置，相关安装指令后面视频中会逐个教大家如何安装。 
注意：vuex和router都是4.0及以上版本的，否则用vue3时，找不到暴露的api 
{ 
"name": "vite-ts-vue3-plus-demo", 
"version": "0.0.0", 
"scripts": { 
"dev": "vite", 
"build": "vue-tsc --noEmit && vite build", 
"serve": "vite preview" 
}, 
"dependencies": { 
"@element-plus/icons": "0.0.11", 
"dotenv": "^10.0.0", 
"element-plus": "^1.1.0-beta.7", 
"vue": "^3.0.5", 
"vue-router": "^4.0.11", 
"vuex": "^4.0.2" 
}, 
"devDependencies": { 
"@types/node": "^16.7.1", 
"@vitejs/plugin-vue": "^1.3.0", 
"@vue/compiler-sfc": "^3.0.5", 
"node-sass": "^6.0.1", 
"sass": "^1.38.1", 
"sass-loader": "^12.1.0", 
"typescript": "^4.3.2", 
"vite": "^2.4.4", 
"vue-tsc": "^0.2.2" 
} 
} 
5、setup语法糖使用 
5.1 setup前身组合式API（基础用法） 
注意：在setup()中不能用this 
在 <code>setup</code> 中你应该避免使用 <code>this</code>，因为它不会找到组件实例。<code>setup</code> 的调用发生在 <code>data</code> property、<code>computed</code> property 或 <code>methods</code> 被解析之前，所以它们无法在 <code>setup</code> 中被获取，这也是为了避免setup()和其他选项式API混淆。 
/* 参数说明
<ul>
<li>props 是响应式的，当传入新的 prop 时，它将被更新</li>
<li>context 是一个普通的上下文JavaScript对象，它暴露组件的三个 property（包括属性，插槽，方法）,</li>
<li>如下示例1所示 
*/ 
// 示例1</li>
</ul>

5.2 setup后世（高级用法），推荐用法 
注意：defineProps不需要引入，vue单文件内部自动暴露的API

// 高级用法

6、defineProps 和 defineEmits 
注意：defineProps 和 defineEmits 都是只在
6.2 、父组件vue

<template>
<testpropspmit :msg="msg" @on-change="handleChange"></testpropspmit>
</template>
温馨提示：这里介绍一哈volar插件小图标在vue文件里的作用：
点击这个三角形图标，会将文件归类显示，方便编写代码；
7、正确使用defineExpose 
使用
7.2、父组件调用子组件方法和属性 
<template> 
<TestPropsEmit ref="propsEmitRef" :msg='msg' @on-change="handleChange"> 
</template>

7.3 在setup如何定义变量(字符串,对象,数组) 
<template> 
<h2>{{count}} {{user.name}}</h2> 
{{item}} 
<button @click="setName">点击我增加 
</template>

8、Watch和WatchEffect 
1、基本使用方法： 
<template> 
{{originData.count}}{{originData.user.name}} 
{{item}} 
<button @click="incriment">点击我count增加 
</template>

2、watch与 watchEffect 比较，推荐watch监听 
watch: 页面更新后不会立即执行，而watchEffect 它会执行； 
如果要实现：watch在页面更新之后就执行，需要增加立即执行的属性； 
watch(, (n, o)=> {console.log(n,n.name)}, {deep: true, immediate: true}) 
1、watch和watchEffect都懒执行副作用，不过watchEffect比较频繁，在vue组件更新之前执行； 
2、watch更具体地说明什么状态应该触发侦听器重新运行，watchEffect就没有这么友好； 
3、watch访问侦听状态变化前后的值。 
9、在setup中的生命周期钩子 
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。 
下表包含如何在 setup () 内部调用生命周期钩子： 
选项式 APIHook inside setup 
beforeCreateNot needed* 不需要 
createdNot needed* 不需要 
beforeMountonBeforeMount 挂载之前 
mountedonMounted 页面加载完成时执行 
beforeUpdateonBeforeUpdate 
updatedonUpdated 
beforeUnmountonBeforeUnmount 
unmountedonUnmounted页面销毁时执行 
errorCapturedonErrorCaptured 
renderTrackedonRenderTracked 
renderTriggeredonRenderTriggered 
activatedonActivated 
deactivatedonDeactivated

10、用Ts限制define(Emits|Props)参数类型 
注意： 
1、在setup语法糖中引入组件不需要注册声明就可以直接用了 
2、ts 限制组件传参类型，默认是必须传值的，否则控制台出现警告，引入组件的地方会出现红色提醒，不想必传在绑定参数后加?即可 
3、ts传参支持多种类型校验，一个参数可以传字符串，数组，Boolean等 
4、用ts方式限制defineEmits和defineProps参数类型 
1、子组件 
<template> 
<h1>{{msg}}</h1> 
<h3>{{title}}</h3> 
<input v-model="inputValue" type="text" @blur="handleUpdate($event)"> 
</template>

2、父组件

<template>
<cellsample @update="update"></cellsample>
</template>
11、递归组件 
一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 FooBar.vue 的组件可以在其模板中用 <foobar> 引用它自己。 
请注意这种方式相比于 import 导入的组件优先级更低。如果有命名的 import 导入和组件的推断名冲突了，可以使用 import 别名导入： 
import { FooBar as FooBarChild } from './components' 
注意：这里有小问题，当单文件引入单文件时会出现内存溢出现象 
12、component动态组件 
由于组件被引用为变量而不是作为字符串键来注册的，在
<template>
<component :is="Foo">
<component :is="someCondition ? Foo : Bar">
</component></component></template>
13、ts限制普通函数/箭头函数参数类型
13.1普通函数

13.2箭头函数，推荐用法

14、引入vuex配置和使用
14.1 创建项目时我们已经引入了vuex4.0版本，接下来我们就开始配置vuex4.0并测试。
// 注意必须安装vuex4.0版本及以上
npm install vuex@next --save
#or
yarn add vuex@next --save
14.2 在src目录下创建store文件夹，新建文件index.ts, index.ts内容如下所示：
import { InjectionKey } from 'vue'
/**
* 引入 InjectionKey 并将其传入 useStore 使用过的任何地方，
* 很快就会成为一项重复性的工作。为了简化问题，可以定义自己
* 的组合式函数来检索类型化的 store
*/
// 未简化useStore版
// import { createStore, Store } from 'vuex'
// 简化useStore版
import { useStore as baseUseStore, createStore, Store} from 'vuex'
</foobar>// 为 store state 声明类型 
export interface State { 
username: string, 
count: number 
}
// 定义 injection key 
export const key: InjectionKey<Store<state>> = Symbol()</state>
// 导出store模块 
export const store = createStore<state>({ 
state: { 
username: "测试store", 
count: 0 
}, 
getters:{ 
getName: state =>{ 
return state.username 
} 
}, 
mutations: { 
// 重置名称 
SET_NAME(state, params:string) { 
state.username = params 
} 
}, 
actions:{} 
})</state>
// 定义自己的 <code>useStore</code> 组合式函数 
export function useStore () { 
return baseUseStore(key) 
} 
14.3 在根目录下新建vuex-d.ts文件，内容如下所示： 
// 一个声明文件来声明 Vue 的自定义类型 ComponentCustomProperties 
import { ComponentCustomProperties } from 'vue'; 
import { Store } from 'vuex';
declare module '@vue/runtime-core' { 
// 声明自己的 store state 
interface State { 
count: number, 
username: string 
} 
// 为 <code>this.$store</code> 提供类型声明 
interface ComponentCustomProperties { 
$store: Store<state> 
} 
} 
14.4在main.ts中注入store模块 
import { createApp } from 'vue'; 
import App from './App.vue'; 
// 导入store模块, 传入 injection key 
import { store, key } from '@/store'; 
const app = createApp(App) 
app.use(store, key) 
app.mount('#app') 
14.5引用测试vuex配置是否正确 
<el-button @click="changeName" size="small">点击修改名称</state>

15、router配置以及使用详解 
15.1 安装 
创建项目时我们已经引入了router4.0版本，接下来我们就开始配置router4.0并测试。 
// 注意：安装router必须是4.0及以上 
npm install vue-router@4 
15.2 页面准备 
目录结构
页面具体内容： 
1、layout/index.vue 
<template> 
<header> 
<router-view></router-view> 
</header></template>

2、layout/header/index.vue 
<template> 
<div class="action"> 
<h2 @click="handleClick(1)">首页 
<h2 @click="handleClick(0)">关于 
</div> 
</template>

<style>.action { display: flex }
h2 { padding: 0 10px; cursor: pointer }
h2:hover { color: rgba(255, 0, 0, 1) }</style>
3、pages/home/index.vue 
<template> 
<h2>home</h2> 
</template> 
4、pages/about/index.vue 
<template> 
<h2>about</h2> 
</template> 
15.3 在src目录下创建router文件夹，然后创建index.ts文件，内容如下所示： 
import { createRouter, createWebHashHistory } from "vue-router"; 
import LayOut from "../components/layout/index.vue";
const routes = [ 
{ 
path: '/', 
component: LayOut, 
redirect: '/home', 
children:[ 
{ 
path: '/home', 
name: 'home', 
component: ()=> import("../pages/home/index.vue"), 
meta:{ 
title: '首页', 
icon: '' 
} 
}, 
{ 
path: '/about', 
name: 'about', 
component: ()=> import("../pages/about/index.vue"), 
meta:{ 
title: '关于', 
icon: '' 
} 
} 
] 
} 
] 
const router = createRouter({ 
history: createWebHashHistory(), 
routes 
}) 
export default router 
15.4 在main.ts中注入router模块, 重新启动项目，访问路由，看是否正确 
import { createApp } from 'vue' 
import App from './App.vue' 
import { store, key } from './store'; 
import router from './router';
const app = createApp(App); 
app.use(store, key); 
app.use(router); 
app.mount('#app'); 
15.5使用路由 
<template> 
<div class="action"> 
<h2 @click="handleClick(1)">首页 
<h2 @click="handleClick(0)">关于 
</div> 
</template>

<style>.action { display: flex }
h2 { padding: 0 10px; cursor: pointer }
h2:hover { color: rgba(255, 0, 0, 1) }</style>
16、引入element-plus以及注意事项 
16.1 安装 
npm install element-plus --save
<h1 id="or">or</h1>
yarn add element-plus
<h1 id="安装icon图标依赖库">安装icon图标依赖库</h1>
npm install @element-plus/icons
<h1 id="or-1">or</h1>
yarn add @element-plus/icons 
16.2 在main.ts 文件中引入配置 
import { createApp } from 'vue' 
import App from './App.vue' 
import { store, key } from './store'; 
// 注入路由 
import router from './router';
// 引入ui组件 
import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css'
const app = createApp(App); 
app.use(store, key); 
app.use(router); 
app.use(ElementPlus); 
app.mount('#app'); 
16.3 在vue文件中引用ui组件 
1、单个图标引用 
<template> 
<el-icon :size="20" :color="'blue'"> 
<edit> 
</edit></el-icon> 
</template>

2、全局注册图标使用 
import { createApp } from 'vue' 
import App from './App.vue'
import { Edit,Search } from '@element-plus/icons'
const app = createApp(App); 
app.component("edit", Edit) 
app.component("search", Search) 
app.mount('#app'); 
2、1 使用图标 
<template> 
<h2>home页面</h2> 
<el-button type="primary">主要按钮</el-button> 
<el-button type="success">成功按钮</el-button> 
<el-icon :size="20" :color="'blue'"> 
<edit> 
</edit></el-icon> 
<el-icon :size="20"> 
<search></search> 
</el-icon> 
</template>

17、配置vite.config.ts 
这里主要配置vite服务器的打包保存地址，打包分解，端口号，是否自动打开浏览器，远程请求地址代理目标，目录别名，全局样式配置等。 
import { defineConfig } from 'vite'; 
import vue from '@vitejs/plugin-vue'; 
import { loadEnv } from 'vite'; 
// nodejs写法，获取项目目录 
import path from 'path';
// https://vitejs.dev/config/ 
export default({ command, mode }) => { 
return defineConfig({ 
plugins: , 
server:{ 
host: '127.0.0.1', 
port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT), 
strictPort: true, // 端口被占用直接退出 
https: false, 
open: true,// 在开发服务器启动时自动在浏览器中打开应用程序 
proxy: { 
// 字符串简写写法 
// '/foo': '', 
// 选项写法 
'/api': { 
target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL, 
changeOrigin: true, 
rewrite: (path) => path.replace(/^/api/, '') 
}, 
// 正则表达式写法 
// '^/fallback/.': { 
// target: 'http://jsonplaceholder.typicode.com', 
// changeOrigin: true, 
// rewrite: (path) => path.replace(/^/fallback/, '') 
// }, 
}, 
hmr:{ 
overlay: true // 屏蔽服务器报错 
} 
}, 
resolve:{ 
alias:{ 
'@': path.resolve(__dirname,'./src') 
} 
}, 
css:{ 
// css预处理器 
preprocessorOptions: { 
// 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了 
// 给导入的路径最后加上 ; 
scss: { 
additionalData: '@import "@/assets/styles/global.scss";' 
} 
} 
}, 
build:{ 
chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块 
rollupOptions: { 
output:{ 
manualChunks(id) { 
if (id.includes('node_modules')) { 
return id.toString().split('node_modules/').split('/').toString(); 
} 
} 
} 
} 
} 
}) 
} 
18、tsconfig.json 配置 
这是typescript的识别配置文件，也是ts向js转化的中间站，这里配置了许多关于ts的文件类型和策略方法。 
{ 
"compilerOptions": { 
"target": "esnext", 
"module": "esnext", 
"moduleResolution": "node", 
"strict": true, 
"jsx": "preserve", 
"sourceMap": true, 
"resolveJsonModule": true, 
"esModuleInterop": true, 
"lib": ["esnext", "dom"], 
"baseUrl": ".", 
"paths": { 
"@/":["src/"] 
} 
}, 
"include": ["src/**/.ts", "src//*.d.ts", "src//.tsx", "src/**/.vue"] 
} 
19、shims-vue.d.ts配置, 声明vue文件全局模块 
这里是配置声明，比如css，vue等文件，ts不能识别，需要配置声明模块类型。 
declare module '*.vue' { 
import { DefineComponent } from 'vue' 
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 
const component: DefineComponent<{}, {}, any> 
export default component 
} 
20、安装scss并配置全局样式文件 
// 注意要使用scss，必须安装依赖，否则报错 
npm install node-sass sass-loader sass -D 
20.1需要在src目录的assets静态目录新增一个全局global.scss文件，其他样式文件导入到该文件即可全局使用和修改。
或者在global.scss写一个单独属性测试 
$color-primary: #007aff; 
vue使用全局样式变量 
<template> 
<h2 class="test-color">home页面</h2> 
</template>
<style lang="scss" scoped="">.test-color { }</style>
20.2在vite.config.ts 文件中配置global.scss 
css:{ 
// css预处理器 
preprocessorOptions: { 
// 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了 
// 给导入的路径最后加上 ; 
scss: { 
additionalData: '@import "@/assets/styles/global.scss";' 
} 
} 
} 
21、响应式API 
响应式状态需要明确使用响应式 APIs 来创建。和从 setup() 函数中返回值一样，ref 值在模板中使用的时候会自动解包：

<template>
<button @click="count++">{{ count }}</button>
</template>
22、.env.环境变量配置和读取
环境变量建议放到项目根目录下, 方便vite.config.ts文件读取和使用
.env.production // 生产环境配置文件
.env.development // 开发环境配置文件
22.1 生产和开发环境配置文件内容如下：
写变量时一定要以VITE_开头，才能暴露给外部读取
# 开发环境 / #生产环境
VITE_APP_TITLE = "前端技术栈"
VITE_APP_PORT = 3001
<h1 id="请求接口">请求接口</h1>
VITE_APP_BASE_URL = "http://39.12.29.12:8080"
//env.d.ts文件内进行环境变量智能提示配置 
interface ImportMetaEnv { 
VITE_APP_TITLE: string, 
VITE_APP_PORT: string, 
VITE_APP_BASE_URL: string 
} 
22.2 vite.config.ts 读取配置文件 
import { defineConfig } from 'vite'; 
import vue from '@vitejs/plugin-vue'; 
import { loadEnv } from 'vite'; 
// nodejs写法，获取项目目录 
import path from 'path';
// https://vitejs.dev/config/ 
export default({ command, mode }) => { 
// console.log(command, mode, 5555); 
return defineConfig({ 
plugins: , 
server:{ 
host: '127.0.0.1', 
port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT), 
strictPort: true, // 端口被占用直接退出 
https: false, 
open: true,// 在开发服务器启动时自动在浏览器中打开应用程序 
proxy: { 
// 字符串简写写法 
// '/foo': '', 
// 选项写法 
'/api': { 
target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL, 
changeOrigin: true, 
rewrite: (path) => path.replace(/^/api/, '') 
}, 
// 正则表达式写法 
// '^/fallback/.*': { 
// target: 'http://jsonplaceholder.typicode.com', 
// changeOrigin: true, 
// rewrite: (path) => path.replace(/^/fallback/, '') 
// }, 
// 使用 proxy 实例 
// '/api': { 
// target: 'http://jsonplaceholder.typicode.com', 
// changeOrigin: true, 
// configure: (proxy, options) => { 
// // proxy 是 'http-proxy' 的实例 
// }, 
// } 
}, 
hmr:{ 
overlay: true // 屏蔽服务器报错 
} 
}, 
resolve:{ 
alias:{ 
'@': path.resolve(__dirname,'./src') 
} 
}, 
css:{ 
// css预处理器 
preprocessorOptions: { 
// 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了 
// 给导入的路径最后加上 ; 
scss: { 
additionalData: '@import "@/assets/styles/global.scss";' 
}, 
sass: { 
additionalData: '@import "@/assets/styles/global.scss";' 
} 
} 
}, 
build:{ 
chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块 
rollupOptions: { 
output:{ 
manualChunks(id) { 
if (id.includes('node_modules')) { 
return id.toString().split('node_modules/').split('/').toString(); 
} 
} 
} 
} 
} 
}) 
} 
22.3 其他文件读取环境变量 
<template> 
首页内容展示 
</template>

附上学习视频： 
https://www.bilibili.com/video/BV1QP4y1p748?spm_id_from=333.999.0.0 
来源：https://www.cnblogs.com/KaypoGeng/p/15367915.html

頁: [1]

琼殿技术论坛's Archiver

Vite+Vue3+TypeScript学习笔记