Vue进阶（静态网页）使用

Vue 项目创建

环境要求

• node.js （项目运行环境）
• npm （JavaScript依赖管理包）
• vue cli （脚手架）

Vue项目架构介绍

• 总体结构
  

• node_moudules：项目依赖的js包

• router：路由器

• store：vuex 全局共享数据

• views：公共组件

• App.vue：项目主文件、网页首页 main.js：项目入口文件

• pcakage.json: 项目配置、依赖包管理

• vue.config.js： vue-cli配置文件

一些基础配置

• 在文件vue.config.js中

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port: 8000,
    // 配置代理
    // proxy:{
    //   '/api':{
    //     target:"http://localhost:8000/",
    //     pathRewrite:{
    //       '^/api': "" //不需要的路径
    //     }
    //   }
    // }
  }
})

• 项目启动

  npm run serve
  实际上这个serve是一个脚本，在文件package.json中。

"scripts": {
    "serve": "vue-cli-service serve", //启动服务
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

网页设计

基本标签

---

template标签必须存在，相当于html标签。

居中设置

  display: flex; /* 垂直居中 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */

基础标签是

，用于包含所有标签。

设置背景

background: url('./image/03.png') center/cover fixed no-repeat; /* 背景图片 */
background-color: transparent; /* 透明背景 */
background: rgba(0, 0, 0, 0.8); /* 黑、透明0.8 */
background-color: rgba(255, 255, 255, 0.45); /* 白、透明0.8 */

调整元素位置

height;width;position;margin;padding;

样式

font-size;border;transition: transform 0.2s;border-radius: 50%;overflow(超出的内容): hidden;

数据、函数绑定

	<p class="post-author">{{ post.author }}</p>
	v-bind:value="(标签的属性名)"  //未知错误
	<input type="text" v-model="username" class="input" placeholder=" 请设置用户名">  /* 专用于输入数据 */
	<img src="../icons/appendix.png" alt="Link" class="icon" @click="publishComment(index)">

---

路由

路由组成：路由器、路由链接、路由视图

路由器负责设置路由跳转（尽量配置懒加载）

import { createRouter, createWebHashHistory } from 'vue-router'
//懒加载
import HomeView from '../views/HomeView.vue';
import ArticleView from '../views/ArticleView.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    // component: import('../views/LoginView.vue') 
    component: HomeView
  },
  {
    path: '/article',
    name: 'Article',
    // component: import('../views/LoginView.vue')
    component: ArticleView,
    children: [
      {
        path: '', // 默认路由为空字符串
        redirect: '/blog' // 重定向到 /blog 路由
      },
     ]
    },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

路由链接和路由视图负责展示

  <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
  </nav>
  <router-view></router-view>

编程跳转

  <input type="button" value="编程跳转" @click="jump()">
  
  jump(){
          this.$router.push('/about')
        }

---

文件上传

通过img标签锁定input标签（ref），然后触发click方法。

<input type="file" ref="postImageInput" @change="addPostImage" style="display: none;">

<img src="../icons/camera.png" alt="Camera" class="icon"
@click="triggerFileInput('postImageInput')">

再通过event里的file提取url，使用 FileReader 对象读取文件内容。reader.onload 回调函数在文件读取完成后执行，将读取到的文件内容（即 Base64 编码的字符串）存储在 this.newPostImages 数组中，调用 readAsDataURL 方法开始读取文件，将其转换为 Base64 编码格式。

triggerFileInput(refName) {
            const fileInput = this.$refs[refName];
            fileInput.click();
},
addPostImage(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const imageUrl = URL.createObjectURL(file);
        this.previewFiles.push(imageUrl);

        const reader = new FileReader();
        reader.onload = (e) => {
            this.newPostImages.push(e.target.result);
        };
        reader.readAsDataURL(files[i]);
    }
},