前言
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
}
