首页 > 其他分享 >Vue3项目创建及相关配置

Vue3项目创建及相关配置

时间：2024-08-09 21:24:59浏览次数：15  
标签：vue 创建 配置 js Vue Vue3 组件 import router

Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM（Model-View-ViewModel）的架构模式。

MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。它包括三个部分：

  1. Model（模型）：表示应用程序的数据和业务逻辑。在Vue中，模型通常是一个JavaScript对象。

  2. View（视图）：表示用户界面。在Vue中，视图通常是使用HTML模板构建的。

  3. ViewModel（视图模型）：充当模型和视图之间的中间层。它通过数据绑定机制将模型数据自动更新到视图上，并将用户交互事件传递给模型。在Vue中，ViewModel是由Vue实例扮演的。

Vue的核心思想是通过数据驱动视图，使得界面的渲染和更新更加简单高效。当模型数据发生变化时，Vue能够自动更新对应的视图。同时，用户在视图上的操作也能够通过ViewModel传递给模型进行处理。

安装配置nodejs

NPM的全称是Node Package Manager

中文名为Node.js包管理器，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。使用NPM可以方便地从一个全球的代码库中获取并安装Node.js模块，这些模块可以用于构建应用程序、工具和包等。开发者可以通过NPM来搜索、安装、更新和卸载各种Node.js模块。此外，NPM还提供了发布和共享代码、管理依赖、版本控制等功能，可以帮助开发者更方便地开发和分享代码。

1.安装nodejs参考：nodejs安装和环境配置

2.设置环境变量，在系统变量path中添加nodejs的安装路径

3.管理员身份运行cmd

node -v 查看node的版本
npm -v 查看npm的版本（新版的node安装自带安装npm）

设置镜像源：

npm config set registry https://registry.npmmirror.com

创建Vue3项目

这里使用vite直接创建，vite是下一代前端开发与构建工具

1.使用npm直接初始化

npm create vite@latest

这里可能需要使用管理员身份并跳转盘符到需要创建vue项目的指定位置：

2.选择项目模板 Vue

3.选择语言结构 JavaScript

4.以管理员身份运行 VS Code 打开刚刚创建的项目文件夹 easyvuea，

使用 Ctrl键+波浪线~ 打开终端并输入命令，安装依赖包

npm install

5.启动项目

npm run dev

6.按住Ctrl键访问

项目结构

在 VS Code 中安装Vue扩展

vite.config.js 可以配置项目启动自动打开项目首页

ctrl+`打开终端管理器 输入npm run dev启动项目尝试

配置路由

Vue是一种用于构建单页面应用程序（SPA）的JavaScript框架。SPA指的是只有一个HTML页面的应用程序，而不是多个页面之间的传统网页应用程序。

在传统的多页面应用程序中，每个页面都是独立的，用户每次点击链接都会重新加载整个页面。而在单页面应用程序中，只有一个页面，并且页面内容的切换是通过动态加载和更新组件来实现的。

Vue通过内置的Vue Router插件提供了路由功能来实现单页面应用程序的页面切换。Vue Router允许开发者定义不同路由对应的组件，并通过路由链接或者程序控制导航的方式进行页面切换。

1.创建views文件夹，并在其中创建所需要的vue文件：

2.在该项目中安装vue-router路由组件

npm install vue-router

3.在src中创建router文件夹，在文件夹中创建index.js文件，router/index.js就是路由的配置文件

import { createRouter,createWebHashHistory } from "vue-router";

const router=createRouter({
    history:createWebHashHistory(),
    routes:[
        {path:'/easya',component:()=>import("../views/easya.vue")}
    ]
});
export default router;

4.在main.js文件中引用路由配置

import router from './router'

5.在App.vue文件中添加路由占位符

6.访问

绑定数据和函数

更多vue相关的使用教程参考官网：Vue官网

vue3推荐使用setup函数绑定数据

在easya.vue中编写代码：

  • 使用ref函数声明响应式的值类型数据的初始值
  • 在setup函数中，对ref()函数声明的数据进行取值和赋值时,需要使用.value
  • 在template组件中使用ref()声明的数据，直接使用即可,不需要使用.value
<script setup>
    import {ref} from 'vue';
    const num=ref(12);
    const show=ref(true);
    const arr=ref([12,34,56,78]);
    const staffData=ref({});
    const changeNum=function(){
        console.log("changNum method")
        num.value=num.value+1;
    }
    const changeShow=()=>{
        show.value=!show.value;
    }
</script>
<template>
    <h1 v-text="num" v-if="show"></h1>
    <button @click="changeNum">按钮</button>
    <button @click="changeShow">是否显示</button>

    <div v-for="(item,index) in arr" class="box">{{ index }}:{{ item }}</div>
</template>
<style>
    .box{
        height: 50px;
        width: 50px;
        border: 1px solid black;
        margin: 10px;
    }
</style>

axios异步请求

1.在项目中安装axios，使用命令

npm install axios

2.在src中新建文件夹util工具包，其中新建文件http.js，代码如下：

import axios from 'axios';

export default function (options) {
    //配置每次发送请求都从sessionStorage中获取名字叫token的数据,
    //添加到请求头部的Authorization属性中

    //Object.assign用于合并对象的数据
    options.headers = Object.assign(
        { Authorization: sessionStorage.getItem('token') },
        options.headers || {}
    );
    //axios()   返回一个promise对象，用于异步请求
    //options是一个对象，其中包含了许多用于配置请求的参数，
    //例如请求的url、请求方法（GET、POST等）、请求头等
    return axios(options)
        .then(({ status, data, statusText }) => {
            //该函数在请求成功并返回数据时被调用
            //status：HTTP状态码，例如200表示请求成功。
            //data：服务器返回的数据。
            // statusText：HTTP状态文本，例如"OK"表示请求成功。
            if (status == 200) {
                return data;
            } else {
                throw new Error(statusText);
            }
        })
        .catch(e=>{
            return Promise.reject(e);
            //return Promise.reject(e.message);
        });
}

3.在src中新建api文件夹，在文件夹中创建index.js封装获取url的方法，代码：

import http from '../util/http.js';

const API={
    get:(url)=>{return http({url:url,method:'get'})}
};
export default API;

4.在easya.vue页面中编写代码，发送请求

<script setup>
    import {ref,onMounted} from 'vue';
    import easyapi from '../api';

    const staffData=ref({});
    //在挂载页面时获取员工数据用于填入表中
    onMounted(async function(){
        let result=await easyapi.get("/api/staff");
        staffData.value=result.data;
        console.log(staffData.value);
    });
    //主动获取员工数据的方法
    const getData=async()=>{
        staffData.value=await easyapi.get("/api/staff");
        console.log(staffData.value);
    }
    //......
</script>
<template>
    <table>
        <tr><td>ID</td><td>CODE</td><td>NAME</td><td>SALARY</td></tr>
        <tr v-for="(item,index) in staffData"> <td>{{ item.id }}</td><td>{{ item.code }}</td><td>{{ item.name }}</td><td>{{ item.salary }}</td></tr>
    </table>

    <button @click="getData">获取数据</button>
</template>
<style>
</style>

Vue的 onMounted 是Vue 3中的一个生命周期钩子函数（Lifecycle Hook），它在组件挂载（Mount）到DOM之后被调用。使用onMounted可以在组件挂载到DOM后执行一些异步操作，比如发送网络请求、获取数据、设置事件监听等。

async 关键字用于声明一个函数是异步函数，即该函数可能会返回一个Promise对象，其中包含函数执行结果。

await 关键字只能在async函数中使用。它会使函数暂停执行，直到await后面的异步操作完成并返回结果。

Vue 3中的生命周期函数

  • onBeforeMount: 在组件挂载（即插入DOM）之前被调用。这个生命周期阶段通常用于在组件被渲染之前获取数据或执行其他准备工作。
  • onMounted: 在组件挂载之后被调用。这个生命周期阶段通常用于在组件已经插入DOM之后执行某些操作，例如启动动画或定时任务。
  • onBeforeUpdate: 在组件更新之前被调用。这个生命周期阶段通常用于在组件更新之前获取数据或执行其他准备工作，例如重新渲染之前的清理工作。
  • onUpdated: 在组件更新之后被调用。这个生命周期阶段通常用于在组件已经更新之后执行某些操作，例如根据新的数据重新渲染UI。
  • onBeforeUnmount: 在组件卸载（即从DOM中移除）之前被调用。这个生命周期阶段通常用于在组件卸载之前执行清理操作，例如取消事件监听器或定时任务。
  • onUnmounted: 在组件卸载之后被调用。这个生命周期阶段通常用于在组件已经从DOM中移除之后执行某些操作，例如清理资源或记录日志。

注意：默认情况下，浏览器会执行同源策略，即只允许来自相同源的请求访问资源，默认不允许跨域访问。这是为了防止恶意网站利用跨域请求窃取用户的敏感信息或执行恶意操作。

在某些情况下，我们可能需要允许不同源的请求访问后端资源。在Spring框架中，通过为后端控制类添加 @CrossOrigin 注解，可以控制浏览器是否允许跨域请求访问后端资源，并设置允许跨域请求的一些细节。

成功获取数据：

5.配置代理

为了避免因后端服务器迁移造成的麻烦，在 vite.config.js 文件中配置如下代码：

export default defineConfig({
  plugins: [vue()],
  server:{
    // 配置vite冷启动项目自动使用浏览器访问首页
    open:true,
    proxy: {  
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  }
})

使用ElementUI

具体使用教程参考官网：Element Plus

Element Plus是一个基于 Vue 3，面向设计师和开发者的组件库

1.在Vue3中使用命令安装element-plu

npm install element-plus --save

2.在main.js中引入代码如下并添加 use(ElementPlus)

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

3.在组件库中找到想要的样式，复制代码在easya.vue中使用，如警告按钮：

<el-button type="warning">Warning</el-button>

使用效果如下：

整合：

1.新建easyb.vue

从Element的组件库中找到布局容器的代码加到 template标签中

找到侧栏菜单，替换 Aside 标签内容

修改一级菜单的文本内容为员工管理，二级菜单的文本为员工列表

在菜单的 <el-menu> 标签上 设置路由属性 router="true" 

在员工列表的 <el-menu-item index="1-1">  标签添加 route="stafflist" 用于跳转

在 <el-main> 标签之间添加路由占位符 <router-view></router-view>

<script setup>
</script>

<template>
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router="true"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>员工管理</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1" route="stafflist">员工列表</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<style>
</style>

2.新建stafflist.vue用于获取后端的staff员工数据并存放到列表中展示，

在组件库找到合适的表格组件，这里简化了部分样式

<script setup>
    import {ref,onMounted} from 'vue';
    import easyapi from '../api';
    //定义绑定的数据
    const tableData=ref([]);

    //挂载页面时查询数据
    onMounted(async function(){
        let result=await easyapi.get("/api/staff");
        tableData.value=result.data;
    });

</script>

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="code" label="编号" width="180" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="salary" label="薪资" />
  </el-table>
</template>

<script></script>

3.在router文件夹下的index.js中配置路由：新增 children:[...]

import { createRouter,createWebHashHistory } from "vue-router";

const router=createRouter({
    history:createWebHashHistory(),
    routes:[
        {path:'/easyb',
            component:()=>import("../views/easyb.vue"),
            children:[{path:'/stafflist',component:()=>import("../views/stafflist.vue")}]
        }
    ]
});
export default router;

4.效果测试：

标签：vue,创建,配置,js,Vue,Vue3,组件,import,router
From： https://blog.csdn.net/qq_63161848/article/details/140975687

相关文章

  • 【VSCode】《VSCode安装本地历史记录插件并配置搜索忽略》
    前言VSCode本地会记录修改和保存的历史文件信息，当没有使用git管理的时候，就可以通过本地历史搜索快速比对还原历史代码。插件安装目前最新版本停留在1.8.1更新时间为2020/3/4号；估计作者后续也没有更新计划了。安装后会在左下角和左上角出现LOCALHISTORY和./history两个......
  • make menuconfig配置buildroot报错
    命令行键入makemenuconfig配置buildroot失败，提示如下ad@ad-vm:~/data/tool/buildroot-2024.02.4$makemenuconfig mkdir-p/home/ad/data/tool/buildroot-2024.02.4/output/build/buildroot-config/lxdialogPKG_CONFIG_PATH=""makeCC="/usr/bin/gcc"HOSTCC=......
  • Django5+Vue3:OA系统前后端分离项目实战-Frame页面框架搭建(14)
    Django5+Vue3系列文章前言本节开始，全文仅对会员开放。若点赞和收藏数量超过100，全文将免费开放。此项目采用Django框架的5.0.7版本进行开发。Django5.0支持的Python版本为3.10、3.11和3.12。OA系统系列文章将持续更新，直至项目的Docker部署阶段。专栏链接:......
  • 如何在 Windows 10 环境下安装和配置 MySQL：初学者指南
    如何在Windows10环境下安装和配置MySQL：初学者指南MySQL是一个流行的开源数据库管理系统，广泛应用于各种应用程序中。对于初学者来说，了解如何在Windows10环境下安装和配置MySQL是一个重要的第一步。本篇博客将详细介绍如何完成这些步骤，确保你能顺利地启动和使用MySQL......
  • 宝塔配置域名反向代理到ip+端口的接口地址
    宝塔配置域名反向代理到ip+端口的接口地址添加站点配置域名配置反向代理目标URL写服务器的本地ip地址127.0.0.1代理到9000端口上发关域名也写127.0.0.1或者$host申请https证书访问接口https://abc.baidu.com/xxx/xxx......
  • Spring Cloud接入Nacos作为配置中心和服务发现
    一、nacos介绍Nacos是DynamicNamingandConfigurationService（动态命名和配置服务）的首字母简称，它是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。Nacos由阿里巴巴开源，致力于帮助用户发现、配置和管理微服务。以下是Nacos的详细介绍：动态服务发现：Nacos......
  • TINYMCE配置及功能实现详解
    昨天晚上论坛里面有一位网友给我发私信请教问题，如何解决word内容复制粘贴的问题，这位网友也是刚开始学习接触这块，很多基础知识并不了解，比如如何上传图片，如何保存图片，如何返回文件路径，这些技术他都不了解。先花了大概半个小时左右的时间给他讲解了一下基础知识，然后又花了一个小时......
  • MySQL 中创建视图设置字段类型
    参考：MySQL中创建视图设置字段类型在MySQL中创建视图时，不能直接在视图定义中指定新计算字段的数据类型。但是，你可以通过函数调用或其他表达式转换来隐式地确保新字段的类型。例如，如果你希望在视图中添加一个新的int类型的字段，你可以使用CAST()函数或CONVERT()函......
  • java创建线程的几种方式，以及它们之间的区别（面试常用）
    线程创建的几种方法继承Thread类。如果继承了Thread类，直接new一个对象就可以创建一个线程实现Runnable接口。如果实现了Runnable接口，则还需要用Thread的构造方法，才能创建一个线程//使用Thread类创建线程并启动线程publicclassThreadTestextendsThread{@Overrid......
  • 记某项目的vue.config.js的配置，主要是获取git版本信息，并写入新创建的json文件
    /**@format*/constmoment=require("moment");constFileManagerPlugin=require("filemanager-webpack-plugin");constGreatePlugin=require("generate-asset-webpack-plugin");constshell=require("shelljs");le......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99