# vite-basic

**Repository Path**: tongstyle/vite-basic

## Basic Information

- **Project Name**: vite-basic
- **Description**: vite+vue3基础工程
选择element或者ant等需要自己配置
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-02
- **Last Updated**: 2023-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite

```bash
npm create vite@latest 
```

**安装less依赖**
```bash
npm add -D less 
```

**安装scss  and  sass 依赖**
```bash
npm add -D sass 
```

**安装 router**
```bash
npm install vue-router@4 
```

```vue
 import { createRouter, createWebHistory } from "vue-router";
 
 
let routes= [
    {
        path: '/',
        name: 'home',
        //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
        component: () => import('../view/homeView.vue')
    },
    //{
        //配置404页面
        //path: '/:catchAll(.*)',
        //name: '404',
        //component: () => import(''),
    //}
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})
// 导出
export default router 
```

```javascript
import { createApp } from 'vue'
import App from './App.vue'
 
 //routes
 import router from "./routes/index"; 
 
const app= createApp(App)
 
 //routes 
 app.use(router)  
app.mount('#app')
```

**安装pinia**
```bash
npm install pinia 
```

```javascript
import { createApp } from 'vue'
import App from './App.vue'
//pinia
import { createPinia } from 'pinia' 
const pinia = createPinia()
 
const app = createApp(App)
 
//pinia
app.use(pinia)
 
app.mount('#app')
```

```javascript
import { defineStore } from 'pinia'
// useMain  可以是 useUser、useCart 之类的名字 
// defineStore('main',{..}) 在devtools 就使用 main 这个名
export const useMain = defineStore('main', {
    // 相当于data
    state: () => {
        return {
          // 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxx
          counter: 0,
          name: 'Eduardo',
        }
    },
    // 相当于计算属性
    getters: {
        doubleCount: (state) => {
            return state.counter * 2
        },
    },
    // 相当于vuex的 mutation + action，可以同时写同步和异步的代码
    actions: {
        increment() {
          this.counter++
        },
        randomizeCounter() {
            setTimeout(() => {
                this.counter = Math.round(100 * Math.random())
            }, 0);
        },
    },
})
```

**自动导入**
```bash
npm install -D unplugin-vue-components unplugin-auto-import
```

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
 
// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			//安装两行后你会发现在组件中不用再导入ref，reactive等
			imports: ['vue', 'vue-router'],
            //存放的位置
			dts: "src/auto-import.d.ts",
		}),
		Components({
			// 引入组件的,包括自定义组件
            // 存放的位置
            dts: "src/components.d.ts",
		}),
	],
 
})
```

**安装axios**
```bash
npm install axios
```

**配置@别名**
```bash
npm install @types/node 

npm i @vitejs/plugin-vue-jsx -s
```

**配置@提示**
> tsconfig.ts
```json
{
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

**自定义组件名**
```bash
npm i vite-plugin-vue-setup-extend -D
```

```javascript
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [ 
    vue(),
    VueSetupExtend(),
 ]
})
```

```javascript
<script lang="ts" setup name="home">
 
</script>
```

**识别Vue文件**
> vite-env.d.ts
```bash
declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

**cookies**
```bash
npm i vue-cookies
```

**vue3-uuid**
```bash
npm i vue3-uuid
```

**sheetjs**
```bash
npm i xlsx
```

**qs**
```bash
npm i qs
```
**echarts**
```bash
npm install echarts --save
```

**sass**
```bash
npm install sass -D
```
```html
<style lang="sass">
 
</style>
```

**less**
```bash
npm install less  -D
```
```html
<style lang="less">
 
</style>
```