vue小笔记

1.node安装

1.1.将node.msi安装完成后，打开cmd，输入node -v，如果出现版本， 说明安装成功

1.2.在node文件夹下创建<node_global>, <node_cache>这两个文件夹

 1.3.打开管理员cmd输入npm config set prefix "E:\ruanjiananzhuang\node\node_global"回车和npm config set cache "E:\ruanjiananzhuang\node\node_cache"回车

npm config set prefix "E:\ruanjiananzhuang\node\node_global"

npm config set cache "E:\ruanjiananzhuang\node\node_cache"

 1.4.打开设置配置环境变量

1.5.安装cnpm

npm install -g cnpm

2.创建vue项目

npm init vue@latest

2.1.安装组件

2.1.1.使用npm总是报错

2.1.1.1.清除npm缓存

npm cache clean --force

2.1.1.2.临时关闭严格的TLS验证

npm config set strict-ssl false

 2.1.1.3.在项目目录中运行以下命令重新安装依赖项

npm install

2.1.1.4.降低npm的版本

npm install npm@6.14.10 -g

2.1.1.5.更新npm的版本

npm install -g npm@latest

2.1.2.修改下载镜像

2.1.2.1.查看npm镜像设置

npm config get registry

您遇到的错误提示 CERT_HAS_EXPIRED 表明您尝试通过 npm 安装包时，遇到了服务器 SSL 证书过期的问题。这通常发生在 npm 的镜像源（如淘宝的 npm 镜像）的证书过期时。为了解决这个问题，您可以尝试以下步骤：

1. 清除 npm 缓存：

   npm cache clean --force

2. 禁用 npm 的 SSL 严格验证：

   npm config set strict-ssl false

   请注意，这会降低安全性，因此只建议在解决问题时临时使用。
3. 更换 npm 镜像源：
   您可以尝试更换到其他的 npm 镜像源，例如使用华为云的镜像源：

   npm config set registry https://mirrors.huaweicloud.com/repository/npm/

4. 更新 npm 和 Node.js：
   确保您的 npm 和 Node.js 都更新到最新版本，以避免兼容性问题和安全风险。

   npm install -g npm@latest

5. 检查系统时间：
   确保您的系统时间设置正确，因为不正确的系统时间可能会导致 SSL 证书验证失败。

 2.1.2.2.npm设置为淘宝镜像

npm config set registry https://registry.npm.taobao.org

2.1.3.安装elementPlus

npm install element-plus --save

 在main.js中引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

 2.1.4.安装路由

npm install --save vue-router@4 

 在mian.js中引入路由

import router from './api/router.js'  // 引入路由模块
//const app = createApp(App)
app.use(router) // 初始化路由插件

路由文件示例代码

import  { createRouter, createWebHistory } from 'vue-router'

// 导入页面
import index from '../views/index.vue'
import login from '../views/login.vue'
import register from '../views/register.vue'

//定义路由关系
const routes = [
    { path: '/', component: index },
    { path: '/login', component: login },
    { path: '/register',component: register}
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

//导出路由
export default router

2.1.5.安装elementPlus中的css拓展包

npm install element-plus --save

2.1.6.安装sass(css扩展包)

npm install sass -D

 2.1.7.安装pinia

npm install pinia

2.1.8.安装pinia 持久化插件-persist

npm install pinia-persistedstate-plugin

2.1.9.富文本编辑器

npm install @vueup/vue-quill@latest --save

2.1.9.1.在script导入

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

div盒子横向排列

display: flex;

3.功能特效

3.1.时间日期选择器格式：YYYY-MM-DD HH:mm:ss

<template>
  <el-date-picker
    v-model="selectedDateTime"
    type="datetime"
    placeholder="选择日期时间"
    format="YYYY-MM-DD HH:mm:ss"
  ></el-date-picker>
  <el-button @click="handleButtonClick">打印日期时间</el-button>
</template>

<script setup>
import { ref } from 'vue';

const selectedDateTime = ref(null);

const handleButtonClick = () => {
  if (selectedDateTime.value) {
    const formattedDate = formatDate(selectedDateTime.value);
    console.log(formattedDate);
  } else {
    console.log('未选择日期时间');
  }
};

const formatDate = (date) => {
  if (!(date instanceof Date)) {
    throw new Error('输入的不是有效的日期对象');
  }
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>

3.2.选择座位号 

<template>
  <el-form :model="form" label-width="0px">
    <el-form-item>
      <el-input v-model="selectedSeatNumber" placeholder="已选座位号"></el-input>
    </el-form-item>
    <el-form-item>
      <div class="seat-container">
        <div
          v-for="row in 10"
          :key="row"
          class="seat-row"
        >
          <div
            v-for="col in 10"
            :key="col"
            class="seat"
            :class="{ 'seat-selected': isSelected(row, col) }"
            @click="selectSeat(row, col)"
          >
            {{ (row - 1) * 10 + col }}
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const form = ref({
      // selectedSeat: null,
    });

    const selectedSeatNumber = ref('');

    const isSelected = (row, col) => {
      return form.value.selectedSeat && form.value.selectedSeat.row === row && form.value.selectedSeat.col === col;
    };

    const selectSeat = (row, col) => {
      if (isSelected(row, col)) {
        form.value.selectedSeat = null;
        selectedSeatNumber.value = '';
      } else {
        form.value.selectedSeat = { row, col };
        selectedSeatNumber.value = (row - 1) * 10 + col;
      }
    };

    const onSubmit = () => {
      if (form.value.selectedSeat) {
        console.log(`已选择座位：${(form.value.selectedSeat.row - 1) * 10 + form.value.selectedSeat.col}`);
      } else {
        console.log('尚未选择座位');
      }
    };

    return {
      form,
      selectedSeatNumber,
      isSelected,
      selectSeat,
      onSubmit,
    };
  },
};
</script>

<style>
.seat-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

.seat-row {
  justify-content: center;
  align-items: center;
}

.seat {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.seat-selected {
  background-color: #008bff;
  color: #fff;
}
</style>

感谢观看  持续更新···