Vue包的安装使用

vue介绍

  Vue.js（通常简称 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。它具有以下显著特点和优势：

一、灵活易用

1.渐进式框架

  Vue 可以根据项目的需求逐步引入，你可以从简单的页面开始，逐步增加功能和复杂度，而不需要一次性采用整个框架。这使得 Vue 适用于各种规模的项目，从小型的静态页面到大型的企业级应用。

2.简洁的语法

  Vue 的模板语法简洁直观，易于学习和使用。它使用类似于 HTML 的模板语言，结合指令和表达式，可以方便地将数据绑定到页面上，并实现动态的交互效果。例如，使用v-bind指令可以动态绑定属性，v-if和v-for指令可以实现条件渲染和列表渲染。

二、高效的响应式系统

1.数据驱动

  Vue 采用数据驱动的开发模式，即视图是由数据自动渲染生成的。当数据发生变化时，Vue 会自动更新相关的视图，无需手动操作 DOM。这大大提高了开发效率，减少了出错的可能性。

2.响应式原理

  Vue 通过使用 ES5 的Object.defineProperty()方法或 ES6 的 Proxy 对象来实现数据的响应式。当数据被访问或修改时，Vue 能够自动追踪依赖，并在数据变化时通知相关的组件进行更新。

三、强大的组件化开发

1.组件化思想

  Vue 鼓励使用组件化开发，将页面拆分成一个个独立的、可复用的组件。每个组件都有自己的模板、逻辑和样式，可以独立开发、测试和维护。这提高了代码的可维护性和可复用性，使得大型项目的开发更加高效。

2.组件通信

  Vue 提供了多种方式来实现组件之间的通信，包括父子组件之间的 props 传递、自定义事件的触发和监听、通过 Vuex 进行全局状态管理等。这些通信方式使得组件之间的交互更加灵活和方便。

四、丰富的生态系统

1.插件和库

  Vue 拥有庞大的生态系统，有许多优秀的插件和库可以扩展其功能。例如，Vue Router 用于实现路由管理，Vuex 用于状态管理，Element UI 和 Ant Design Vue 等 UI 框架提供了丰富的组件库，可以快速构建美观的用户界面。

2.社区支持

  Vue 拥有活跃的社区，开发者可以在社区中获取帮助、分享经验和学习最新的技术。社区还提供了大量的教程、文档和示例代码，方便开发者快速上手和解决问题。
  总之，Vue.js 以其灵活易用、高效的响应式系统、强大的组件化开发和丰富的生态系统，成为了前端开发中非常受欢迎的框架之一。无论是小型项目还是大型企业级应用，Vue 都能提供强大的支持，帮助开发者构建出高质量的用户界面。
  本章对于vue的语法不进行介绍，只介绍如何通过vue进行项目创建的前期工作。

安装依赖

npm init vue@latest(npm create vit@latest)npm install 
npm install vue-router -s
npm install axios -s
npm install pinia
npm install element-plus --save
npm install @element-plus/icons-vue
npm i -D vite-plugin-windicss windicss
npm install babel-plugin-component 
npm install mockjs
npm install vite-plugin-mock
npm i universal-cookie@^6
npm install @vueuse/integrations

删除+新增文件夹

删除src内的文件；
在src文件夹下新增components、stores、api、router文件夹；
新增axios.js:

components设置

(1)home.vue

<template><div><el-button type="primary">编辑</el-button><el-button type="primary">分享</el-button><el-button type="primary">设置</el-button><el-button type="primary">搜索</el-button><el-button type="primary">上传<el-icon class="el-icon--right"><Upload /></el-icon></el-button></div>
</template><script setup name="home"></script>

(2)data.vue

<template>信息页显示信息成功！
</template><script setup name="data"></script>

(3)zero.vue

<template><el-empty description="description" />
</template>
<script setup name="zero">
</script>

router

新增index.js:

import {createRouter,createWebHashHistory} from 'vue-router'
import home from '../components/home.vue'
import data from '../components/data.vue'
import zero from '../components/zero.vue'export default new createRouter({routes:[{path:'/home', name:'home',component:home,},{path:'/data', name:'data',component:data,},{path:'/zero', name:'zero',component:zero,}],history:createWebHashHistory(), 
})

配置babel.config.js

module.exports={presets:['@vue/cli-plugin-babel/preset'],'plugins':[['components',{'libraryName':'element-plus','styleLibraryName':'theme-chalk'}]]
}

main.js

import { createApp } from 'vue'
import {createPinia} from 'pinia'
import App from './App.vue'import 'element-plus/theme-chalk/index.css' 
import ElemntPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import 'virtual:windi.css'import axios from 'axios'
import router from './router'const app = createApp(App)
const pinia=createPinia()
app.use(pinia)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.use(ElemntPlus)
app.config.globalProperties.$axios = axios
app.use(router)
app.mount('#app')App.vue
<template><RouterLink to='/home'><el-button type='primary' plain>主页</el-button></RouterLink><RouterLink to='/data'><el-button type='primary' plain>信息页</el-button></RouterLink><div><RouterView></RouterView></div>
</template><script setup name="App">import { RouterLink, RouterView } from "vue-router";
</script>

配置vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteMockServe } from 'vite-plugin-mock';
import WindiCSS from 'vite-plugin-windicss'// https://vitejs.dev/config/
export default defineConfig({// 项目根目录root: './',// 插件配置plugins: [// Vue插件
vue(),
WindiCSS(),// Mock插件// ——>>>cnpm install mockjs、cnpm install vite-plugin-mockviteMockServe({mockPath: 'mock',injectCode: `import { setupMock } from './mock/mock';setupMock();`})],// 别名配置resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},// 服务器配置server:{//自动启动浏览器open:true, // 服务器端口号// ——>>>http://localhost:5173/ 改成http://localhost:3000/port: 3000,// 代理配置proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}},// 构建配置// ——>>>npm run buildbuild: {// 输出目录outDir: 'dist',// 是否生成源代码映射文件sourcemap: true,// 是否启用压缩minify: true,// 是否将构建后的文件格式化terserOptions: {format: {comments: false}}},
})

axios

配置axios.js

import axios from 'axios'const service =axios.create({baseURL:'/api'
})export default service

修改vite.config.js
将target地址修改成请求的地址

配置api/manager.js

import axios from '@/axios'export function login(username,password){return axios.post('/admin/login',{username,password})
}

/admin/login是http://ceshi13deishait.cn后边的地址
http://ceshi13deishait.cn//admin/login