使用Vite搭建一个简单demo

文章目录

前言
环境配置
nodejs使用简介
安装vite，基于模板实现一个vite项目的小demo
- 初始化的目录结构介绍
- 安装ElementUI和Axios
- 组件内容详解
- - main.js
  - App.vue
  - gallery.vue
  - 其他注意事项
- 效果演示 [效果链接](http://www.joycez.xyz/)

前言

最近在媒体大数据实例分析课上学习了一些使用Vite开发网站的入门知识，回顾如下

使用技术栈：VScode+nodejs+git+Vite+Vue3/ElementUI/axios

环境配置

nodejs（安装LTS版）
git（在bash中输入 code .可自动在vs code中打开文件夹）
vscode
- 在设置中将默认终端修改为 git bash
- 插件 vetur：vue语法高亮（若安装后，vue代码报错可以在设置中 Vetur › Validation: Template 下将勾选验证取消）
chrome插件：Fehelper 前端助手，可以格式化浏览器json显示等

nodejs使用简介

# 查看node版本
node --version
# 安装与移除包，-g参数全局安装
npm install package-name
npm uninstall package-name
# 运行js脚本
node xxx.js

一个demo脚本，关于使用nodejs创建服务器。运行后将在本地1234端口显示 Hello World

var http=require('http');http.createServer(function (request,response) {response.writeHead(200, {'Content-Type':'text/plain'});response.end('Hello World\n');
}).listen(1234);console.log('Server running at http://127.0.0.1:1234/');

安装vite，基于模板实现一个vite项目的小demo

npm install vite # 安装vite
npm init vite-app projectName   # 初始化vite项目
# 进入项目文件夹
npm install # 安装项目所需的依赖
npm run dev # 运行项目
# 其他命令
npm build   # 生成dist目录
npm serve   # 预览

项目运行后就会在浏览器对应端口显示如下界面

初始化的目录结构介绍

- dist   # 使用build命令后才会生成的文件|- node_modules  # 项目所需的依赖包|- public # 放静态文件的目录|- src|- assets- components   # 放置组件的目录- HelloWorld.vue   # 初始化组件App.vue  # 根组件main.js    # 入口文件，组件在此被挂载到首页上- index.html   # 首页，项目入口
- package-lock.json
- package.json  # 依赖等相关配置信息
- vite.config.js    # vite的配置信息

安装ElementUI和Axios

由于想给自己的可视化作业写一个走马灯式的目录，所以直接使用element-ui里的成熟组件，并使用axios从后端接口读取需要显示的信息

npm install element-plus # 与vue3版本对应的是element-plus
npm install axios

安装完成后可在package.json文件中查看到依赖包的变化

组件内容详解

main.js

import { createApp } from 'vue'
import { ElCarousel,ElCarouselItem, } from 'element-plus';
import App from './App.vue';
// 使用element-ui
const app = createApp(App)
app.component(ElCarousel.name, ElCarousel);
app.component(ElCarouselItem.name, ElCarouselItem);
// 挂载根组件App.vue
app.mount('#app')

App.vue

<template><img alt="logo" src="./assets/logo.png"/><h1>xxx</h1><gallery></gallery>
</template><script setup>
// 引入组件
import gallery from './components/gallery.vue'
</script><style>
<!--放置样式-->
</style>

gallery.vue

<template>
<!-- 直接套用的Element UI的demo，数据使用v-for循环渲染 --><el-carousel :interval="4000" type="card" height="300px"><el-carousel-item v-for="i in item" :key="item"><a :href="i.url"><img :src="i.src" style="width:100%;" :title="i.name"></a></el-carousel-item></el-carousel></template><script>
import axios from 'axios' // 引入axios
// 导出匿名函数
export default ({name:"gallery",data() {return {item:[]}},mounted(){  // 挂载前先get数据axios.get("http://接口地址").then((res) => {this.item=res['data'];})}
});
</script><style>
<!--放置样式-->
</style>

其他注意事项

发现使用axios获取数据再渲染似乎开始时动画会卡顿，直接写在data中则没有问题
使用build部署在其他服务器上时，dist要放在服务器根目录下（否则文件会因为路由问题而无法找到）

效果演示效果链接

使用Vite搭建一个简单demo相关推荐

SpringBoot + Dubbo + Zookeeper搭建一个简单的分布式服务
本文使用SpringBoot + Dubbo + Zookeeper 来搭建一个简单的分布式服务文章目录 dubbo-spring-boot-starter 如何发布 Dubbo 服务如何消费 D ...
eclipse maven项目 class类部署不到tomcat下_Springboot介绍以及用Eclipse搭建一个简单的Springboot项目教程
简述本文主要介绍Springboot以及用Eclipse搭建一个简单的Springboot项目. Springboot简介 Springboot是由Pivotal团队提供的全新框架,其设计目的是用来 ...
java分布式dubbo_Dubbo剖析-搭建一个简单的分布式系统（1）
一.前言随着阿里巴巴开源的分布式RPC框架Dubbo成为Apache开源卵化器项目,Dubbo有火了一把.在接下来的一段时间本公众号将会时不时的发布一些dubbo使用与原理剖析的文章. image. ...
用思科网络模拟器搭建一个简单的局域网
目录前言搭建配置前言在搭建一个简单的局域网前,你必须知道一些常识. 网线(双绞)线的标准 T568A标准:白绿.绿.白橙.蓝.白蓝.橙.白棕.棕 T568B标准:白橙.橙.白绿.蓝.白蓝.绿 ...
iris流程图_如何搭建一个简单的机器学习流水线？
阅读此分步教程,学会通过导入scikit-learn包来搭建一个简单的机器学习流水线(pipeline) 一个机器学习模型中,有很多可移动的组件需要被组合在一起,模型才能被执行并成功的得到结果.把机器 ...
怎样用python搭建简单的系统_如何用Python搭建一个简单的推荐系统？
推荐系统的相关知识我们已在前文中提到,在这篇文章中,我们会介绍如何用Python来搭建一个简单的推荐系统. 本文使用的数据集是MovieLens数据集,该数据集由明尼苏达大学的Grouplens研究小 ...
python旅游推荐系统_如何用Python搭建一个简单的推荐系统？
推荐系统的相关知识我们已在前文中提到,在这篇文章中,我们会介绍如何用Python来搭建一个简单的推荐系统. 本文使用的数据集是MovieLens数据集,该数据集由明尼苏达大学的Grouplens研究小 ...
python代理池_用Python搭建一个简单的代理池
其实每次爬东西的时候,特怕IP被封,所以每次都要把时间延迟设置得长一点...这次用Python搭建一个简单的代理池.获取代理IP,然后验证其有效性.不过结果好像不是很理想,为什么西刺代理的高匿代理都能 ...
使用SpringBoot搭建一个简单的webSocket服务
前言个人地址:使用SpringBoot搭建一个简单的webSocket服务什么是WebSocket? WebSocket是一个HTML5新增的协议,它的目的在浏览器和服务器之间建立一个不受限的双向 ...

使用Vite搭建一个简单demo

文章目录

前言

环境配置

nodejs使用简介

安装vite，基于模板实现一个vite项目的小demo

初始化的目录结构介绍

安装ElementUI和Axios

组件内容详解

main.js

App.vue

gallery.vue

其他注意事项

效果演示效果链接

使用Vite搭建一个简单demo相关推荐

最新文章

热门文章

使用Vite搭建一个简单demo

文章目录

前言

环境配置

nodejs使用简介

安装vite，基于模板实现一个vite项目的小demo

初始化的目录结构介绍

安装ElementUI和Axios

组件内容详解

main.js

App.vue

gallery.vue

其他注意事项

效果演示 效果链接

使用Vite搭建一个简单demo相关推荐

最新文章

热门文章

效果演示效果链接