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