Vue3+Vite +TypeScript

一.上官网

1.1vite官网地址

安装：

 npm init vite@latest

image.png

1.2 打开vscode 编辑器 提示安装Volor 插件

image.png

先需要把vutur 禁用 在重新加载vscode 不然在代码中提示如图报错

image.png

1、在setup语法糖中导入组件不需要注册声明，直接在视图中使用即可；
2.、vue文件结构发生改变，js默认放到页面顶部，而视图template放到js下面，style放到页面底部
3、导入vue文件必须写上文件后缀名.vue，否则ts无法识别vue文件。

安装 vuex

cnpm install vuex@next --save

store文件夹的index.ts

import { InjectionKey } from "vue";


import { useStore as baseUseStore,createStore,Store} from "vuex";

export interface State {
 count: number
}

export const key: InjectionKey<Store<State>> = Symbol();

export const store = createStore<State>({
 state: {
   count: 0,
 },
 mutations: {
  SET_COUNT (state,count:number ){
   state.count = count
  }
 },
 getters:{
  getCount:(state)=>{
   return state.count
  }
 },
 actions: {
 },
 modules: {
 },
});

export function useStore(): Store<unknown> {
 return baseUseStore(key);
}

main.ts 引入

import { createApp } from 'vue'
import App from './App.vue'

// createApp(App).mount('#app')

import { store, key } from './store';

const app = createApp(App);

app.use(store, key).mount('#app');

在vue 文件中使用

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import { useStore } from './store';

   const store = useStore();
   store.commit('SET_COUNT',100)
   console.log(store.getters.getCount);
</script>

image.png

router 安装

cnpm install vue-router@next -S 

在router 目录 index.ts

import {createRouter,createWebHistory} from "vue-router";

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../pages/home/index.vue'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../pages/about/index.vue'),
  },
]

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

export default router

main.ts 引入

import router from './router'

const app = createApp(App);

app.use(router).mount('#app');

在app.vue文件

 <router-view></router-view>

image.png