拥抱新技术,持续学习~
yarn create vite //创建项目
yarn
yarn dev //安装依赖并运行
yarn add vue-router@4 //安装路由
yarn add pinia //状态管理
yarn add --dev typescript // ts环境
npm i -D naive-ui // UI
npm i -D vfonts //字体
npm install @vitejs/plugin-vue //配置vite 插件
npm install --save-dev @types/node //防止引入组件时报错
npm install -D pinia-plugin-persist //pinia的持久化存储
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
/************************************* 路径配置 start ********************************/
import { resolve } from 'path'
const pathResolve = (dir: string): any => {
return resolve(__dirname, ".", dir)
}
const alias: Record = {
'@': pathResolve("src")
}
/************************************* 路径配置 end ********************************/
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: { // ****************** 路径配置新增
alias // ****************** 路径配置新增
} // ****************** 路径配置新增
})
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"esModuleInterop": true,
"importHelpers": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"sourceMap": true,
"skipLibCheck": true,
"target": "esnext",
"types": [
],
"isolatedModules": true,
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"ESNext",
"DOM",
"DOM.Iterable",
"ScriptHost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
/* eslint-disable */
import type { DefineComponent } from 'vue'
declare module '*.vue' {
const component: DefineComponent<{}, {}, any>
export default component
}
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import store from './store'
import naive from 'naive-ui'
import 'vfonts/Lato.css'
import 'vfonts/FiraCode.css'
createApp(App).use(naive).use(store).use(router).mount('#app')
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array = [
// {
// path: "/",
// name: "HelloWorld",
// component: HelloWorld,
// },
// 像vue2那样去声明路由
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia();
store.use(piniaPluginPersist);
export default store
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'user', // id必填,且需要唯一
persist: {
enabled: true //开启持久化存储
},
state: () => {
return {
name: '夜魔'
}
},
actions: {
updateName(name) {
this.name = this.name=="夜魔"?name:"夜魔"
}
},
getters: {
fullName: (state) => {
return "你到底是谁?是"+state.name+"吗"
}
}
})
{{userStore.name}}
{{userStore.fullName}}