一.上官網(wǎng)
1.1vite官網(wǎng)地址
安裝：
npm init vite@latest
image.png
1.2 打開vscode 編輯器 提示安裝Volor 插件
![]()
image.png
image.png
先需要把vutur 禁用 在重新加載vscode 不然在代碼中提示如圖報錯
image.png
1、在setup語法糖中導入組件不需要注冊聲明，直接在視圖中使用即可炫七；
2.、vue文件結構發(fā)生改變景描，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
