前言
vue3已经正式发布有一段时间了，本着学习使人进步的原则，就开始了vue3的实践之路。vue3推出了一个web开发构建工具vite，那就放弃使用vue-cli尝尝鲜吧。vue3项目也是用了typescript，并且现在ts也很火，就正好一起实践一下。
准备工作
确保安装了node
开始
1、项目初始化
npm init vite-app my-vue3
此时项目就已经初始化好，并且可以正常运行了。
cd my-vue3
npm install
npm run dev
使用vite搭建好的项目是没有使用typescript的，所以我们要去安装typescript并修改代码，以保证我们后续可以使用typescript
2、安装typescript
npm install typescript- 在项目的根目录创建文件：
tsconfig.json:
// 指定了用来编译这个项目的根文件和编译选项
// 配置参考https://www.tslang.cn/docs/handbook/tsconfig-json.html
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true, //这样可以对`this`上的数据属性进行严格的推断，否则总是被视为any类型
"jsx": "preserve",
"moduleResolution": "node"
},
"include": [
"src/**/*", "src/main.d.ts" //**/递归匹配任意子目录
],
"exclude": [
"node_modules"
]
}
- 修改
src/main.js为src/main.ts; - 修改根目录下
index.html中引入的main.js为main.ts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<!--<script type="module" src="/src/main.js"></script>-->
<script type="module" src="/src/main.ts"></script>
</body>
</html>
5、修改项目的入口文件为main.ts，在项目根目录创建文件vue.config.js:
module.exports = {
pages: {
index: {
entry: 'src/main.ts'
}
}
};
经过以上步骤之后，会发现项目还是可以正常启动的，但是在main.ts中会发现有一个报错：
image.png
此时是因为使用ts的时候引入
.vue文件的时候会报错，找不到相应的模块，是因为ts只认识以.ts结尾的文件，并不认识.vue结尾的文件，以此要在项目的/src文件下创建一个.d.ts文件来定义一下.vue文件：
// 在没用用到需要具体定义的内容的时候，可以只声明一下'*.vue'就可以
// src/main.d.ts
declare module '*.vue' {
/*
import {ComponentOptions} from 'vue';
const componentOptions: ComponentOptions;
export default componentOptions; */
}
注意：注意一点要给.d.ts文件一个文件名，例如a.d.ts，否则eslint没有办法对其进行格式化；也请不要把入口文件和.d.ts的文件重名，否则.d.ts文件不生效
3、加入eslint
npm install eslint elsint-plugin-vue -D
安装好之后在项目根目录下添加.eslintrc.js文件：
module.exports = {
root: true,
env: {
'browser': true,
'es2021': true,
'node': true
},
extends: [
'plugin:vue/vue3-essential'
],
parserOptions: {
'parser': '@typescript-eslint/parser'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {
// 规则可以根据自己项目需求配置
// 各个规则配置含义参考http://eslint.cn/docs/rules/
'array-bracket-spacing': ['error', 'never'], // 数组紧贴括号部分不允许包含空格
'object-curly-spacing': ['error', 'never'], // 对象紧贴花括号部分不允许包含空格
'block-spacing': ['error', 'never'], // 单行代码块中紧贴括号部分不允许包含空格
'no-multiple-empty-lines': 'error', // 不允许多个空行
}
};
4、加入vue-router
安装vue-router的时候一定要带上版本号，否则现在安装的还是3.x的版本
npm install vue-router@4
在src/新建文件夹router，并在router文件加下新建index.ts文件：
//现在创建router的方式与vue2.x的版本已经很不同了
import {createRouter, createWebHashHistory} from 'vue-router';
const routes = [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
component: () => import('../components/home.vue')
}
];
const router = createRouter({
history: createWebHashHistory(), //替代之前的mode，是必须的
routes
});
export default router;
修改src/main.ts：
import {createApp} from 'vue';
import App from './App.vue';
import router from './router/index'; //引入vue-router
import './index.css';
const app = createApp(App);
app.use(router); // 挂载到app上
app.mount('#app');
番外篇：VScode配置
由于项目本身集成了eslint，而不是在vscode内部配置的eslint规则，所以在对项目自动保存和格式化的时候有可能会产生冲突，然后需要进行一些vscode配置。
打开settings.json:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"window.zoomLevel": 1,
"update.mode": "none",
"editor.wordWrapColumn": 120,
"editor.wordWrap": "wordWrapColumn",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 对属性进行换行。
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
"wrap_attributes": "force-expand-multiline"
}
},
"vetur.format.defaultFormatter.js": "none", // 不按照vetur去格式化vue中的js
"vetur.format.options.tabSize": 4,
"vetur.format.options.useTabs": false,
// "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"files.autoSave": "onFocusChange",
"typescript.updateImportsOnFileMove.enabled": "always",
"diffEditor.ignoreTrimWhitespace": false
}
