# vue-vite-工程化开发

**Repository Path**: hrbu2023/vue-vite-Engineering

## Basic Information

- **Project Name**: vue-vite-工程化开发
- **Description**: vue-vite-工程化开发   使用ts语言、vite、pinia、vue-router、Elementplus
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-19
- **Last Updated**: 2025-09-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 工程化的开发

使用Vite工具管理 Vue的项目(  图片、css、html、js、ts 。。。。。)  



- nvm---Node

```
C:\Users\Administrator>nvm list

  * 24.8.0 (Currently using 64-bit executable)
    24.1.0
    20.18.2
    18.12.0

C:\Users\Administrator>
```

## 使用npm创建一个 基于vite的管理的 Vue项目

```
npm create vue@latest

```

![image-20250919140414063](./assets/image-20250919140414063.png)

![image-20250919140502772](./assets/image-20250919140502772.png)

![image-20250919140532608](./assets/image-20250919140532608.png)

![image-20250919140609847](./assets/image-20250919140609847.png)

![image-20250919140627467](./assets/image-20250919140627467.png)





## 进入项目并安装依赖



```
cd vue-vite

npm install   --registry=https://registry.npmmirror.com 
或者是  npm install 


```

## 启动服务器

```
npm run dev 
```

访问项目

http://localhost:5173

![image-20250919142340300](./assets/image-20250919142340300.png)

## 目录介绍

- .gitignore  :  git版本文件，提交忽略文件
-  .vscode     :   对项目的在vscode中的行为的定义，添加代码片段
- assets            (1 笔记中存放图片的位置，           vue项目中存放的是一个写二进制的文件)
- node_modules:  所有依赖的库的 下载位置
- package.json   :  项目使用的Node，基于npm管理各种依赖（vue、vite ）管理依赖，预先定义好的命令
  - package-lock.json   项目中具体依赖的固定版本的文件 
- README.md   笔记
- public
-  src
-  index.html      项目入口
  - main.js
    - App.vue
- tsconfig.json   :   项目中对ts的 配置
  - env.d.ts
  - tsconfig.app.json
  - tsconfig.node.json
- vite.config.ts

安装vscode的 vue插件





## 设置Ref对象自动补全.value

![image-20250924113605120](./assets/image-20250924113605120.png)







## 添加代码片段

Vue3 希望出现下面的代码

````vue
<!-- 1 脚本 -->

<script type="ts" setup name="App">
</script>


<!-- 2 模板 -->
<template>


</template>


<!-- 3 样式 -->
 <style>
</style>
````



![image-20250924134241070](./assets/image-20250924134241070.png)



```json
{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"创建vue3模板": {
		"scope": "javascript,typescript,vue",
		"prefix": "vue3",
		"body": [
			"  <!-- 1 脚本 -->",				
			"  ",
			"  <script lang='ts' setup name='$TM_FILENAME_BASE'>",
			"   import { ref ,reactive  } from 'vue';",
			"  ",
			"  </script>",
			"  ",
			"  ",
			"  <!-- 2 模板 -->",
			"  <template>",
			"  ",
			"  ",
			"  </template>",
			"  ",
			"  ",
			"  <!-- 3 样式 -->`",
			"   <style>",
			"  </style>",



		],
		"description": "创建vue3模板"
	},
	"打印对象": {
		"scope": "javascript,typescript,vue",
		"prefix": "cls",
		"body": [
			
			"  console.log('$CLIPBOARD',$CLIPBOARD) ",

		],
		"description": "创建vue3模板"
	}
}
```



常用的vscode 代码片段变量

[Visual Studio Code 中的片段_Vscode中文网](https://vscode.github.net.cn/docs/editor/userdefinedsnippets)



## 组件化开发

为了轻松的拆分内容，方便维护，将页面中的内容或者代码块  单独的写到某一个Vue文件中，vue称之为组件

- 定义Header.vue

```vue
<!-- 1 脚本 -->
<script lang='ts' setup name='Header'>
 import { ref ,reactive  } from 'vue';

</script>


<!-- 2 模板 -->
<template>
   <div class="header">  头部内容</div>

</template>


<!-- 3 样式 -->`
 <style>
.header{
  border: solid 1px grey;
  height:300px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px skyblue;
}

</style>
```



- 定义Footer.vue

```vue
<!-- 1 脚本 -->
<script lang='ts' setup name='Header'>
 import { ref ,reactive  } from 'vue';

</script>


<!-- 2 模板 -->
<template>
   <div class="footer">  底部内容</div>

</template>


<!-- 3 样式 -->`
 <style>
.footer{
  position: absolute;
  bottom: 0px;
  border: solid 1px grey;
  height:80px;
  width: 100%;
  box-shadow: 0 0 10px skyblue;
}

</style>
```

- 在App中引入

```vue
<!-- 1 脚本 -->
<script lang='ts' setup name='App'>
  import { ref ,reactive  } from 'vue';
  import  Header from './Header.vue'
  import  Footer from './Footer.vue'
</script>


<!-- 2 模板 -->
<template>
    <!-- Header.vue -->
    <Header></Header>

    <!-- Footer.vue -->
     <Footer></Footer>
</template>


<!-- 3 样式 -->`
  <style>
</style>
```



## 父子组件的 Props

[Props | Vue.js](https://cn.vuejs.org/guide/components/props)



## 使用Elementplus

[快速开始 | Element Plus](https://element-plus.org/zh-CN/guide/quickstart)

- 安装

```shell
npm install element-plus --save
```

- 注册组件

  > main.ts

```js
import { createApp } from 'vue'
import App from './App.vue'



//导入Elementplus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


const app = createApp(App)


//全局组件 (在Vue文件中使用之前 不需要import)
app.use(ElementPlus)


app.mount('#app')
```

原来的方式使用的是局部组件，如下图(使用之前需要import)

![image-20250926084611518](./assets/image-20250926084611518.png)



### 使用ElementPlus组件

![image-20250926085151346](./assets/image-20250926085151346.png)



在App.vue

```vue
<!-- 1 脚本 -->
<script lang='ts' setup name='App'>
 import { ref ,reactive  } from 'vue';
  let input = ref('')
</script>


<!-- 2 模板 -->
<template>


  <div>
          <el-button type="primary" round>Primary</el-button>

  </div>
  <div>

      <el-input v-model="input" style="width: 240px" placeholder="Please input" />

  </div>

</template>


<!-- 3 样式 -->
 <style scoped>
</style>
```

## 使用ElementPlus构造管理系统界面

### 使用一个布局容器

```

```



在main.ts中引用  app.css

```ts
import { createApp } from 'vue'
import App from './App.vue'


// 引用公共样式
import  './assets/app.css'



//导入Elementplus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


const app = createApp(App)


//全局组件 (在Vue文件中使用之前 不需要import)
app.use(ElementPlus)


app.mount('#app')
```

App.vue

```vue
<script setup lang="ts" name='App'>

</script>

<template>
    <el-container class="app">
        <el-header class="header">Header</el-header>
        <el-container class="bottom">
            <el-aside width="200px" class="aside">Aside</el-aside>
            <el-main class="main">Main</el-main>
        </el-container>
    </el-container>
</template>

<style scoped>
.app{
    height: 100vh;
}


.header {
    background: #C6E2FF;
}

.bottom{
    height: calc( 100% - 60px   );
}


.aside {
    background: #D9ECFF;
    height: 100%;
}

.main {
    background: #ECF5FF;
}
</style>

```

![image-20250926093536002](./assets/image-20250926093536002.png)

### 添加菜单

[Menu 菜单 | Element Plus](https://element-plus.org/zh-CN/component/menu#menu-菜单)

- 定义NavMenu.vue: src/components/NavMenu.vue

```vue
<!-- 1 脚本 -->
<script lang='ts' setup name='NavMenu'>
 import { ref ,reactive  } from 'vue';

</script>


<!-- 2 模板 -->
<template>
     <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="2" text-color="#fff">
                    <el-sub-menu index="1">
                        <template #title>
                            <span>系统管理</span>
                        </template>
                        
                            <el-menu-item index="1-1">用户管理</el-menu-item>
                            <el-menu-item index="1-2">角色管理</el-menu-item>
                      
                    </el-sub-menu>



                    <el-sub-menu index="2">
                        <template #title>
                            <span>系统监控</span>
                        </template>
                        
                            <el-menu-item index="2-1">在线用户</el-menu-item>
                            <el-menu-item index="2-2">系统任务</el-menu-item>
                      
                    </el-sub-menu>
                    
                </el-menu>

</template>


<!-- 3 样式 -->
 <style scoped>
</style>
```

在App中使用

```vue
<script setup lang="ts" name='App'>
    import NavMenu  from './components/NavMenu.vue';
</script>

<template>
    <el-container class="app">
        <el-header class="header">
            东软云医院管理系统
        </el-header>
        <el-container class="bottom">
            <el-aside width="200px" class="aside">
               
                <!-- 使用菜单 -->
                <NavMenu></NavMenu>


            </el-aside>
            <el-main class="main">Main</el-main>
        </el-container>
    </el-container>
</template>

<style scoped>
.app {
    height: 100vh;
}


.header {
    line-height: 60px;
    background: #C6E2FF;
    font-size: 25px;
}

.bottom {
    height: calc(100% - 60px);
}


.aside {
    background: #D9ECFF;
    height: 100%;
}

.main {
    background: #ECF5FF;
}
</style>

```

![image-20250926095842617](./assets/image-20250926095842617.png)

### 使用表单表格

创建了:  src/views文件夹:   所有的业务模块写在这个文件夹下 

- Vue  :   views  pages

- 系统管理
  - 用户管理    src\views\system\user\index.vue
  - 角色          src\views\system\role\index.vue

编写 src\views\system\user\index.vue

```vue
<!-- 1 脚本 -->
<script lang='ts' setup name='index'>
import { ref, reactive } from 'vue';
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>


<!-- 2 模板 -->
<template>
    <h3>用户管理</h3>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>




</template>


<!-- 3 样式 -->
<style scoped></style>
```



在App中使用

![image-20250926104319630](./assets/image-20250926104319630.png)

### 使用消息框

导入

```
import { ElMessage, ElMessageBox } from 'element-plus' 	
```

使用

```ts
ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(
    
    	//确定按钮点击后执行
    
    )
    .catch(
    	//点击取消按钮执行 的 内容g
    )
```

### 使用消息通知

```vue
import {ElNotification  } from  'element-plus' 	
ElNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
  })
```

### 使用loading

```vue
const loading = ref(true)

 <div v-loading="loading">
 
 </div>
```

## 对Vite 进行修改

- 修改开发服务器 
  - 服务器端口： 5173 
  - 打开浏览器

找到vite.config.ts

[配置 Vite | Vite 官方中文文档](https://cn.vite.dev/config/)

[开发服务器选项 | Vite 官方中文文档](https://cn.vite.dev/config/server-options.html)

```
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import ViteInspect from 'vite-plugin-inspect'


// https://vite.dev/config/
export default defineConfig({
  server:{
    // 服务器的 默认端口号， 80 不需要写， ：  localhost \127.0.0.1 \ 192.168.84.47
    port:80,
    // 服务器启动时打开浏览器
    open:true,
  },
  plugins: [
    vue(),
    vueDevTools(),
    VueSetupExtend(),
    ViteInspect()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

```

## 完成ToDoList

![image-20250926133723067](./assets/image-20250926133723067.png)



- 编辑 src\views\train\todo\ToDoList.vue

```
```

使用ElementPlus的图标

安装图标库

````
npm install @element-plus/icons-vue
````



注册图标

````
// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
````

在ToDoList.vue中使用

```vue
<el-button type="primary" circle>
                <el-icon><Sunny /></el-icon>
                </el-button>
```

完整的ToDoList.vue(目前最新的，还没写完)

````vue
<!-- 1 脚本 -->
<script lang='ts' setup name='ToDoList'>
import { ref, reactive } from 'vue';
let input = ref('')
</script>


<!-- 2 模板 -->
<template>
    <!-- ToDoList 待办事项 -->
    代办事项
    <div class="container">
        <div class="title">ToDo List </div>
        <div class="input">
            <el-input type="text"  v-model="input" style="width: 240px"/>

            <el-button type="primary" circle>
                <el-icon><Sunny /></el-icon>
            </el-button>
                

        </div>
        <div class="undo">代办事项</div>
        <div class="done">
            已完成
        </div>
    </div>

</template>


<!-- 3 样式 -->
<style scoped>
.container{
    border: solid 1px grey ;
    min-height: 500px;
    box-shadow: 0 0 10px gray;
}

.title {
    font-size: 30px;
    font-weight: bolder;
    color: #2385D0;
}
</style>
````

### 解决ID的问题

在命令行中安装 ： npm install nanoid

在vue中使用

- **import** { nanoid } **from** 'nanoid';
- **const** id = **nanoid**();

### 完整的代码

ToDoList.vue

```vue
<!-- 1 脚本 -->
<script lang='ts' setup name='ToDoList'>
import { ref, reactive, computed } from 'vue';
import  ToDoItem from  './ToDoItem.vue';
import { nanoid } from 'nanoid';


let input = ref('')
let toDoList = ref([
    {id:nanoid(),title:'标题Java1',done:false},
    {id:nanoid(),title:'标题Java2',done:false},
    {id:nanoid(),title:'标题Java3',done:false},
    {id:nanoid(),title:'标题Java4',done:true},
    {id:nanoid(),title:'标题Java5',done:true},
    {id:nanoid(),title:'标题Java6',done:true},
    {id:nanoid(),title:'标题Java7',done:true},
    {id:nanoid(),title:'标题Java8',done:true},
])

//待处理
let undoList = computed(()=>{
    return toDoList.value.filter((item)=>!item.done)
})


//已完成
let doneList = computed(()=>{
    return  toDoList.value.filter((item)=>item.done)
})



//方法
function addTodolist(){
    toDoList.value.push(
         {id:nanoid(),title:input.value,done:false},
    )

    //清空输入框
    input.value = ''
}



function dealDown(id:string){
    console.log("在父元素修改数据:",id)

    toDoList.value.forEach((todoItem)=>{
       if( todoItem.id == id){
            todoItem.done = true
       }

    })
}






</script>


<!-- 2 模板 -->
<template>
    <!-- ToDoList 待办事项 -->
    代办事项
    <div class="container">
        <div class="title">ToDo List </div>
        <div class="input">
            <el-input type="text"  v-model="input" style="width: 240px"/>

            <el-button type="primary" circle @click="addTodolist">
                <el-icon><Sunny /></el-icon>
            </el-button>

        </div>
        <div class="undo">
            <el-tag> 待执行</el-tag>
            <ToDoItem  v-for="todoItem in undoList" v-bind="todoItem" :dealDown="dealDown"></ToDoItem>
           



        </div>
        <div class="done">
           <el-tag> 已完成</el-tag>
             <ToDoItem  v-for="todoItem in doneList" v-bind="todoItem" :title="todoItem.title"></ToDoItem>

        </div>
    </div>

</template>


<!-- 3 样式 -->
<style scoped>
.container{
    border: solid 1px grey ;
    min-height: 500px;
    box-shadow: 0 0 10px gray;
}

.title {
    font-size: 30px;
    font-weight: bolder;
    color: #2385D0;
}
</style>
```

ToDoItem.vue

```vue
<!-- 1 脚本 -->
<script lang='ts' setup name='ToDoItem'>
import { ref ,reactive  } from 'vue';
 const {id,title,dealDown} = defineProps<{
     id:string,
    title:string,
   done:boolean,
    dealDown?:(id:string)=>void
 }>()


function deal(){
    if(dealDown){
         dealDown(id)
    }
   
}

</script>


<!-- 2 模板 -->
<template>
    <div class="item">
        <div class="title">     {{ title }}</div>
        <div v-if="done">
            <el-button type="success" circle >
               <el-icon><Select /></el-icon>
            </el-button>
        </div>
        <div v-else>
            <el-button type="danger" circle @click="deal">
                <el-icon><Close /></el-icon>
            </el-button>
        </div>
    </div>

</template>


<!-- 3 样式 -->
 <style scoped>
 .item{
    margin: 5px;
    padding: 5px;
    width: 400px;
    display: flex;
    border-bottom: solid 1px grey;
    .title{
        width: 370px;
    }

 }
</style>
```