# vue学习

**Repository Path**: lixuanye/vue-learning

## Basic Information

- **Project Name**: vue学习
- **Description**: vite+vue3.2+element-plus+vue-router+vuex+typescript
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-08
- **Last Updated**: 2026-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite 初学
## 1.新建Vite项目
1.1 cmd进入html根目录
1.2 键入npm create vite
1.3 设置完成后vscode进入项目目录，下载依赖 npm install
1.4 Vscode插件需要使用Volar高亮，更好支持
1.5 vite配置体验：vite.config.ts ↓↓↓↓
    export default defineConfig({
    //设置前端端口号
    server:{
        port:7777
    },
    resolve:{
        alias:{
        // 替代语法，可以把src\xxxx 换成@\xxxx
        "@":path.resolve(__dirname,"src"),
        // 替代语法，可以把src/components 换成com
        "com":path.resolve(__dirname,"src/components")
        }
    },
    plugins: [vue()]
    })
## 2.ts setup语法糖体验
2.1 不用语法糖之前
    <script  lang="ts">
        export default{
            setup(){
            const count = ref(666)
            return{
                count
            }
            }
        }
    </script>
    使用语法糖之后,精简大部分语句
    <script setup lang="ts">
        const count = ref(666)
    </script>
2.2 父子模块传递参数使用默认
    const props = withDefaults(
        defineProps<{
        msg: string,
        aList: Array<number>
        }>(),{
        msg:"hello,default",
        aList:()=>[1,2]
        }
    )
    不用默认模式写法
    defineProps<{
       msg: string,
       aList: Array<number>
     }>()
2.3 子模块手动操作传递数据到父模块
    defineEmit
## 3.vue-router路由，Vue3.2中用vue4x
3.1 npm install vue-router@next  //或者@4
3.2 src下新建/router/index.ts,在ts中初始化路由信息：

```typescript
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: () => import('../components/HelloWorld.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes:routes
})

export default router
```

main.ts下添加router,用.use(router)注册到界面

```typescript
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

```

## 4.VueX安装

4.1 VueX：全局属性变量集中地，跳出各种父子兄弟模块调用问题，一次定义多处使用

4.2 VueX安装：npm i vuex@next

4.3 VueX初体验案例一：count++按钮。

(1)src中新建/store/index.ts

```typescript
import { createStore } from "vuex";

//定义接口
interface State {
    count:number
}

//建立全局属性和函数
//
export const store = createStore<State> ({
    state(){
        return{
            count:0
        }
    },

    mutations:{
        increment(state){
            state.count++
        }
    }
})
```

# 5.ElementPlus

5.1 安装ElementPlus: npm i element-plus --save    安装sass: npm i sass-loader sass -D

5.2 按需自动导入elementplus **强烈推荐使用**：安装npm i -D unplugin-vue-components unplugin-auto-import

根据elementPlus官方文档,粘贴缺少内容

```typescript
// vite.config.ts
import { defineConfig } from 'vite'

//以下为所需引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
      vue(),
    // ...
    //下列为所需引入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})
```