标签 VUE 下的文章

【Vue】3-Vue 3.3 新特性 & Pinia

2024-08-20

在Vue 3.3中，最主要的新特性是Composition API的稳定版发布，以及与TypeScript的更好的集成。

Pinia是Vue.js的状态管理库，它是Vuex和Redux的替代品，旨在提供更简单、更直观的API。

以下是一个简单的Pinia store的示例：




// store.js
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
  },
})

在Vue组件中使用Pinia store：




<template>
  <div>{{ counter }} - <button @click="increment">Increment</button></div>
</template>
 
<script>
import { useMainStore } from './store'
 
export default {
  setup() {
    const mainStore = useMainStore()
    return {
      counter: mainStore.counter,
      increment: mainStore.increment,
    }
  },
}
</script>

在这个例子中，我们创建了一个名为main的store，它包含一个状态counter和一个动作increment。在Vue组件中，我们通过setup函数使用useMainStore函数来访问store中的状态和动作。

vue使用qrcode 生成二维码

2024-08-20

在Vue中使用qrcode.js生成二维码，首先需要安装qrcode库：




npm install qrcode

然后在Vue组件中引入并使用qrcode：




<template>
  <div>
    <canvas ref="qrcodeCanvas"></canvas>
  </div>
</template>
 
<script>
import QRCode from 'qrcode'
 
export default {
  name: 'QrcodeComponent',
  mounted() {
    this.generateQRCode('https://example.com')
  },
  methods: {
    generateQRCode(data) {
      QRCode.toCanvas(this.$refs.qrcodeCanvas, data, error => {
        if (error) console.error(error)
        console.log('QR Code generated successfully!')
      })
    }
  }
}
</script>

在上面的例子中，我们在组件的mounted钩子中调用了generateQRCode方法，并传入了想要编码为二维码的URL。该方法使用QRCode.toCanvas函数将二维码渲染到canvas元素上。如果生成过程中发生错误，它会被回调的error参数捕获，否则会在控制台输出"QR Code generated successfully!"。

Vue + .NetCore前后端分离，不一样的快速发开框架

2024-08-20

Vue.js 和 ASP.NET Core 是构建现代Web应用程序的流行技术栈。以下是一个简单的例子，展示如何将Vue.js前端与ASP.NET Core后端搭配使用。

使用Vue CLI创建一个新的Vue项目：




vue create my-vue-app

进入创建的Vue项目目录，并启动开发服务器：




cd my-vue-app
npm run serve

在另一个目录中创建一个新的ASP.NET Core Web API项目：




dotnet new webapi -o my-dotnet-api

将Vue项目的构建输出集成到ASP.NET Core项目中。在Vue项目目录中执行构建命令，并将生成的静态文件复制到ASP.NET Core项目的wwwroot目录：




npm run build
xcopy /E /I dist wwwroot

修改ASP.NET Core项目中的Startup.cs，以便服务Vue应用程序的静态文件：




public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
 
    app.UseStaticFiles(); // 服务静态文件
 
    app.UseRouting();
 
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers(); // 路由API请求
 
        // 为Vue应用程序路由使用history模式的fallback
        endpoints.MapFallbackToFile("index.html");
    });
}

在ASP.NET Core项目中配置CORS策略，允许前端应用跨域请求：




public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddDefaultPolicy(
            builder =>
            {
                builder.WithOrigins("http://localhost:8080") // Vue应用的URL
                       .AllowAnyHeader()
                       .AllowAnyMethod();
            });
    });
 
    services.AddControllers();
}

在Startup.cs的Configure方法中应用CORS策略：




app.UseCors();

启动ASP.NET Core应用程序：




dotnet run

现在，Vue.js前端应用会运行在一个端口（如8080），而ASP.NET Core后端会在另一个端口（如5000）上运行。前端发起的API请求会被路由到后端，从而实现前后端分离的Web开发。

VUE篇之日历组件

2024-08-20

以下是一个简单的Vue日历组件示例，它允许用户选择一个日期并显示所选日期。




<template>
  <div>
    <h2>Simple Calendar</h2>
    <p>Selected Date: {{ selectedDate }}</p>
    <button @click="prevMonth">Prev Month</button>
    <button @click="nextMonth">Next Month</button>
    <div>
      <div>Sun</div>
      <div>Mon</div>
      <div>Tue</div>
      <div>Wed</div>
      <div>Thu</div>
      <div>Fri</div>
      <div>Sat</div>
      <div
        v-for="day in calendar"
        :key="day.date"
        :class="{'selected': isSelected(day.date)}"
        @click="selectDate(day.date)"
      >
        {{ day.day }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedDate: null,
      currentMonth: new Date(),
      calendar: [],
    };
  },
  created() {
    this.buildCalendar();
  },
  methods: {
    buildCalendar() {
      const daysInMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 0).getDate();
      this.calendar = [];
      for (let day = 1; day <= daysInMonth; day++) {
        this.calendar.push({
          day: day,
          date: new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth(), day),
        });
      }
    },
    prevMonth() {
      this.currentMonth = new Date(this.currentMonth.setMonth(this.currentMonth.getMonth() - 1));
      this.buildCalendar();
    },
    nextMonth() {
      this.currentMonth = new Date(this.currentMonth.setMonth(this.currentMonth.getMonth() + 1));
      this.buildCalendar();
    },
    selectDate(date) {
      this.selectedDate = date;
    },
    isSelected(date) {
      return this.selectedDate && this.selectedDate.toDateString() === date.toDateString();
    },
  },
};
</script>
 
<style scoped>
.selected {
  background-color: blue;
  color: white;
}
/* Add styles for the calendar layout */
</style>

这个日历组件使用Vue的数据驱动方法来构建动态日历。它允许用户点击前一个或下一个月份按钮来更新日历视图，并且可以选择一个日期，被选择的日期会被高亮显示。这个例子提供了一个简单的日历组件的基本功能，可以根据实际需求进行扩展和定制。

2024-08-20

在Vue项目中安装并使用百度地图以获取当前城市名称、经纬度和省市区信息，你需要按照以下步骤操作：

安装百度地图JavaScript SDK。




npm install @vue/baidu-map --save

在Vue项目中全局或局部注册BaiduMap组件。

全局注册（在main.js或main.ts中）：




import Vue from 'vue'
import BaiduMap from '@vue/baidu-map'
 
Vue.use(BaakMap, {
  ak: '你的百度地图ak' // 替换为你的百度地图ak
})

局部注册（在组件中）：




import { BaiduMap, BMap } from '@vue/baidu-map'
 
export default {
  components: {
    BaiduMap
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const map = new BMap.Map('map') // 假设你的地图容器的id为map
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      
      // 其他地图配置和方法...
    }
  }
}

使用百度地图API获取当前城市名称、经纬度和省市区信息。




methods: {
  initMap() {
    const map = new BMap.Map('map') // 假设你的地图容器的id为map
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
 
    // 获取当前地图视野的中心点经纬度
    const geolocation = new BMap.Geolocation()
    geolocation.getCurrentPosition(function(r) {
      if (this.getStatus() == 0) {
        const mk = new BMap.Marker(r.point)
        map.addOverlay(mk)
        map.panTo(r.point)
 
        // 获取位置信息
        const geoc = new BMap.Geocoder()
        geoc.getLocation(r.point, function(rs) {
          const addComp = rs.addressComponents
          console.log('当前城市：', addComp.city)
          console.log('经纬度：', r.point.lng + ',' + r.point.lat)
          console.log('省市区：', addComp.province + '-' + addComp.city + '-' + addComp.district)
        })
      } else {
        console.log('failed to get location', this.getStatus())
      }
    }, { enableHighAccuracy: true })
  }
}

确保你的Vue项目中有一个HTML元素用于显示地图，例如：




<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>

以上代码实现了在Vue项目中使用百度地图API获取当前城市名称、经纬度和省市区信息的功能。记得替换new BMap.Point(116.404, 39.915)中的经纬度为你想要初始化地图的点，并替换ak为你的百度地图ak。

2024-08-20




<template>
  <div id="app">
    <vs-sidebar click-not-close parent="body" default-index="1" color="primary" class="sidebarx">
      <div class="header-sidebar" slot="header">
        <!-- 这里可以放置品牌logo等内容 -->
      </div>
      <vs-sidebar-item index="1" icon="question_answer">
        Dashboard
      </vs-sidebar-item>
      <vs-sidebar-item index="2" icon="gavel">
        History
      </vs-sidebar-item>
      <!-- 更多的sidebar项 -->
    </vs-sidebar>
 
    <div class="content-wrapper">
      <!-- 主要内容区 -->
    </div>
  </div>
</template>
 
<script>
import VsSidebar from 'vuesax/dist/components/vs-sidebar/VsSidebar.vue'
import VsSidebarItem from 'vuesax/dist/components/vs-sidebar-item/VsSidebarItem.vue'
 
export default {
  components: {
    VsSidebar,
    VsSidebarItem
  }
}
</script>
 
<style>
.sidebarx {
  height: 100vh; /* 设置侧边导航的高度为视口高度 */
  width: 250px; /* 设置侧边导航的宽度 */
  position: fixed; /* 将侧边导航条固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  overflow-y: auto; /* 使得导航内容超出时可以滚动 */
}
 
.content-wrapper {
  margin-left: 250px; /* 设置内容区的左外边距，以保证内容不会覆盖导航栏 */
  padding-top: 60px; /* 设置顶部内边距，以避免内容被侧边导航栏遮挡 */
}
 
@media (max-width: 768px) {
  .sidebarx {
    transform: translateX(-250px); /* 当屏幕宽度小于768px时，侧边导航条默认隐藏，通过transform实现滑动效果 */
    transition: transform 0.3s ease-in-out; /* 设置过渡动画 */
  }
 
  .content-wrapper {
    margin-left: 0; /* 屏幕宽度小于768px时，取消内容区的左外边距，以实现侧边导航栏的悬浮效果 */
  }
 
  #app.sidebar-hidden .sidebarx {
    transform: translateX(0); /* 当sidebar-hidden类被添加到#app时，侧边导航条通过transform显示出来 */
  }
}
</style>

这个示例代码展示了如何使用Vuesax库中的vs-sidebar和vs-sidebar-item组件来创建一个自适应的侧边导航栏。侧边导航栏会在屏幕宽度大于768px时固定在左侧，并占据100%的高度和一定的宽度。当屏幕宽度小于768px时，侧边导航栏会隐藏，只有在#app元素上添加了sidebar-hidden类时，侧边导航栏才会通过transform属性显示出来。这个示例还展示了如何使用媒体查询来实现响应式布局，并通过Flex布局来保证内容区不会被侧边导航栏遮挡。

docker+vue云服务器打包镜像相关操作

2024-08-20

以下是一个简化的例子，展示如何使用Dockerfile来构建一个Vue.js应用的Docker镜像，并部署到云服务器上。

首先，你需要一个Vue.js项目，并且有一个Dockerfile来描述如何构建你的镜像：




# 基于Node镜像来构建
FROM node:lts-alpine
 
# 设置容器内的工作目录
WORKDIR /app
 
# 复制package.json文件和package-lock.json文件到工作目录
COPY package*.json ./
 
# 安装项目依赖
RUN npm install
 
# 复制项目文件到工作目录
COPY . .
 
# 暴露80端口
EXPOSE 80
 
# 运行npm start命令
CMD ["npm", "start"]

接下来，你可以使用以下命令来构建你的Docker镜像：




docker build -t vueapp .

构建完成后，你可以使用以下命令来运行你的Vue.js应用：




docker run -p 8080:80 vueapp

最后，你需要将你的镜像推送到云服务器上的Docker注册表，例如AWS ECR或者Google Container Registry。推送完成后，你可以使用云服务器的SSH或者其他方式来运行你的容器。

注意：以上代码只是一个示例，具体的步骤可能会根据你的项目和云服务器的配置有所不同。

vue技巧全局配置使用（打包后可修改配置文件）

2024-08-20

在Vue项目中，我们可以通过创建一个全局配置文件来管理我们的配置信息，这样在开发和生产环境下都可以很容易地进行更改。以下是一个如何实现全局配置文件的例子：

首先，在项目的根目录下创建一个config.js文件，用于存放全局配置信息：




// config.js
const config = {
  baseApi: process.env.VUE_APP_BASE_API, // 接口地址
  otherConfig: process.env.VUE_APP_OTHER_CONFIG // 其他配置
  // 可以添加更多配置项
};
 
export default config;

然后，你可以在任何组件中通过导入这个配置文件来使用这些配置信息：




// 在组件中使用
import config from '@/config';
 
export default {
  data() {
    return {
      apiUrl: config.baseApi
    };
  }
  // 其他选项...
};

在.env文件中设置环境变量，例如：




# .env 文件
VUE_APP_BASE_API=https://api.example.com
VUE_APP_OTHER_CONFIG=some_value

在.env.production文件中设置生产环境下的变量，例如：




# .env.production 文件
VUE_APP_BASE_API=https://api.example.com/prod
VUE_APP_OTHER_CONFIG=production_value

这样，当你在开发环境下运行项目时，它会使用.env文件中的配置，而在生产环境下打包时，会使用.env.production文件中的配置，这样你可以在不修改代码的情况下轻松切换环境。

【vue】 vue2 中使用 Tinymce 富文本编辑器

2024-08-20

在Vue 2项目中使用Tinymce富文本编辑器，首先需要安装Tinymce：




npm install tinymce

然后，你可以创建一个Vue组件以封装Tinymce：




<template>
  <div>
    <textarea :id="id"></textarea>
  </div>
</template>
 
<script>
import tinymce from 'tinymce';
 
export default {
  props: {
    id: {
      type: String,
      default: 'tinymce'
    },
    value: {
      type: String,
      default: ''
    }
  },
  mounted() {
    tinymce.init({
      selector: `#${this.id}`,
      plugins: 'lists link image code',
      toolbar: 'bullist numlist | link image | code',
      setup: (editor) => {
        editor.on('init Change', () => {
          editor.setContent(this.value);
        });
        editor.on('Change', () => {
          this.$emit('input', editor.getContent());
        });
      }
    });
  },
  destroyed() {
    tinymce.remove(`#${this.id}`);
  }
};
</script>

在父组件中使用该Tinymce组件：




<template>
  <div>
    <tinymce-editor v-model="content"></tinymce-editor>
  </div>
</template>
 
<script>
import TinymceEditor from './TinymceEditor.vue';
 
export default {
  components: {
    TinymceEditor
  },
  data() {
    return {
      content: ''
    };
  }
};
</script>

确保在Vue单文件组件中正确地引入并注册了Tinymce编辑器。以上代码提供了一个简单的例子，展示了如何在Vue 2项目中集成Tinymce编辑器。