网站数据库密码修改了要怎么做/网络广告宣传平台

网站数据库密码修改了要怎么做,网络广告宣传平台,什么是网站的根目录,福建省人民政府工作报告项目创建 在创建项目之前我们应该在终端中输入 node -v 和 npm -v 只有它们都能正常查看版本号才说明我们之前是已经安装完成的。 接下来我们在合适的目录下输入npm create vitelatest 它会要求你输入项目的名称,这个名称和我们之前通过cil创建的命名规则一样。…

项目创建

在创建项目之前我们应该在终端中输入

node -v  和  npm -v

只有它们都能正常查看版本号才说明我们之前是已经安装完成的。

接下来我们在合适的目录下输入npm create vite@latest

它会要求你输入项目的名称,这个名称和我们之前通过cil创建的命名规则一样。完成之后会要求我们选择合适的框架

我们这里选择vue,然后会让我们选择语言,我们选择JavaScript

完成之后我们通过 cd 目录 进入然后输入npm install进行依赖安装。之后通过npm run dev运行项目。如果要结束运行就按住CTRL+c退出

路由配置

路由设置之前我们需要安装vue-router

在项目根目录下输入:npm install vue-router@4

完成之后我们找到src目录,在这个目录下创建一个router目录,在router目录中创建一个index.js文件我们的路由就是写在这个地方

在index.js文件中,我们需要提前从vue-router里面导入createRouter和createWebHistory
然后把需要创建路由的组件导入。(组件:每一个.vue文件都是一个组件)

我们需要把路由存储到一个对象里面,多个对象存储到数组内部:
const routerArr =[{path:"路径(相对路径)",component:组件}]

每一个路径都是单独的一个对象,如果存在一个路由包含多个子路由的时候我们就需要给这个路由所在的对象添加一个children属性,children属性对应的值其实就是一个新的包含多个对象的数组(嵌套)为了方便理解我们来看一个非常简单的嵌套路由实例

const routes = [{path: "/",component: () => import("./views/Home.vue"),children: [{path: "home",component: () => import("./views/Home.vue"),}]}
]

最后我们新建一个路由
const router =[{
 history:createRouter(),
routes,
}]

然后export default router到此为止我们的index文件就编写完成了,后续我们只需要根据需要的路由进行相应的导入以及路由设置即可

接下来就是最后一步:在main.js里面加载路由

打开main.js文件。import router from "./router"根据相对目录导入,我们之前在index.js里面写了一句export default router 这个语句的作用就是让router作为默认的导出。

然后在createApp(App).mount('#app')里加上.use(router)

有的时候他可能不是一条语句,而是被拆开了:
const app = createApp(App)
app.mount('#app')这个时候我们需要在中间加上app.use(router)即可

到这个时候路由系统就算是完成了,剩下的路由的渲染之类的就不多说了。

element ui

使用之前还是需要先下载

我们在项目根目录下输入:npm install element-plus --save 就可以下载安装了

使用的方法也分为两种:完全引入 按需导入(推荐)

完全引入

我们先来讲完全引入,这个相对来说是比较简单的

import ElementPlus from 'element-plus'

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

app.use(ElementPlus)

一共就这三句,然后我们如果想用element的样式。我们只需要

Overview 组件总览 | Element Plus打开这个官方网站

在对应的样式之下找到代码,复制,粘贴到需要用到的位置即可 

按需导入

按需导入需要在项目根目录下输入:npm install -D unplugin-vue-components unplugin-auto-import以支持我们的需求

然后打开vite.config.js文件,把下面代码插入

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

完成之后就可以了。为什么我们会推荐使用按需导入的方法呢?
是因为完全引入占空间大于按需导入。 

指定端口运行vite项目

如果需要在特定的端口运行项目,我们需要找到vite.config.js文件

在里面找到export default{

server:{

        port:8081,

        }

}

这样就可以指定运行端口了

vite组件问题

当我们用vite创建一个项目的时候,如果需要用到别的组件(比如你自己写了一个组件,想使用它)的时候我们是不能按照之前的步骤直接加载挂载的。因为vite本身是没有支持.vue解析的

使用之前我们需要下载组件:npm install @vitejs/plugin-vue --save-dev

然后我们需要在vite.config.js文件里面导入:import vue from '@vitejs/plugin-vue'; // 引入插件

然后再export default defineConfig{}里面找一个plugins的属性,这个属性对应的key值是一个数组,我们在数组内添加元素vue()就可以了

这样我们就可以在这个里面使用vue模块了呢~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/898553.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

音频录制小妙招-自制工具-借助浏览器录一段单声道16000采样率wav格式音频

先看效果 1、打开页面 2、点击开始录音,弹出权限提示,点击“仅这次访问时允许” 3、录完后,点击停止 4、文件自动下载到默认目录 上代码 js 部分 document.addEventListener(DOMContentLoaded, () > {const startBtn document.getEleme…

数学建模 绘图 图表 可视化(3)

文章目录 前言二维散点图系列坐标图数据分布特征,Q-Q、P-P图分类图一般的曲线图峰峦图总结参考资料 前言 承接上期 数学建模 绘图 图表 可视化(1)的总体描述,这期我们继续跟随《Python 数据可视化之美 专业图表绘制指南》步伐来学…

【数据结构】栈(Stack)、队列(Queue)、双端队列(Deque) —— 有码有图有真相

目录 栈和队列 1. 栈(Stack) 1.1 概念 1.2 栈的使用(原始方法) 1.3 栈的模拟实现 【小结】 2. 栈的应用场景 1、改变元素的序列 2、将递归转化为循环 3、逆波兰表达式求值 4、括号匹配 5、出栈入栈次序匹配 6、最小栈…

【强化学习】Reward Model(奖励模型)详细介绍

📢本篇文章是博主强化学习(RL)领域学习时,用于个人学习、研究或者欣赏使用,并基于博主对相关等领域的一些理解而记录的学习摘录和笔记,若有不当和侵权之处,指出后将会立即改正,还望谅…

国家雪亮工程政策护航,互联网监控管理平台铸就安全防线

在当今社会,公共安全是国家发展的重要基石,也是人民安居乐业的基本保障。为了打造更高水平的平安中国,国家推出了意义深远的雪亮工程,并出台了一系列相关政策,为公共安全事业保驾护航。而互联网监控管理平台作为雪亮工…

蓝桥杯 第十天 2019国赛第4题 矩阵计数

最后一个用例超时了,还是记录一下 import java.util.Scanner;public class Main {static int visited[][];static int count 0;static int n,m;public static void main(String[]args) {Scanner scan new Scanner(System.in);n scan.nextInt();//2m scan.nextIn…

coding ability 展开第五幕(二分查找算法)超详细!!!!

. . 文章目录 前言二分查找搜索插入的位置思路 x的平方根思路 山脉数组的峰顶索引思路 寻找旋转排序数组中的最小值思路 总结 前言 本专栏上篇博客已经把滑动指针收尾啦 现在还是想到核心——一段连续的区间,有时候加上哈希表用起来很爽 今天我们来学习新的算法知识…

基于springboot的母婴商城系统(018)

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本母婴商城系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…

shell 脚本搭建apache

#!/bin/bash # Set Apache version to install ## author: yuan# 检查外网连接 echo "检查外网连接..." ping www.baidu.com -c 3 > /dev/null 2>&1 if [ $? -eq 0 ]; thenecho "外网通讯良好!" elseecho "网络连接失败&#x…

使用OBS进行webRTC推流参考

参考腾讯云官方文档: 云直播 OBS WebRTC 推流_腾讯云 说明非常详细,分为通过WHIP和OBS插件的形式进行推流。 注意:通过OBS插件的形式进行推流需要使用较低的版本,文档里有说明,需要仔细阅读。

Excel 小黑第18套

对应大猫18 .txt 文本文件,点数据 -现有链接 -浏览更多 (文件类型:可以点开文件看是什么分隔的) 双击修改工作表名称 为表格添加序号:在数字那修改格式为文本,输入第一个序号样式(如001&#…

快速入手-基于Django的mysql配置(三)

Django开发操作数据库更简单,内部提供了ORM框架。比如mysql,旧版本用pymysql对比较多,新的版本采用mysqlclient。 1、安装mysql模块 pip install mysqlclient 2、Django的ORM主要做了两件事 (1)CRUD数据库中的表&am…

【总结篇】java多线程,新建线程有几种写法,以及每种写法的优劣势

java多线程 新建线程有几种写法,以及每种写法的优劣势 [1/5]java多线程 新建线程有几种写法–继承Thread类以及他的优劣势[2/5]java多线程-新建线程有几种写法–实现Runnable接口以及他的优劣势[3/5]java多线程 新建线程有几种写法–实现Callable接口结合FutureTask使用以及他的…

基于YOLOv8与ByteTrack的车辆行人多目标检测与追踪系统

作者主页:编程千纸鹤 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验,被多个学校常年聘为校外企业导师,指导学生毕业设计并参…

【芯片验证】面试题·对深度为60的数组进行复杂约束的技巧

朋友发给我的芯片验证笔试题,觉得很有意思,和大家分享一下。 面试题目 class A中一个长度为60的随机数组rand int arr[60],如何写约束使得: 1.每个元素的值都在(0,100]之间,且互不相等; 2.最少有三个元素满足勾股数要求,比如数组中包含3,4,5三个点; 请以解约束最快…

【论文阅读】Contrastive Clustering Learning for Multi-Behavior Recommendation

论文地址:Contrastive Clustering Learning for Multi-Behavior Recommendation | ACM Transactions on Information Systems 摘要 近年来,多行为推荐模型取得了显著成功。然而,许多模型未充分考虑不同行为之间的共性与差异性,以…

蓝桥杯2023年第十四届省赛真题-子矩阵

题目来自DOTCPP: 暴力思路(两个测试点超时): 题目要求我们求出子矩阵的最大值和最小值的乘积,我们可以枚举矩阵中的所有点,以这个点为其子矩阵的左上顶点,然后判断一下能不能构成子矩阵。如果可…

centos 磁盘重新分割,将原来/home 下部分空间转移到 / 根目录下

上次重装系统时,不小心将一半磁盘放在了 /home 下面,运行一段时间后,发现/home 空间没有怎么用,反而是/ 目录报警说磁盘用完了,准备将 /home下的空间分一部分给主目录 / 先查看下 空间分布情况 df -lh 可以看到&…

【C#语言】C#同步与异步编程深度解析:让程序学会“一心多用“

文章目录 ⭐前言⭐一、同步编程:单线程的线性世界🌟1、寻找合适的对象✨1) 🌟7、设计应支持变化 ⭐二、异步编程:多任务的协奏曲⭐三、async/await工作原理揭秘⭐四、最佳实践与性能陷阱⭐五、异步编程适用场景⭐六、性能对比实测…

学习笔记 ASP.NET Core Web API 8.0部署到iis

一.修改配置文件 修改Program.cs配置文件将 if (app.Environment.IsDevelopment()) {app.UseSwagger();app.UseSwaggerUI(); }修改为 app.UseSwagger(); app.UseSwaggerUI(); 二.安装ASP.NET Core Runtime 8.0.14 文件位置https://dotnet.microsoft.com/en-us/download/do…