vue框架-vue-cli

陆卿之

已于 2024-02-22 21:34:28 修改

阅读量1.5k

点赞数 23

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-02-18 16:46:07 首次发布

本文链接：https://blog.csdn.net/qq_44715376/article/details/136154662

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue-cli

Vue CLI是一个官方的脚手架工具，用于快速搭建基于Vue.js的项目。Vue CLI提供了一整套可配置的脚手架，可以帮助开发人员快速构建现代化的Web应用程序。

Vue CLI通过提供预先配置好的Webpack模板和插件，使得开发人员可以在不需要手动编写Webpack配置的情况下快速创建Vue应用。Vue CLI还提供了一组命令行工具，如创建、构建、测试和部署Vue应用等。

使用Vue CLI可以方便地创建Vue项目，并提供了许多常用功能的预设，比如ESLint代码检查、Babel转译、单元测试工具、CSS预处理器、服务器代理等等。此外，在Vue CLI的基础上，还可以添加其他的插件来扩展其功能。

总之，Vue CLI是一款功能强大的、易于使用的工具，可以大大提高Vue应用的开发效率。

主要功能

Vue CLI 提供了一套完整的工具链，方便开发人员在创建、开发、测试和部署 Vue 项目时进行高效的操作。它简化了项目配置和管理的过程，使得开发者能够更专注于业务逻辑的实现。

快速创建项目：Vue CLI 允许你通过简单的命令行界面快速创建一个新的 Vue 项目。它提供了一系列预设模板，包括官方推荐的标准模板、PWA（渐进式 Web 应用）模板、TypeScript 模板等，可以根据需求选择合适的模板。
零配置开发服务器：Vue CLI 内置了一个开发服务器，它使用了 webpack-dev-server 来实现热重载和自动刷新等功能。在开发阶段，你可以使用 Vue CLI 启动本地开发服务器，实时预览和调试你的应用程序。
代码打包和优化：Vue CLI 可以通过 webpack 对项目进行打包和优化。它通过内置的配置文件来管理构建过程，自动处理模块依赖、代码分割、压缩、文件指纹等工作，使得最终生成的打包文件体积更小，加载速度更快。
插件系统：Vue CLI 提供了插件系统，允许你轻松地扩展项目的功能。你可以使用 Vue CLI 官方提供的插件，如 Vuex（状态管理库）、Vue Router（路由器）等，也可以开发自定义插件来满足特定需求。
单元测试和端到端测试：Vue CLI 集成了测试工具，包括 Jest（用于单元测试）和 Nightwatch（用于端到端测试）。你可以使用这些工具来编写和运行测试用例，确保项目的质量和稳定性。
项目部署：Vue CLI 提供了快速的项目部署功能。它可以帮助你生成生产环境所需的最终打包文件，并提供了构建结果分析、代码压缩等功能，以便于你将应用程序部署到生产环境中。

环境准备

Node.js支持 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi

在这里插入图片描述

环境变量

在这里插入图片描述

安装Node.js淘宝镜像加速器（cnpm）

npm install cnpm -g

在这里插入图片描述

安装vue-cli

cnpm install vue-cli -g

在这里插入图片描述

检验安装

vue list

在这里插入图片描述

第一个vue-cli

E:\VUE笔记\vue-student>vue init webpack myvue

'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
�������ļ�
? Project name myvue      // 项目名称
? Project description A Vue.js project    // 项目描述
? Author SIN   // 项目作者
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "myvue".

# Project initialization finished!
# ========================

To get started:

  cd myvue
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

在这里插入图片描述

初始化并运行

cd myvue
npm install
npm run dev

在这里插入图片描述

项目目录解析

demovue                   -------> 项目名称
    -build                 -------> 用来使用webpack打包使用build依赖            
    -config                -------> 用来做整个项目配置目录
    -node_modules          -------> 管理项目中使用依赖
    -src                   -------> 用来编写vue的源代码
        |+ assets          -------> 存放静态资源
		|+ components      -------> 编写vue组件
		|+ App.vue         -------> 根目录组件
		|+ main.js         -------> 根目录主入口
    -static                -------> 存放其他静态资源
    .babelrc               -------> 将es6转换为es5
    .editorconfig          -------> 项目编辑配置
    .gitignore             -------> get配置
    .postcssrc.js          -------> 源代码项目js
    index.html             -------> 项目主页
    package.json           -------> 类似pom.xml文件 依赖管理，不建议手动添加
    package-lock.json      -------> 对package.json文件加锁
    README.md              -------> 项目说明书

第一个案例

我们在vue-cli项目中主要是以vue组件形式来编写，编写位置位于：src/components下

分析：

<!-- 
	编写组件的页面结构。
	包含：组件的布局，内容的结构，定义组件的外观和展示
-->
<template>

</template>

<!-- 
	编写组件的JavaScript代码逻辑
	包含：组件的属性，组件的方法，组件的生命周期，定义组件的行为和功能等
-->
<script>
    export default {
        name: "组件名称"
    }
</script>

<!-- 
	编写组件的样式信息，
	包含：组件的Css样式，定义组件的外观和样式。
-->
<style scoped>

</style>

编写：

DemoTest.vue

<template>
    <div class="box">
        {{vueData1}}
    </div>
</template>

<script>
    export default {
        name: "DemoTest",
        data(){
            return{
                vueData1: "这是使用vue-cli编写的第一个案例"

            }
        }
    }
</script>

<style scoped>
    .box{
        background-color: red;
    }
</style>

主入口调用

App.vue是项目的主入口，需要将编写的组件在主入口中注册并调用，才能在页面中显示出来

<template>
    <div>
        <!--调用组件-->
        <DemoTest/>
    </div>
</template>

<script>
    // 引入组件
    import DemoTest from "@/components/DemoTest";

    export default {
        name: 'App',
        components: {
            // 注册组件
            DemoTest
        }
    }
</script>

<style>

</style>

在命令行中启动项目： npm run dev 命令来启动项目

在这里插入图片描述

超链接

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 深度集成，可以帮助构建单页面应用程序。通过 Vue Router，可以实现页面之间的切换、路由参数传递、嵌套路由等功能。

安装vue-router

npm install vue-router@^3.5.3

src/router下创建index.js文件

import Vue from 'vue';
import Router from 'vue-router';
import StudentAdd from "@/components/StudentAdd";
import StudentList from "@/components/StudentList";

Vue.use(Router);

export default new Router({
    mode: 'history', // 如果需要使用 history 模式，则在此设置
    base: process.env.BASE_URL, // 设置 base
    routes: [
        {
            path: '/student-add',
            name: 'StudentAdd',
            component: StudentAdd
        },
        {
            path: '/',
            name: 'StudentList',
            component: StudentList
        }
    ]
})

main.js中导入路由地址

import Vue from 'vue'
import App from './App.vue'

import router from "./router";
Vue.use(router) // 如果 router 是一个自定义插件，也可以使用 Vue.use() 来安装

new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

App.vue

<template>
    <div>
        <!-- 
            <router-view>是Vue Router提供的一个功能强大的组件，
            它会根据当前路由的路径，动态地渲染匹配到的组件内容。
            这使得构建单页应用程序变得非常简单和灵活。 
		-->
        <router-view/>
    </div>
</template>

<script>
    export default {

        name: 'App',
        components: {
        }
    }
</script>

<style>
</style>

StudentList.vue

<template>
    <div>
        <button @click="handleClick">点击跳转</button>
        <a href="/student-add">点击跳转</a>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "StudentList",
        methods: {
            handleClick() {
                // 处理点击事件的逻辑代码
                // 可以使用this.$router.push进行路由跳转或其他操作
                this.$router.push('/student-add');
            }
        }


    }
</script>

<style scoped>

</style>

StudentAdd.vue

<template>
    <div>
        <h2>StudentAdd</h2>
    </div>
</template>

<script>

    export default {
        name: "StudentAdd",
    };
</script>

在这里插入图片描述

表格数据

Element UI 是一套基于 Vue.js 2.0 的桌面端组件库，它提供了一系列常用的 UI 组件和工具，可以帮助开发者快速构建优秀的 Web 应用程序。

Element UI 的组件包括了各种基本组件（如按钮、输入框、单选框、复选框等）、布局组件（如栅格、表单、面板等）、数据展示组件（如表格、标签、分页、轮播图等）、弹框组件（如消息框、提示框、对话框等）和导航组件（如菜单、面包屑、分页器等）等，覆盖了常见的 UI 组件需求。

使用 Element UI，可以通过简单的配置和调用，即可快速地实现复杂的 UI 布局和交互效果，提升开发效率和用户体验。

安装Element UI：

npm install element-ui --save

在这里插入图片描述

在src/main.js中引入Element UI,

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el:'#app',
  render:h => h(App)
})

在src/components目录下创建一个名为DataTable.vue的文件

<template>
    <div>
        <!--
            使用el-table组件来展示数据，
            通过 :data="tableData" 将tableData数组绑定到表格数组的data属性上，实现动态渲染表格数据
        -->
        <el-table :data="tableData" style="width: 100%">
            <!--
                使用el-table-column组件定义表格的列
                通过 prop 属性指定需要展示的字段（例如 prop="date" 表示展示 date 字段），
                通过 label 属性设置列的标题。
            -->
            <el-table-column prop="date" label="日期" width="180"/>
            <el-table-column prop="name" label="姓名" width="180"/>
            <el-table-column prop="address" label="地址"/>
        </el-table>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                // 定义数组数组
                tableData:[{
                    date: '2023-11-02',
                    name: '张三',
                    address: '重庆市涪陵区'
                },{
                    date: '2023-11-03',
                    name: '李四',
                    address: '西安市雁塔区'
                },{
                    date: '2023-11-04',
                    name: '王五',
                    address: '西安市未央区'
                },{
                    date: '2023-11-05',
                    name: '赵六',
                    address: '西安市灞桥区'
                }
                ]
            }
        }
    }
</script>

在src/App.vue中引入并使用DataTable

<template>
  <div id="app">
    <DataTable/>
  </div>
</template>
<script setup>
import DataTable from "./components/DataTable.vue";

export default {
  name: 'App',
  components:{
    DataTable,
  },
}
</script>

在这里插入图片描述

弹出框

ModelMessage.vue

<template>
    <div class="modal-wrapper">
        <div class="modal">
            <div class="modal-header">
                <h3>{{ title }}</h3>  <!-- 标题 -->
                <button class="close-btn" @click="$emit('close')">X</button> <!-- 关闭按钮 -->
            </div>
            <div class="modal-body">
                <!--弹出框的内容-->
                <slot></slot> <!-- 插槽，用于放置弹出框的内容 -->
            </div>
            <div class="modal-footer">
                <button v-if="showCancelBtn" @click="$emit('cancel')">取消</button> <!-- 取消按钮 -->
                <button v-if="showConfirmBtn" @click="$emit('confirm')">确认</button> <!-- 确认按钮 -->
            </div>
        </div>
        <div class="modal-overlay"></div> <!-- 模态框遮罩层 -->
    </div>
</template>

<script>

    export default {
        name: "ModelMessage",
        props: {
            title: {
                type: String,
                default: '提示' // 标题默认值
            },
            showCancelBtn: {
                type: Boolean,
                default: true // 是否显示取消按钮，默认为true
            },
            showConfirmBtn: {
                type: Boolean,
                default: true // 是否显示确认按钮，默认为true
            }
        }
    }
</script>

<style scoped>
	 /* 样式定义 */
    .modal-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
	/* 模态框样式 */
    .modal {
        position: relative;
        z-index: 9999;
        width: 500px;
        margin: 100px auto;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
	 /* 模态框头部样式 */
    .modal-header {
        padding: 10px;
        text-align: center;
        background-color: #f1f1f1;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
	/* 模态框内容样式 */
    .modal-body {
        padding: 20px;
    }
	/* 模态框底部样式 */
    .modal-footer {
        padding: 10px;
        text-align: center;
        background-color: #f1f1f1;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
	 /* 关闭按钮样式 */
    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        color: #333;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
    }
	/* 模态框遮罩层样式 */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
</style>

TestMessage.vue

<template>

    <div>
        <button @click="showModal">点击弹出框</button>

        <ModelMessage v-if="isModalVisible"  @close="hideModal">
            <!--弹出框的内容-->
            <h2>这是一个弹出框</h2>
            <p>弹出框的内容...</p>
        </ModelMessage>
    </div>

</template>

<script>

    import ModelMessage from "@/components/ModelMessage";

    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "TestMessage",
        components: {
            ModelMessage
        },
        data() {
            return {
                isModalVisible: false
            };
        },
        methods: {
            showModal() {
                this.isModalVisible = true;
            },
            hideModal() {
                this.isModalVisible = false;
            }
        }
    }

</script>

<style scoped>

</style>

App.vue

<template>
    <div>
        <!--调用组件-->
        <TestMessage/>
    </div>
</template>

<script>

    import TestMessage from "@/components/TestMessage";

    export default {
        name: 'App',
        components: {
            // 注册组件

            TestMessage
        }
    }
</script>

<style>

</style>

在这里插入图片描述

读取json数据

1，安装axios

npm install axios

在这里插入图片描述

2,App.vue

<template>
  <div>
    <ul>
      <li v-for="(item, index) in jsonData" :key="index">{{ item.id }} - {{ item.name }} - {{ item.email }}</li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'MyComponent',
    data() {
      return {
        jsonData: []
      };
    },
    created() {
      // 使用axios发送GET请求来读取数据
        // { withCredentials: true } 是一个用于配置 XMLHttpRequest 对象的属性的选项。XMLHttpRequest 是在 JavaScript 中进行网络请求的常用对象，它可以发送 HTTP 请求到服务器并获取响应数据。
        //withCredentials: true 可以让跨域请求携带凭据信息，但同时需要确保服务器端的配置也支持接收并处理这些凭据信息。
      axios.get('http://localhost:8082/demo', { withCredentials: true })
        .then(response => {
          // 处理获取到的JSON数据
          this.jsonData = response.data;
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    }
  }；
</script>

3, 后端Cors配置类

@Configuration  // 将这个类标记为一个配置类
@EnableWebMvc    // 启用Spring MVC框架对Web请求的处理
public class CorsConfig implements WebMvcConfigurer {  // 实现WebMvcConfigurer接口

    @Override
    public void addCorsMappings(CorsRegistry registry) {  // 重写addCorsMappings方法
        registry.addMapping("/**")  // 添加CORS映射，将所有路径都映射到CORS中
                .allowedOrigins("http://localhost:8080")  // 允许跨域访问的源
                .allowedMethods("GET", "POST", "PUT", "DELETE")  // 允许的HTTP方法
                .allowedHeaders("*")  // 允许的请求头
                .allowCredentials(true);  // 开启凭据支持，允许发送Cookies等凭据信息
    }
}

4，后端Controller控制器类

/**
 * @RestController  (控制器)
 * 是一个RESTful风格的控制器（将数据以json形式发送）
 * 将该类下的所有的方法的返回值直接以json或者xml形式写入到HTTP请求体中
 */
@RestController
public class RedisTestController {

    @GetMapping("/demo")
    public String Demo(){
        return "前后交互json数据";
    }
}

上传数据

1，App.vue

<template>
  <div>
    <ul>
      <li v-for="(item, index) in jsonData" :key="index">{{ item.id }} - {{ item.name }} - {{ item.email }}</li>
    </ul>
  </div>

  <button @click="inputData">发送数据</button>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'MyComponent',
    data() {
      return {
        jsonData: []
      };
    },
    created() {
      // 使用axios发送GET请求来读取数据
      // { withCredentials: true } 是一个用于配置 XMLHttpRequest 对象的属性的选项。XMLHttpRequest 是在 JavaScript 中进行网络请求的常用对象，它可以发送 HTTP 请求到服务器并获取响应数据。
      //withCredentials: true 可以让跨域请求携带凭据信息，但同时需要确保服务器端的配置也支持接收并处理这些凭据信息。
      axios.get('http://localhost:8082/demo', { withCredentials: true })
        .then(response => {
          // 处理获取到的JSON数据
          this.jsonData = response.data;
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    },
    methods:{
      inputData(){
        // 模拟发送的数据
        const jsonData={
          name: '张三',
          sex:'男',
          age:19,
          email:'1121212@121',
          phone:'1212121212'
        };


        // 发送post请求
        axios.post('http://localhost:8082/api/sendData',jsonData,{
          headers:{
            'Content-Type':'application/json'
          }
        })
        .then(response =>{
          console.log(response.data);//发送的数据在控制台中打印
        })
        .catch(error =>{
          console.error(error)
          }
        )
      }
    }
  };
</script>

3, 控制器

package com.ke.controller;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class MyController {

    @PostMapping("/endpoint")
    public ResponseEntity<String> handlePostRequest(@RequestBody String json) {
        // 在控制台打印接收到的 JSON 数据
        System.out.println("接受的数据"+json);
        // 返回响应
        return new ResponseEntity<>("Received JSON data: " + json, HttpStatus.OK);
    }
}