vite创建vue3+ts

vite创建vue3+ts

一、确定安装环境

1. npm -v 、node -V 查询环境

二、开始安装项目

1. cmd输入 npm init vite@latest

npm init vite@latest

2. 这里我选择了vue 和 ts ，然后根据下面提示就可以运行了
   
3. 创建完成后再vite.config.ts 还有其他的ts都会提示报错。
   
   然后我们再 tsconfig.node.json 把这个改成node 就不会报错了
   
   然后我们再 tsconfig.node.json 把这个改成node 就不会报错了
   

三、开始依赖

1. 安装ts的声明文件包，安装完成后修改vite.config.ts npm install @types/node --save-dev

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: { alias: [ { find: '@', replacement: resolve(__dirname, 'src')}]}
})

2. 接下来在安装路由 npm install vue-router@4
   2.1. 在src文件夹新建一个router文件夹 再新建一个 index.ts的文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
  {
  //路由初始指向
    path: '/',
    name: 'HelloWorld',
    component:()=>import('../components/HelloWorld.vue'),
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

2.2 找到mai.ts 引入router 文件 挂载

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App);
app.use(router).mount('#app')

3. 安装sass npm install -D sass sass-loader

4. 安装pinia状态管理 类似vuex npm install pinia
   4.1 在mai.ts引入
   

ok 搭建完事