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')
