使用 Vue + Three.js 构建交互式 WEB 作品展示集（一）

可以肯定地说，WEB 作品集是展示项目和分享品牌的最佳方式之一。但这对于 WEB 开发人员来说更为重要，个人网站是展示个人能力的最佳方式。

程序员的设计

当在开始的时候，对于设计一个漂亮的界面缺乏信息，特别对于程序员来说。一个好的作品集必须传达品牌并让读者一见倾心，但是当优势在于编程而不是设计时，如何才能做到这一点？

有个不错的途径：使用 3D 来展示，在呈现上带来视觉震撼，计算机图形永远不会过时，可以创造惊人的交互元素，同时展示自己的核心竞争力：编程！

图形设计

对于一个程序员来说，图形设计是有难度的，特别对于一个后端程序员来说更是。从本文开始一起使用 Three.js 、 Vue、SASS 来构建一个震撼的作品展示。

• Three.js：一个为简化渲染过程的 JavaScript 库。可以将其视为开源 Web 图形引擎 WebGL 的抽象。

• Vue：一个流行的 JavaScript 框架，主流的前端项目开发框架。

• SASS ：在制作样式的同时提供更好的开发体验。

项目初始化

初始化 Vue 应用程序的最简单方法是使用 Vue CLI，先从初始化环境开始。

1. 安装 Vue CLI

npm install -g @vue/cli

2. 初始化项目

通过在多个预设和选项之间进行选择来配置 VUE 项目，可以使用之前使用 npm 安装的 vue 命令来执行此操作：

vue create your-project-name

根据提示选择如下信息：

• Preset pick a preset：Manually select features
  

• Check the features needed
  

• Vue 版本： 3.x (Preview)
  

• CSS preprocessor：Sass/SCSS (with dart-sass)
  

初始化完成后，执行命令：npm run serve

配置全局 SCSS 样式表

现在项目已经初始化，需要进行一些更改，以便可以使用全局 .scss 文件来存储变量、mixin 等等。

1. 创建文件

将在 src 文件夹中看到一个名为 assets 的文件夹。在这里，将有不同的静态文件文件夹，比如图像、svgs，在本文的例子中：样式表。在 assets 文件夹中，创建了文件夹 scss 。在那里，将创建变量文件 variables.scss。

2. 测试变量

在 variables.scss 文件中，将创建一个测试颜色变量：$bg-color: #efefef;。SCSS 可以自定义变量，通常将颜色、大小等存储为可以随时调用的变量。

3. 配置 Vue

在项目的根目录中找到一个名为 vue.config.js 的文件。如果没有，请创建它。修改配置如下：

module.exports = {    css: {        loaderOptions: {            scss: {                prependData: `              @import "@/assets/scss/variables.scss";            `,            },        },    },};

将来，如果想添加更多 .scss 文件，只需在此处添加它们，一个接一个地导入。

4. 调用变量

尝试在 Vue 组件的 <style> 标签内调用该变量。例如，作为 App.vue 文件的背景颜色。现在重新启动项目，如下所示：

<style lang="scss">#app {    font-family: Avenir, Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;    background-color: $bg-color;}
#nav {    padding: 30px;
    a {        font-weight: bold;        color: #2c3e50;
        &.router-link-exact-active {            color: #42b983;        }    }}</style>