使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程

 # npm 6.x
  npm init vite@latest my-vue-app --template vue
 
  # npm 7+, 需要额外的双横线：
  npm init vite@latest my-vue-app -- --template vue

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
import path from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
   // 配置文件引用别名 alias
   resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@*.ts", "src*.d.ts", "src*.tsx", "src*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

npm install sass-loader sass webpack --save-dev
或yarn add sass-loader --dev
 
npm i dart-sass
或yarn add dart-sass --dev
 
npm i npm-sass
或yarn add sass --dev

$test-color: rgb(255, 0, 60);

// 全局配置  样式变量
  css:{
    preprocessorOptions:{
      scss:{
        additionalData:'@import "@/assets/style/main.scss";'
      }
    }
  },

npm i vue-router
yarn add vue-router@4

import { createRouter, createWEBHistory, RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
    {
        path: '/home',
        name: 'home',
        component: () => import('@/views/Home/index.vue'), //可能问题1    注意这里要带上 文件后缀.vue
    },
    {
        path: '/',
        name: 'helloWorld',
        component: () => import('@/components/HelloWorld.vue'), //可能问题1    注意这里要带上 文件后缀.vue
    },
    {
        path: '/helloWorld',
        name: 'helloWorld',
        component: () => import('@/components/HelloWorld.vue'), //可能问题1    注意这里要带上 文件后缀.vue
    },
];
const router = createRouter({
    history: createWebHistory(),
    routes,
});
export default router;

<template>
    <h1>这是 home 页</h1>
 
  <router-link :to="{path:'/helloWorld'}">跳转到helloWord(router-link)</router-link>
    <br/>
  <button @click="GoHelloWordPage">跳转到 helloWord(js_function)</button>
</template>
 
 
<script setup lang="ts">
import {useRouter} from 'vue-router'
 
// 2. 调用useRouter函数
const $r = useRouter();
 
  const goHelloWordPage = () =>{
    $r.push("helloWorld")
  }
 
</script>

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

<template>
    <!-- <h1>这是 主容器</h1> -->
  <router-view></router-view>
 
</template>

npm i pinia
yarn add pinia@next

// 导入组件
import { createPinia } from "pinia"  
# 创建根存储库并将其传递给应用程序
app.use(createPinia())

import { defineStore } from 'pinia'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () =>({
    name: '群主'
  }),
  getters: {
    nameLength: (state) => state.name.length,
  }
})

<template>
<div>这是状态管理Pinia：{{ mainStore.name }}<br />长度:{{ mainStore.nameLength }}</div>
<button @click="updateName">修改 store 中的 name</button>
</template>
 
<script setup lang="ts">
 
import { useMainStore } from "@/store/main";
 
const mainStore = useMainStore()
const updateName = () => {
  // $patch 修改 store 中的数据
  mainStore.$patch({
    name: "名称被修改了,nameLength也随之改变了",
  });
};
 
</script>

<template>
    <h1>这是 home 页</h1>
    <router-link :to="{path:'/helloWorld'}">跳转到helloWord(router-link)</router-link>
    <button @click="goHelloWordPage">跳转到 helloWord(js_function)</button>
    <div>这是状态管理Pinia：{{ mainStore.name }}<br />长度:{{ mainStore.nameLength }}</div>
    <button @click="updateName">修改 store 中的 name</button>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
import { useMainStore } from "@/store/main";
 
const mainStore = useMainStore()
const updateName = () => {
  // $patch 修改 store 中的数据
  mainStore.$patch({
    name: "名称被修改了,nameLength也随之改变了",
  });
};
 
// 2. 调用useRouter函数
const $r = useRouter();
 
const goHelloWordPage = () =>{
$r.push("helloWorld")
}
 
</script>

  NODE_ENV=development
  VITE_APP_WEB_URL= 'https://www.baidu.com'

 NODE_ENV=production
  VITE_APP_WEB_URL='https://www.goole.com'	

<template>
<p>当前环境：{{ env.NODE_ENV }}</p>
</template>
<script setup lang="ts">
const env = import.meta.env
</script>

"scripts": {
    "dev": "vite --mode dev",
    "dev:prod": "vite --mode prod",
    "build": "vue-tsc && vite build",
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:uat": "vue-tsc --noEmit && vite build --mode uat",
    "build:prod": "vue-tsc --noEmit && vite build --mode prod",
    "preview": "vite preview"
  },