19、使用vite+ts+vue-router+vuex构建Vu

vite是类似webpack的前端构建工具，基于浏览器 ES module ，优点：

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

• 1、安装vite

npm install -g create-vite-app

• 2、创建工程

create-vite-app vue-vite-template

• 3、下载依赖

npm install

• 4、启动项目

npm run dev

• 5、项目工程中安装typescript

npm install typescript -D

• 6、初始化tsc配置文件

npx tsc --init

• 7、项目中的.js改成.ts; index.html中引用改成.ts ; 添加<script lang="ts"> 到vue文件中
• 8、项目根目录创建shim.d.ts文件，添加如下内容：

declare module '*.vue' {
  import { Component } from 'vue';
  const component: Component;
  export default component;
}

• 9-1、安装vue-router4.0

npm install vue-router@4.0 

• 9-2、创建src/router/index.ts文件，配置路由

import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({
  // 指定路由模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

• 10-1、安装vuex

npm install vuex@4.0   // 如果npm找不到4.0版本的换成yarn安装
yarn add vuex@4.0

• 10-2、创建src/store/index.ts，配置vuex

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: 'zhagnsan'
  }
})

• 11、main.ts中配置router和store

import { createApp } from 'vue'
import App from './App.vue'
// 导入router和store
import router from './router/index'
import store from './store/index'

//
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')