哈喽,大家好 我是
xy
???。 从我最初接触vue3
版本到现在已经有一年的时间。由于 vue3.2 版本的发布,的实验性标志已经去掉,已经陆陆续续有不少公司开始使用
vue3.2
开发项目了。这篇文章就来帮助大家如何快速使用vue3.x
,typeScript
,vite
搭建一套企业级的开发脚手架 ??。废话不多说,直接上手开搞 ??
Vscode
: 前端人必备写码神器Chrome
:对开发者非常友好的浏览器(反正我是很依赖它的)Nodejs
&npm
:配置本地开发环境,安装 Node 后你会发现 npm 也会一起安装下来Vue.js devtools
:浏览器调试插件Vue Language Features (Volar)
:Vscode 开发 vue3 必备插件,提供语法高亮提示,非常好用Vue 3 Snippets
:vue3 快捷输入由于
Vue.js devtools
需要到谷歌扩展商店才能下载,贴心 的xy
已经为大家准备好了crx
文件了,公众号回复:【VueDevTools
】可自动获取哦 ??
Vue3
由于完全由TS
进行重写,在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口(interface
)来进行类型定义。要不然在 ESLint 时都会报错。
vue2
的双向数据绑定是利用 ES5
的一个 API Object.definePropert()
对数据进行劫持 结合 发布订阅
模式的方式来实现的。Vue3
中使用了 es6
的 ProxyAPI
对数据代理。
Vue3
支持碎片(Fragments
)
Vue2 与 Vue3 最大的区别: Vue2 使用Options API
而 Vue3 使用的Composition API
生命周期钩子变化:
Vue2 ~~~~~~~~~~~ vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
Vite:下一代前端开发与构建工具
Vite
(法语意为 “迅速”,发音 /vit/)是一种全新的前端构建工具,它极大地改善了前端开发体验。
它主要由两部分组成:
一个开发服务器,它基于 原生 ES
模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
一套构建指令,它使用 Rollup
打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源。
Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性
,并有完整的类型支持。
兼容性注意:Vite 需要
Node.js
版本>= 12.0.0
。
第一步: 在需要创建项目文件目录下打开 cmd
运行以下命令
npm init @vitejs/app vite_vue3_ts --template
npm init @vitejs/app vite_vue3_ts – --template
yarn create @vitejs/app vite_vue3_ts --template
这里我采用 yarn
来安装
vue
回车 => vue-ts
回车
第三步: cd
到项目文件夹,安装依赖,启动项目
cd vite_vue3_ts
yarn
yarn dev
# eslint 安装
yarn add eslint --dev
# eslint 插件安装
yarn add eslint-plugin-vue --dev
yarn add @typescript-eslint/eslint-plugin --dev
yarn add eslint-plugin-prettier --dev
# typescript parser
yarn add @typescript-eslint/parser --dev
注意: 如果 eslint
安装报错:
可以尝试运行以下命令:
yarn config set ignore-engines true
运行成功后再次执行 eslint
安装命令
配置
eslint
校验规则:
module.exports = {
root: true,
env: {
browser: true,
node: true,
es2021: true,
},
parser: 'vue-eslint-parser',
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
// eslint-config-prettier 的缩写
'prettier',
],
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
// eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写
plugins: ['vue', '@typescript-eslint', 'prettier'],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'no-var': 'error',
'prettier/prettier': 'error',
// 禁止出现console
'no-console': 'warn',
// 禁用debugger
'no-debugger': 'warn',
// 禁止出现重复的 case 标签
'no-duplicate-case': 'warn',
// 禁止出现空语句块
'no-empty': 'warn',
// 禁止不必要的括号
'no-extra-parens': 'off',
// 禁止对 function 声明重新赋值
'no-func-assign': 'warn',
// 禁止在 return、throw