使用Vite搭建一个简单demo

前言

最近在媒体大数据实例分析课上学习了一些使用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要放在服务器根目录下（否则文件会因为路由问题而无法找到）

效果演示 效果链接