1. 首页
  2. 标签
  3. VUE
部署node+vue3+vite的项目（宝塔面板+mysql+阿里云）
System
2024-08-13
所有,mysql

部署Node.js + Vue 3 + Vite项目的步骤概要如下：

  1. 在服务器上安装Node.js环境。
  2. 使用npm或yarn安装项目依赖。
  3. 配置环境变量和数据库连接。
  4. 构建Vue项目。
  5. 配置Node.js应用服务器。
  6. 在宝塔面板设置定时任务和防火墙规则。
  7. 在宝塔面板设置MySQL数据库。
  8. 将构建好的Vue项目和Node.js应用部署到服务器。
  9. 启动Node.js应用服务器。
  10. 配置域名解析和SSL证书。

以下是部署的示例步骤：




# 安装Node.js
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
 
# 安装npm或yarn（选其一）
sudo apt install npm
# 或
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn
 
# 安装项目依赖
cd /path/to/your/project
npm install
# 或
yarn install
 
# 本地构建Vue项目
cd /path/to/your/project/frontend
npm run build
# 或
yarn build
 
# 将构建好的Vue项目文件移动到Node.js项目的静态文件目录
mv /path/to/your/project/frontend/dist /path/to/your/project/public
 
# 配置环境变量和数据库连接（宝塔面板通常有图形化界面操作）
 
# 启动Node.js应用
cd /path/to/your/project
npm start
# 或
yarn start
 
# 设置定时任务（宝塔面板设置定时任务）
# 配置防火墙规则（宝塔面板设置防火墙规则）
# 设置MySQL数据库（宝塔面板设置MySQL数据库）
# 将应用部署到服务器（通常通过FTP或宝塔面板的文件管理器操作）
# 配置域名和SSL（宝塔面板设置域名和SSL证书）

注意：

  • 确保服务器安全组和防火墙规则已正确设置，允许所需的端口通行。
  • 使用环境变量来管理敏感信息，如数据库密码等。
  • 使用进程管理器（如pm2）来确保Node.js应用长期运行。
  • 定期备份数据库和代码，确保业务连续性。
  • 监控应用性能和日志，及时发现并解决问题。
- 阅读更多 -
VueVite和HTML5之间的关系
System
2024-08-13
所有,html5

Vue 3、Vite 和 HTML 5 都是现代前端开发中的关键技术。Vue 3 是一个用于构建用户界面的渐进式JavaScript框架，Vite 是一个基于Rollup的构建工具，旨在为现代Web项目提供更快的开发体验。HTML 5 是用于定义网页内容的标准标记语言。

关系：Vue 3 和 Vite 可以帮助你更高效地开发和构建现代的Web应用程序，而 HTML 5 定义了你应用程序的结构和内容。Vite 可以配置为构建 Vue 3 项目，并且可以使用 HTML 5 标准来创建页面模板。

以下是一个简单的 Vue 3 + Vite 项目的创建和运行步骤：

  1. 确保你有 Node.js 和 npm 安装。
  2. 使用命令行工具运行以下命令创建一个新的 Vue 3 项目：



npm init vite@latest my-vue-app --template vue-ts
  1. 进入项目目录：



cd my-vue-app
  1. 安装依赖：



npm install
  1. 运行开发服务器：



npm run dev

以上步骤会创建一个基础的 Vue 3 项目，并且使用 Vite 作为构建工具。在浏览器中打开提供的地址，你将看到一个基础的 Vue 页面，这个页面是由 HTML 5 标准和 Vue 3 组件构建的。

- 阅读更多 -
我是如何看Vue源码的
System
2024-08-13
所有,typescript

在上一部分中，我们已经设置好了环境，并且成功地运行了Vue的构建系统。在这一部分，我们将通过一个简单的例子来看看Vue的源码是如何工作的。

首先，我们需要创建一个新的Vue实例，并且可以通过mount方法将其挂载到DOM中。




// main.js
import Vue from './vue'
 
const app = new Vue({
  data: {
    message: 'Hello Vue!'
  }
})
 
app.$mount('#app')

在这个例子中，我们导入了自定义的Vue模块，并创建了一个新的Vue实例，其中包含一个数据属性message。然后，我们调用$mount方法，并传入一个DOM选择器#app，告诉Vue应该挂载到页面上哪个元素内部。

接下来，我们需要一个HTML文件来挂载我们的Vue实例：




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Example</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
 
  <script src="main.js"></script>
</body>
</html>

在浏览器中打开index.html，你应该能看到页面上显示了"Hello Vue!"。

通过这个简单的例子，我们可以看到Vue实例是如何被创建和挂载到DOM上的。在下一部分，我们将更深入地探讨这个过程中发生了什么，包括Vue的响应式系统和虚拟DOM的创建过程。

- 阅读更多 -
vite+ts+vue3 知识点（自定义指令，自定义插件）
System
2024-08-13
所有,typescript

在Vite + TypeScript + Vue 3项目中，可以通过以下方式实现自定义指令和插件：

自定义指令

创建一个自定义指令的文件，例如src/directives/focus.ts:




import { App, DirectiveBinding } from 'vue';
 
export const focus = {
  // 当被绑定的元素插入到 DOM 中时调用
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    if (binding.value) {
      el.focus();
    }
  },
  // 当绑定的值更新时调用
  updated(el: HTMLElement, binding: DirectiveBinding) {
    if (binding.value) {
      el.focus();
    }
  }
};
 
export default {
  install(app: App) {
    app.directive('focus', focus);
  }
};

然后在main.ts中使用这个指令：




import { createApp } from 'vue';
import App from './App.vue';
import directives from './directives/focus'; // 导入自定义指令
 
const app = createApp(App);
 
app.use(directives); // 使用自定义指令插件
 
app.mount('#app');

在Vue组件中使用这个指令：




<template>
  <input v-focus="true" type="text">
</template>

自定义插件

创建一个自定义插件的文件，例如src/plugins/myPlugin.ts:




import { App } from 'vue';
 
export default {
  install(app: App) {
    // 添加全局方法或属性
    app.config.globalProperties.$myGlobalMethod = () => {
      console.log('This is a global method!');
    };
  }
};

在main.ts中使用这个插件：




import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from './plugins/myPlugin';
 
const app = createApp(App);
 
app.use(myPlugin);
 
app.mount('#app');

在Vue组件中使用插件提供的方法：




<template>
  <button @click="$myGlobalMethod">Call Global Method</button>
</template>

以上代码展示了如何在Vite + TypeScript + Vue 3项目中创建和使用自定义指令和插件。

- 阅读更多 -
Vue2源码里的flow与TypeScript之间的对比
System
2024-08-13
所有,typescript

Flow和TypeScript都是静态类型检查器，但它们有一些不同。

  1. 出现时间：Flow是Facebook在2014年开发的，而TypeScript是Microsoft在2012年开发的。
  2. 运行方式：Flow在编码时不需要任何运行时开销，类型检查是在代码编译时进行的。而TypeScript在编码时不会有额外的运行时开销，但需要通过编译器将代码转换成JavaScript。
  3. 类型检查：Flow主要提供了类型注解，而TypeScript提供了完整的类型系统，包括泛型、接口等高级特性。
  4. 第三方库支持：Flow通常需要库的定义文件（.js.flow）来提供类型支持，而TypeScript可以直接提供类型声明文件。
  5. 配置和工具：Flow通常需要Eslint、Flow等工具配合，而TypeScript可以直接使用tslint等工具。
  6. 类型推断：Flow有基本的类型推断，而TypeScript有更高级的类型推断能力。
  7. 社区和支持：Flow社区较小，而TypeScript社区较大，并且有更多的第三方库和工具支持。
  8. 学习曲线：Flow的学习曲线较低，容易上手，而TypeScript的学习曲线较陡峭，但提供了更多的类型系统特性。

Vue2中使用Flow的情况较多，因为它提供了快速的类型检查，同时对代码的侵入性小。而随着TypeScript的发展和更多支持，在新项目中可能会更多地使用TypeScript。

- 阅读更多 -
【vue-tsc报错】node_modules ypescriptlib sserverlibrary.js:119161 throw e；
System
2024-08-13
所有,typescript

报错信息不完整，但如果你在使用 Vue 和 TypeScript 时遇到了与 node_modules 相关的 vue-tsc 错误，可能是以下原因：

  1. 类型定义不匹配：可能是某个库的类型定义与其实际导出的值不匹配。
  2. 缺少类型定义：项目中可能使用了一个没有自带类型定义文件的库。
  3. 类型检查失败：代码中可能存在不符合 TypeScript 规则的类型标注。

解决方法：

  1. 更新类型定义：确保所有库的类型定义是最新的。
  2. 安装类型定义：如果库没有内置类型定义，可以通过 @types/库名 来安装。
  3. 修改 TypeScript 配置：在 tsconfig.json 中，可以调整类型检查的严格程度，比如将 strict 设置为 false 来暂时忽略某些类型错误。
  4. 修正代码：根据错误信息修正代码中的类型不匹配问题。

如果能提供具体的错误信息，可以提供更精确的解决方案。

- 阅读更多 -
Vite-Vue3-TypeScript：009-屏幕适配
System
2024-08-13
所有,typescript

屏幕适配是前端开发中一个常见的问题。在Vue3项目中，可以使用一些CSS工具和库来帮助我们更好地进行屏幕适配。以下是一个简单的例子，展示如何使用CSS的媒体查询来进行基本的屏幕适配。

  1. 首先，在项目中安装并设置postcss-pxtorem库，这是一个可以将CSS中的px单位转换为rem单位的工具，有利于实现响应式布局。



npm install postcss-pxtorem --save-dev
  1. 在vite.config.ts中配置postcss-pxtorem:



import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入postcss-pxtorem
import pxtorem from 'postcss-pxtorem'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 37.5, // 设计稿宽度/10，通常设置为37.5（对应100px设计稿）
          propList: ['*'], // 需要转换的属性，这里选择转换所有属性
        }),
      ],
    },
  },
})
  1. 在main.ts中引入Element Plus和Normalize.css:



import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'normalize.css/normalize.css' // 用于清除默认样式
 
const app = createApp(App)
 
app.use(ElementPlus)
 
app.mount('#app')
  1. 在组件中使用样式，例如：



<template>
  <div class="container">
    <el-button type="primary">按钮</el-button>
  </div>
</template>
 
<script setup lang="ts">
// 这里是组件的逻辑
</script>
 
<style scoped>
.container {
  width: 6.4rem; /* 相当于250px */
  margin: 0 auto;
}
</style>

以上代码展示了如何在Vite + Vue3 + TypeScript项目中使用postcss-pxtorem进行屏幕适配。通过设置rootValue为设计稿宽度的1/10，我们可以很方便地将CSS单位转换为rem，实现响应式布局。

- 阅读更多 -
vue3+elementPlus+ts封装form表单组件
System
2024-08-13
所有,typescript

在Vue 3和Element Plus中使用TypeScript封装一个表单组件的基本步骤如下：

  1. 创建一个新的Vue组件文件，例如MyForm.vue。
  2. 使用<template>标签定义表单的HTML结构。
  3. 使用<script setup lang="ts">标签开启Composition API。
  4. 引入Element Plus的表单组件和必要的Vue组件。
  5. 使用ref或reactive创建表单数据模型。
  6. 使用ElForm、ElFormItem等组件包裹表单元素，并绑定模型。
  7. 提供方法处理表单提交。

以下是一个简单的封装例子：




<template>
  <ElForm :model="formData" @submit.prevent="handleSubmit">
    <ElFormItem label="用户名">
      <ElInput v-model="formData.username" />
    </ElFormItem>
    <ElFormItem label="密码">
      <ElInput type="password" v-model="formData.password" />
    </ElFormItem>
    <ElFormItem>
      <ElButton type="primary" native-type="submit">提交</ElButton>
    </ElFormItem>
  </ElForm>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
 
interface FormData {
  username: string;
  password: string;
}
 
const formData = ref<FormData>({
  username: '',
  password: ''
});
 
const handleSubmit = () => {
  console.log(formData.value);
  // 处理表单提交逻辑
};
</script>

这个组件封装了一个带有用户名和密码输入的表单，并提供了一个方法来处理表单提交。使用<script setup>和TypeScript使得代码更加简洁和类型安全。

- 阅读更多 -
TypeScript快速上手语法+结合vue3用法
System
2024-08-13
所有,typescript



// 定义一个Vue组件
<template>
  <div>{{ greeting }} {{ name }}</div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  name: 'HelloWorld',
  setup() {
    // 响应式数据
    const name = ref('Vue3');
 
    // 计算属性
    const greeting = 'Hello,';
 
    // 返回值会被用作组件的响应式数据
    return { greeting, name };
  }
});
</script>

这个例子展示了如何在Vue 3中使用TypeScript创建一个简单的组件。<script lang="ts">标签表明了脚本使用TypeScript编写。defineComponent函数是Vue 3中用于定义组件的API。ref函数用于创建响应式数据。setup函数是组件内使用Composition API的入口点。在setup函数中，我们定义了响应式数据name和计算属性greeting，并在模板中展示了它们。这个例子简单且直接地展示了如何在Vue 3和TypeScript中编写组件。

- 阅读更多 -
vue3+ts+vite+cesium 加载天地图影像 天地图矢量地图 天地图标注等案例模板
System
2024-08-13
所有,typescript

以下是一个使用 Vue 3、TypeScript 和 Vite 创建的简单示例，演示如何集成 Cesium 加载天地图影像和矢量地图，并添加基本标注。

首先，确保你已经安装了 Vite 和 Cesium：




npm init vite@latest my-cesium-app --template vue-ts
cd my-cesium-app
npm install
npm add cesium

然后，在 src/App.vue 文件中添加以下代码：




<template>
  <div id="app">
    <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import Cesium from 'cesium';
 
Cesium.Ion.defaultAccessToken = '<你的天地图Key>'; // 替换为你的天地图Key
 
export default defineComponent({
  name: 'App',
  setup() {
    const cesiumContainer = ref<null | HTMLElement>(null);
 
    onMounted(() => {
      const viewer = new Cesium.Viewer(cesiumContainer.value!, {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=<你的天地图Key>', // 天地图影像服务URL
          layer: 'tdtImg_w',
          style: 'default',
          format: 'tiles',
          tileMatrixSetID: 'GoogleMapsCompatible',
        }),
        terrainProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.gov.cn/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=<你的天地图Key>', // 天地图矢量服务URL
          layer: 'tdtVec_w',
          style: 'default',
          format: 'tiles',
          tileMatrixSetID: 'GoogleMapsCompatible',
        }),
        geocoder: false,
        homeButton: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        sceneModePicker: false,
        navigationInstructionsInitiallyVisible: false,
        scene3D: new Cesium.Scene({
          globe: new Cesium.Globe(),
        }),
      });
 
      // 添加基本标注
      const position = Cesium.Cartesian3.fromDegrees(116.40769, 39.89945, 0);
      viewer.entities.add({
        name: '北京天安门',
        position: position,
- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号