一.上官网
1.1vite官网地址
安装：
npm init vite@latest
image.png
1.2 打开vscode 编辑器 提示安装Volor 插件
![]()
image.png
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
