vite + typescript + vue3.0尝试

vite + typescript + vue3.0尝试

相关资料

---

vite、vue3.0作者采访视频：https://www.bilibili.com/video/BV1qC4y18721/?spm_id_from=trigger_reload
vite github地址：https://github.com/vitejs/vite
Vue3 API中文文档：https://composition-api.vuejs.org/zh/api.html#watch
vue3 beta初体验：https://www.yuque.com/along-n3gko/ezt5z9/kwgisk
vue-next: https://blog.csdn.net/CHH_HE/article/details/106618990

vite是什么

---

Vite是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具,基于Rollup打包。

优点

---

• 快速启动冷服务器
• 即时热模块更换（HMR）
• 真正的按需编译

安装及新建

---

npm

npm install create-vite-app -g
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

yarn

yarn global add create-vite-app 
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

尽管Vite最初旨在与Vue 3配合使用,但它也可以支持其他框架.例如,尝试npm init vite-app --template react或–template preact

创建&配置依赖

---

npm init vite-app vite-ts-vue
cd vite-ts-vue
npm install     // 安装项目依赖
npm i -S typescript [email protected] // 集成 TypeScript vue-router 
npm i -D eslint eslint-plugin-vue   // 集成 eslint 
npm i less--save-dev   // 集成css预编译less
npm run dev 

项目配置

---

配置 vite.config.js

---

import path from 'path'
module.exports = {
  // 导入文件夹别名
  alias: {
    '/@/': path.resolve(__dirname, './src'),
    '/@views/': path.resolve(__dirname, './src/views'),
    '/@components/': path.resolve(__dirname, './src/components'),
    '/@utils/': path.resolve(__dirname, './src/utils'),
  },
  // 配置Dep优化行为
  optimizeDeps: {
    include: ["lodash"]
  },
}

配置main.ts

---

修改main.js为main.ts,因为我们项目需要使用typescript开发
修改index.html

<script type="module" src="/src/main.js"></script>

如果不这样修改的话,会出现main.js找不到,其实这就是入口文件

配置router

---

在src中新建router文件夹,并在文件夹里面创建index.ts

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        name: 'Home',
        component: import('/@views/index.vue'),
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

新建页面index.vue

---

<template>
    <div>
        Home
        {{title}}
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
    setup(){
        const title=reactive<String>("标题")
        return {title}
    }
})
</script>

3.修改index.css为index.less

因为我们项目中使用less,如果你希望使用sass的话,那么在安装依赖的时候安装sass

npm i sass --save-dev   

4.在main.ts中引入router

import { createApp } from 'vue'
import App from './App.vue'
import './index.less'
import router from './router/index'
createApp(App).use(router).mount('#app')

优化TS类型推断
在src目录下创建shim.d.ts、source.d.ts
shim.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

source.d.ts`

declare module '*.json';
declare module '*.png';
declare module '*.jpg';