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-mock
    viteMockServe({
      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 build
  build: {
    // 输出目录
    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