vue2 3 新项目（Vue3全家桶ViteTS）
vue2 3 新项目（Vue3全家桶ViteTS）shim.d.ts: (这个其实不太需要，因为项目中全是通过tsx开发的)... ... <body> ... ... <script type="module" src="/src/main.ts"></script> </body> </html> 优化TS类型推断在src目录下，创建shim.d.ts、source.d.tsmodule.exports = { parser: 'vue-eslint-parser' parserOptions: { parser: '@typescript-eslint/parser' // Specifies the ESLint parser ecmaVersion: 2020 // A
作者：Winer
转发链接：https://segmentfault.com/a/1190000023267394
Vue3与TSX尝鲜版涉及到的主要依赖- vite@1.0.0-beta.11：新一代脚手架
- vue@3.0.0-beta.22：beta版
- vuex@4.0.0-beta.4
- vue-router@4.0.0-beta.2
- typescript@3.9.6
- 确保安装yarn
npm install yarn -g
- 确保安装vite脚手架
npm install -g create-vite-app
# or
yarn add -g create-vite-app开始项目初始化
yarn create vite-app <project-name>集成TS
yarn add --dev typescript
项目根目录创建配置文件：tsconfig.json：
{
"include": ["./**/*.ts"]
"compilerOptions": {
"jsx": "react"
"target": "es2020" /* Specify ECMAScript target version: 'ES3' (default) 'ES5' 'ES2015' 'ES2016' 'ES2017' 'ES2018' or 'ESNEXT'. */
"module": "commonjs" /* Specify module code generation: 'none' 'commonjs' 'amd' 'system' 'umd' 'es2015' or 'ESNext'. */
// "lib": ["es2017.object"] /* Specify library files to be included in the compilation. */
// "declaration": true /* Generates corresponding '.d.ts' file. */
// "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */
"sourceMap": true /* Generates corresponding '.map' file. */
// "outFile": "./" /* Concatenate and emit output to single file. */
"outDir": "./dist" /* Redirect output structure to the directory. */
"strict": true /* Enable all strict type-checking options. */
"noUnusedLocals": true /* Report errors on unused locals. */
"noImplicitReturns": true /* Report error when not all code paths in function return a value. */
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
}
}集成eslint
yarn add --dev eslint eslint-plugin-vue
项目根目录创建配置文件.eslintrc.js：
module.exports = {
parser: 'vue-eslint-parser'
parserOptions: {
parser: '@typescript-eslint/parser' // Specifies the ESLint parser
ecmaVersion: 2020 // Allows for the parsing of modern ECMAScript features
sourceType: 'module' // Allows for the use of imports
ecmaFeatures: {
// tsx: true // Allows for the parsing of JSX
jsx: true
}
}
// settings: {
// tsx: {
// version: "detect" // Tells eslint-plugin-React to automatically detect the version of React to use
// }
// }
extends: [
'plugin:vue/vue3-recommended'
'plugin:@typescript-eslint/recommended' // Uses the recommended rules from the @typescript-eslint/eslint-plugin
'prettier/@typescript-eslint' // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
'plugin:prettier/recommended' // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
]
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "@typescript-eslint/explicit-function-return-type": "off"
}
};集成pritter
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
项目根目录创建配置文件：.prettierrc.js：
module.exports = {
semi: true
trailingComma: "all"
singleQuote: true
printWidth: 100
tabWidth: 2
endOfLine:"auto"
};
到这一步，一个Vue3 TSX的项目就搭建起来了，以上配置文件的具体内容就不做解释了。
修改入口文件因为默认项目模板是以src/main.js为入口的，我们需要把它修改为src/main.ts。 在根目录的index.html中修改入口文件的引用即可：
... ...
<body>
... ...
<script type="module" src="/src/main.ts"></script>
</body>
</html>
优化TS类型推断
在src目录下，创建shim.d.ts、source.d.ts
shim.d.ts: (这个其实不太需要，因为项目中全是通过tsx开发的)
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
source.d.ts: (优化编译器提示，声明静态资源文件)
declare const React: string;
declare module '*.json';
declare module '*.png';
declare module '*.jpg';集成vue-router
yarn add --dev vue-router@4.0.0-beta.2
这里可以去npm官网查找最新版本 在src目录下，新建router文件夹，并在文件夹内创建index.tsindex.ts:
import { RouteRecordRaw createRouter createWebHistory } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/'
name: 'Home'
component: import('../views/Home')
}
{
path: '/about'
name: 'About'
component: () => import('../views/About')
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL)
routes
});
export default router;
这里创建router的方式与之前不同，在vue3中，结合TS的类型推断，开发效率会高很多。
集成vuexyarn add --dev vuex@4.0.0-beta.4
在src目录下，新建store文件夹，并在文件夹内创建index.ts
index.ts:
import { state } from './state';
import { createStore } from 'vuex';
export default createStore({
state
mutations: {}
actions: {}
modules: {}
});
state.js:
export interface State {
title: string;
}
export const state: State = {
title: 'Vue(v3) 与 tsx 的结合~'
};main.ts
最终main.ts中引入store、router：
import { createApp } from 'vue';
import App from './App';
import router from './router';
import store from './store';
createApp(App).use(router).use(store).mount('#app');结尾
vue3正式版的发布，势必导致vue2的周边框架的集体更新，例如UI框架、基于Vue2的指令库等，作为这么久的白嫖党，也要为vue3社区的建设出一份力了。
Vue3与TS的结合是大趋势，如果不适应TS，那还是建议使用Vue2吧。23333~
后续博主也将研究vite框架和vue3全家桶的新特性与API，争取输出有质量的文档。
最后附上源码地址： https://github.com/justwiner/vue3-tsx
推荐Vue学习资料文章：《精读《Vue3.0 Function API》 》
《手把手教你Electron Vue实战教程（六） 》
《Vue中mixin怎么理解？ 》
《封装一个精致vue视频播放器组件》
《入口开始解读Vue源码系列（一）——造物创世》
《深入浅出探索 Vue 路由「值得收藏」》
《学会使用Vue JSX，一车老干妈都是你的》
《细聊Vue 3 系列之 JSX 语法》
《「速围」尤雨溪详细介绍 Vue 3 的最新进展》
《细聊single-spa vue来实现前端微服务项目》
《前端新工具—vite从入门到实践》
《一文带你搞懂Vue3 底层源码》
《9个优秀的 VUE 开源项目》
《细聊Single-Spa Vue Cli 微前端落地指南「实践」》
《通俗易懂的Vue异步更新策略及 nextTick 原理》
《通俗易懂的Vue响应式原理以及依赖收集》
《原生JS Vue实现框选功能》
《Vue.js轮播库热门精选》
《一文带你搞懂vue/react应用中实现ssr(服务端渲染)》
《Vue CSS3 实现图片滑块效果》
《教你Vue3 Compiler 优化细节，如何手写高性能渲染函数（上）》
《教你Vue3 Compiler 优化细节，如何手写高性能渲染函数（下）》
《vue实现一个6个输入框的验证码输入组件》
《一用惊人的Vue实践技巧「值得推荐」》
《Vue常见的面试知识点汇总（上）「附答案」》
《Vue常见的面试知识点汇总（下）「附答案」》
《Kbone原理详解与小程序技术选型》
《为什么我不再用Vue，改用React？》
《让Jenkins自动部署你的Vue项目「实践」》
《20个免费的设计资源 UI套件背景图标CSS框架》
《Deno将停止使用TypeScript，并公布五项具体理由》
《前端骨架屏都是如何生成的》
《Vue原来可以这样写开发效率杠杠的》
《用vue简单写一个音乐播放组件「附源码」》
《为什么Vue3.0不再使用defineProperty实现数据监听？》
《「干货」学会这些Vue小技巧，可以早点下班和女神约会》
《探索 Vue-Multiselect》
《细品30张脑图带你从零开始学Vue》
《Vue后台项目中遇到的技术难点以及解决方案》
《手把手教你Electron Vue实战教程（五）》
《手把手教你Electron Vue实战教程（四）》
《手把手教你Electron Vue实战教程（三）》
《手把手教你Electron Vue实战教程（二）》
《手把手教你Electron Vue实战教程（一）》
《收集22种开源Vue模板和主题框架「干货」》
《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》
《手把手教你实现一个Vue自定义指令懒加载》
《基于 Vue 和高德地图实现地图组件「实践」》
《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》
《是什么让我爱上了Vue.js》
《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》
《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》
《「实践」Vue 数据更新7 种情况汇总及延伸解决总结》
《尤大大细说Vue3 的诞生之路「译」》
《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》
《大厂Code Review总结Vue开发规范经验「值得学习」》
《Vue3 插件开发详解尝鲜版「值得收藏」》
《带你五步学会Vue SSR》
《记一次Vue3.0技术干货分享会》
《Vue 3.x 如何有惊无险地快速入门「进阶篇」》
《「干货」微信支付前后端流程整理(Vue Node)》
《带你了解 vue-next（Vue 3.0）之 炉火纯青「实践」》
《「干货」Vue 高德地图实现页面点击绘制多边形及多边形切割拆分》
《「干货」Vue Element前端导入导出Excel》
《「实践」Deno bytes 模块全解析》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《基于vue element的后台管理系统解决方案》
《Vue仿蘑菇街商城项目（vue koa mongodb）》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《基于 Vue 技术栈的微前端方案实践》
《消息队列助你成为高薪 Node.js 工程师》
《Node.js 中的 stream 模块详解》
《「干货」Deno TCP Echo Server 是怎么运行的？》
《「干货」了不起的 Deno 实战教程》
《「干货」通俗易懂的Deno 入门教程》
《Deno 正式发布，彻底弄明白和 node 的区别》
《「实践」基于Apify node react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》
《深入Vue 必学高阶组件 HOC「进阶篇」》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习，快速入门熟练 Vue3 核心新特性（一）》
《10个实例小练习，快速入门熟练 Vue3 核心新特性（二）》
《教你部署搭建一个Vue-cli4 Webpack移动端框架「实践」》
《2020前端就业Vue框架篇「实践」》
《详解Vue3中 router 带来了哪些变化？》
《Vue项目部署及性能优化指导篇「实践」》
《Vue高性能渲染大数据Tree组件「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《10个Vue开发技巧「实践」》
《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》
《带你了解 vue-next（Vue 3.0）之 小试牛刀【实践】》
《带你了解 vue-next（Vue 3.0）之 初入茅庐【实践】》
《实践Vue 3.0做JSX(TSX)风格的组件开发》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3世界的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《怎样为你的 Vue.js 单页应用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》
《Vue真是太好了 壹万多字的Vue知识点 超详细!》
《Vue Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《总结Vue组件的通信》
《Vue 开源项目 TOP45》
《2020 年，Vue 受欢迎程度是否会超过 React？》
《尤雨溪：Vue 3.0的设计原则》
《使用vue实现HTML页面生成图片》
《实现全栈收银系统（Node Vue）（上）》
《实现全栈收银系统（Node Vue）（下）》
《vue引入原生高德地图》
《Vue合理配置WebSocket并实现群聊》
《多年vue项目实战经验汇总》
《vue之将echart封装为组件》
《基于 Vue 的两层吸顶踩坑总结》
《Vue插件总结【前端开发必备】》
《Vue 开发必须知道的 36 个技巧【近1W字】》
《构建大型 Vue.js 项目的10条建议》
《深入理解vue中的slot与slot-scope》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《使用vue node搭建前端异常监控系统》
《推荐 8 个漂亮的 vue.js 进度条组件》
《基于Vue实现拖拽升级（九宫格拖拽）》
《手摸手，带你用vue撸后台 系列二(登录权限篇)》
《手摸手，带你用vue撸后台 系列三(实战篇)》
《前端框架用vue还是react？清晰对比两者差异》
《Vue组件间通信几种方式，你用哪种？【实践】》
《浅析 React / Vue 跨端渲染原理与实现》
《10个Vue开发技巧助力成为更好的工程师》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《1W字长文 多图，带你了解vue的双向数据绑定源码实现》
《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》
《Vue3.0权限管理实现流程【实践】》
《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》
作者：Winer
转发链接：https://segmentfault.com/a/1190000023267394
