标签 Javascript 下的文章

2024-08-15

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。与其他重量级框架不同，Vue 采用自底向上增量开发的设计。其核心库主要关注视图层，并且非常容易学习和集成到现有项目中。

以下是一些学习Vue.js的基本步骤：

安装Vue.js：
在HTML文件中直接使用一个<script>标签来引入，或者使用NPM，或者使用命令行工具vue-cli来构建项目。

创建一个Vue实例：




new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

使用模板语法：
在HTML模板中使用{{ }}插值数据，或者使用指令如v-bind绑定属性。
响应式数据和声明式渲染：
Vue会追踪在数据变化时相关的DOM表现，使得开发者不用操作DOM就可以更新界面。
组件化应用构建：
使用Vue.component定义组件，然后可以在模板中复用。
客户端路由与状态管理：
使用Vue Router进行路由管理，使用Vuex进行状态管理。
深入了解指令、过滤器、生命周期钩子等高级特性。

示例代码：




<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 示例</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

以上是一个简单的Vue.js示例，它在页面上显示"Hello Vue!"。这只是Vue.js世界的一个角落，实际应用中会涉及更复杂的功能和模式。

System

2024-08-15

所有,vue.js

前端开发中常用的命令行工具和操作命令包括但不限于：

Node.js 和 npm:
- 安装Node.js和npm: 访问Node.js官网安装。
- 更新npm: npm install -g npm@latest
- 安装项目依赖: npm install
- 运行项目: npm start
- 构建项目: npm run build
Yarn:
- 安装Yarn: npm install -g yarn
- 安装项目依赖: yarn install
- 运行项目: yarn start
- 构建项目: yarn build
Vue CLI:
- 安装Vue CLI: npm install -g @vue/cli
- 创建新项目: vue create my-project
- 运行项目: cd my-project 然后 npm run serve
React CLI:
- 创建新项目: npx create-react-app my-app
- 运行项目: cd my-app 然后 npm start
Git:
- 安装Git: 访问Git官网下载安装。
- 初始化新仓库: git init
- 克隆仓库: git clone <repository_url>
- 提交更改: git add . 然后 git commit -m "Commit message"
- 推送到远程仓库: git push
WebP:
- 通常不作为命令行工具，而是通过图片处理软件或在线工具转换图片格式为WebP。

以上命令提供了一个基本的概念，实际使用时可能需要根据项目配置和具体需求进行调整。

- 阅读更多 -

推荐一款优雅的Vue JSON 格式化组件：Vue Json Pretty

System

2024-08-15

所有,vue.js




<template>
  <div id="app">
    <vue-json-pretty :data="jsonData"></vue-json-pretty>
  </div>
</template>
 
<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css'; // 导入样式
 
export default {
  components: {
    VueJsonPretty
  },
  data() {
    return {
      jsonData: {
        name: "Vue Json Pretty",
        version: "1.0.0",
        keywords: ["json", "formatter", "vue"]
      }
    };
  }
};
</script>

这段代码展示了如何在Vue应用中使用vue-json-pretty组件来格式化并展示JSON数据。首先导入了vue-json-pretty组件及其样式，然后在模板中使用该组件并通过:data属性传递要格式化的JSON对象。

- 阅读更多 -

vue3使用@vitejs/plugin-vue-jsx来满足jsx

System

2024-08-15

所有,vue.js

在Vue 3中使用Vite配合@vitejs/plugin-vue-jsx可以让你在Vue项目中使用JSX。以下是如何配置的步骤：

确保你已经安装了Vite和Vue。
安装@vitejs/plugin-vue-jsx：




npm install @vitejs/plugin-vue-jsx

在Vite配置文件中（通常是vite.config.js或vite.config.ts），引入defineConfig和plugin-vue-jsx，并配置插件：




// vite.config.js
import { defineConfig } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';
 
export default defineConfig({
  plugins: [vueJsx()],
  // 其他配置...
});

在.vue文件中使用JSX：




// MyComponent.vue
<script lang="jsx">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const count = ref(0);
 
    return () => (
      <div>
        <p>Count: {count.value}</p>
        <button onClick={() => count.value++}>Increment</button>
      </div>
    );
  },
});
</script>

确保你的.vue文件中的<script>标签上设置了lang="jsx"，这样Vite就知道该如何处理这个脚本标签内的代码。

- 阅读更多 -

前端 JS 经典：vue 开发中的 base 和 publicPath

System

2024-08-15

所有,vue.js

在Vue项目中，base 和 publicPath 是用来设置应用的基本URL和资源发布路径的。

base：指定应用的基本URL。例如，如果你的应用是作为子路径进行访问的，例如 http://www.example.com/app，你需要将 base 设置为 /app/。
配置方法：
```
// vue.config.js
module.exports = {
  base: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}
```
publicPath：指定项目中的资源被引用时的基本路径。例如，当你的应用部署在服务器的根路径时，publicPath 应该被设置为 /。如果你的应用是作为子路径访问的，例如 http://www.example.com/app，那么 publicPath 应该被设置为 /app/。
配置方法：
```
// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}
```

这些配置通常在Vue项目的 vue.config.js 文件中设置。如果该文件不存在，你可以在项目根目录手动创建它。

- 阅读更多 -

vue+threejs实现3D模型预览（包含模型缩放、平移、清晰度调整）

System

2024-08-15

所有,vue.js




<template>
  <div class="model-viewer">
    <div id="three-d-viewer" ref="threeDViewer"></div>
  </div>
</template>
 
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 
export default {
  name: 'ModelViewer',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      model: null
    };
  },
  methods: {
    initThreeJS() {
      const width = this.$refs.threeDViewer.clientWidth;
      const height = this.$refs.threeDViewer.clientHeight;
 
      this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      this.camera.position.z = 5;
 
      this.scene = new THREE.Scene();
 
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(width, height);
      this.$refs.threeDViewer.appendChild(this.renderer.domElement);
 
      const loader = new GLTFLoader();
      loader.load('path/to/your/model.glb', (gltf) => {
        this.model = gltf.scene;
        this.scene.add(this.model);
      });
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
    this.initThreeJS();
    this.animate();
  }
};
</script>
 
<style scoped>
.model-viewer {
  width: 100%;
  height: 80vh;
  position: relative;
}
 
#three-d-viewer {
  width: 100%;
  height: 100%;
}
</style>

这个代码实例展示了如何在Vue组件中初始化Three.js以及加载一个3D模型，并在组件的mounted生命周期钩子中开始动画循环。它包括了基本的3D相机、场景、渲染器和模型加载，并且可以通过调整样式来实现模型的缩放、平移和清晰度的调整。

- 阅读更多 -

vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容

System

2024-08-15

所有,vue.js

要在Vue项目中使用vue-pdf或pdf.js来预览PDF内容，你需要先安装这些库。

使用vue-pdf:

安装vue-pdf:




npm install vue-pdf

在Vue组件中使用vue-pdf:




<template>
  <div>
    <pdf
      :src="pdfSrc"
    ></pdf>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>

使用pdf.js:

安装pdf.js:




npm install pdfjs-dist

在Vue组件中使用pdf.js:




<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import { getDocument } from 'pdfjs-dist/webpack'
 
export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.loadPdf()
  },
  methods: {
    async loadPdf() {
      const loadingTask = getDocument(this.src)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext).promise
    }
  }
}
</script>

在这两种方法中，你需要将pdfSrc或src属性指向你的PDF文件。vue-pdf是一个更高级的封装，它提供了一个更简单的方式来集成PDF预览功能。而pdf.js则提供了更多的控制和定制选项。根据你的需求选择合适的库。

- 阅读更多 -

探索 Vue Vine：一个创新的Vue.js组件库

System

2024-08-15

所有,vue.js




<template>
  <div class="vine-container">
    <div class="vine-header">
      <h1>{{ title }}</h1>
    </div>
    <div class="vine-content">
      <slot></slot>
    </div>
    <div class="vine-footer">
      <p>{{ footerText }}</p>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'VineLayout',
  props: {
    title: String,
    footerText: String
  }
}
</script>
 
<style scoped>
.vine-container {
  display: flex;
  flex-direction: column;
}
.vine-header, .vine-footer {
  padding: 10px;
  text-align: center;
}
.vine-content {
  flex: 1;
}
</style>

这个例子展示了如何创建一个简单的Vine布局组件，它接受title和footerText作为props，并在模板中显示它们。该组件使用了flexbox布局，将header、footer固定，并使content区域可伸缩。这个组件可以作为一个起点，用于构建更复杂的Vue应用程序。

- 阅读更多 -

vue+three.js结合开发示例

System

2024-08-15

所有,vue.js

以下是一个使用Vue和Three.js创建的基本3D场景的简单示例。这个例子展示了如何在Vue组件中集成Three.js，并设置一个简单的3D场景。




<template>
  <div ref="threeContainer"></div>
</template>
 
<script>
import * as THREE from 'three';
 
export default {
  name: 'ThreeJsComponent',
  mounted() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.threeContainer.appendChild(renderer.domElement);
 
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
 
    camera.position.z = 5;
 
    const animate = function () {
      requestAnimationFrame(animate);
 
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
 
      renderer.render(scene, camera);
    };
 
    animate();
  }
};
</script>
 
<style>
/* 样式部分 */
</style>

在这个例子中，我们创建了一个Vue组件，它在mounted生命周期钩子中初始化Three.js。我们设置了一个场景，相机，渲染器，一个立方体，并将渲染器的DOM元素附加到Vue组件的<div>元素中。然后，我们调整了相机的位置，并启动了一个循环来不断旋转立方体，从而创建一个简单的动画效果。

- 阅读更多 -

【热门话题】Vue.js：现代前端开发的轻量级框架之旅

System

2024-08-15

所有,vue.js




<template>
  <div id="app">
    <h1>欢迎来到{{ title }}</h1>
    <p>这是一个使用Vue.js构建的单页应用程序示例。</p>
    <button @click="greet">点击我</button>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'Vue.js 之旅'
    }
  },
  methods: {
    greet() {
      alert('欢迎来到Vue世界！');
    }
  }
}
</script>
 
<style>
#app {
  text-align: center;
  color: #2c3e50;
}
</style>

这个简单的Vue.js示例展示了如何创建一个组件，包括模板、脚本和样式。组件包含一个标题、一段文本和一个按钮，点击按钮时会弹出一个警告框。这个过程展示了Vue.js如何连接数据、响应事件以及如何组织代码结构。

- 阅读更多 -