【详细操作流程】从零开始创建Vue3项目 ‘vueproject’，并且引入echarts，element-plus，thress.js库

本文档涉及内容:

1.创建Vue3项目 ‘vueproject’ ，本文档涉及的操作和代码都在此项目中实现
2.Vue3引入echarts并写一个实例
3.Vue3引入elements-plus并写一个实例
4.Vue3引入thress.js库并写一个实例
5.涉及的代码清单

*******************前提：构建 Vue.js 项目的工具：Vue CLI 或者 Vite *****************

1.Vue CLI 是官方推荐的构建 Vue.js 项目的标准工具，成熟且稳定，适用于构建中大型和复杂的 Vue.js 项目。

2.Vite 是一个新兴的构建工具，它专注于提供快速的开发体验。Vite 适用于中小型的 Vue.js 项目，特别是那些需要快速开发和迭代的项目。

---

一、创建Vue3项目

1.构建Vue的工具我选择的是Vue CLI，如果你的选择和我一样，那在第一次执行时候全局安装@vue/cli: npm install -g @vue/cli

2.键盘输入视窗+R，输入cmd 进入windows命令提示符界面，进入你要创建文件的目录，
输入：vue create vueproject 来创建vue项目， 项目名称是vueproject，注意vue项目名称要全部小写。

选择：[Vue3]，回车

此时，会创建项目并且安装，这个过程需要些时间去安装很多依赖和包。正常来说是动态的，如果停留的过久，按一下回车等待一会儿就会继续进行

创建项目成功：

3.现在就可以进入项目 cd vueproject
启动项目 npm run serve

根据上面的网址，在浏览器任意打开一个即可看到官方给出的Vue3模板项目

进入VSCode，打开该文件夹，模板项目结构如下：

常用的是图中标红的部分

下图我最初的package.json文件里的内容，此时还没有引入别的库：

如果以后引入新的库了，例如在引入过ecahrts，element-plus之后，package.json中就会多出ecahrts，element-plus：

4.熟悉一下Vue3中代码编写流程吧！【可跳过不了解，这是图片，详细代码可在第五部分获得】
main.js，App.vue，HelloWorld.vue这三个文件里有改动，这是我自己写和补充的，为了熟悉一下编写流程：

【main.js文件】

【App.vue文件】

【HelloWorld.vue文件】

在终端启动项目 npm run serve，进入网页

实现的前端效果是这样的：

二、引入echarts

echarts 是一个用于数据可视化的开源 JavaScript 图表库。它提供了丰富的图表类型和交互功能，可以帮助开发者将数据转化为直观、易于理解的图表，从而更好地展示数据的趋势和关系。

步骤：

1. 安装：在项目目录下执行此命令安装 echarts：npm install echarts
2. 在 Vue 组件中引入 echarts： import * as echarts from “echarts”
3. 创建图表容器：在 Vue 模板中创建一个容器元素，用于显示图表。
4. 在 Vue 组件中使用 echarts
   【具体实例看vueproject项目的源文件下的BarGraph.vue和App.vue，也可以看本文档最后我给的源码记录】

效果图：

**

三、引入element-plus

**
element-plus是一个基于Vue.js的开源UI组件库，是Element UI的升级版本。保留了element-ui的设计风格和核心组件，并增加了新的组件和功能，改进了性能和可访问性，并提供了更加全面和易用的文档和示例。

Vue3中使用element-plus并实现一个实例的步骤：

1.安装element-plus和Vue3的依赖：

npm install element-plus

安装成功后在nodemodules文件夹下能看到该文件@element-plus

2.在main.js中引入element-plus并注册组件：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css' 
上面这句后面会报错，因为我们需要的样式表不一定在这个路径下(解决办法往下翻)
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3.在App.vue中使用element-plus组件：

<template>
  <div>
    <el-button type="primary">Primary Button</el-button>
  </div>
</template>

这样就完成了在Vue3中使用element-plus并实现一个实例的步骤。

报错：

这个错误是由于引入element-plus的样式表的位置不对导致的。

// import ‘element-plus/lib/theme-chalk/index.css’ //引入我们需要的样式表 这个路径不对
把上面的代码改成
import ‘element-plus/theme-chalk/index.css’ //引入我们需要的样式表

运行项目后，效果图：

四、引入three.js

Three.js是一个轻量级，跨平台的Javascript库，可以在浏览器上结合HTML5的canvas,SVG或者WebGL，创建和展示3D模型和动画。Three.js允许我们在不依赖任何浏览器插件的情况下，创建一个GPU加速的3D动画场景。

重要前提！！！！：
要在项目中使用three.js库，通常需要同时安装下面这两个包，可以确保能在项目中正确地导入和使用three.js库，并享受到良好的代码提示和类型检查。

npm install three 是安装实际的three.js库，它包含了three.js的核心代码和功能。
npm install --save-dev @types/three 安装类型声明文件，类型声明文件提供了关于 three.js 库的类型信息，可以帮助你在编码时获得自动完成和类型检查的功能。

记得在需要使用 Three.js 的组件中导入 Three.js 的模块，然后使用它来创建和操作 Three.js 的场景、渲染器等。

参考链接【vue3项目中使用three.js_vue3 three.js_犬莱八荒的博客-CSDN博客】 （这个链接中使用typeScript编写的，我用的javaScript，代码稍有改动，具体可以看项目中MyThree.vue或者本文档后面的代码清单）

了解：
TypeScript是一种开源的编程语言，它是JavaScript的一个超集，意味着任何有效的JavaScript代码也是有效的TypeScript代码。TypeScript添加了静态类型和一些其他特性，使得代码更易于理解、维护和调试。它可以被编译成纯JavaScript代码，并可以在任何支持JavaScript的运行环境中运行。它被用于开发大型复杂的应用程序，并且在许多流行的框架和库中得到了广泛的应用。
使用Three.js在Vue 3中并不一定要使用TypeScript代码。Vue 3仍然支持使用普通的JavaScript来编写代码。

运行项目，遇到报错:

这种问题是没有sass 和sass-loader，npm安装一下

npm install sass --save-dev

npm install sass-loader

了解：
sass模块是用于将Sass/SCSS文件编译为CSS文件的模块，它可以提供更强大和灵活的样式表编写能力。
sass-loader是一个Webpack加载器（loader），用于在Webpack构建过程中将Sass/SCSS文件编译为CSS文件。使其能够在网页中正确地显示和应用样式。

成功后的网页截图：

下图是在我配置成功之后package.json里的依赖，可作参考：

五、代码清单

1.【main.js】

/*
注意：
为了让代码的顺序不被打乱，先把下面这三句注释了，这里只是告诉自己这三句是Vue3里面的固定写法
import { createApp } from 'vue' //从vue中引入工厂函数createApp
import App from './App.vue' //引入当前目录下的App组件
createApp(App).mount('#app') //createApp，并且挂载到挂载点app上
*/

/* 下面代码展示引入Element-plus的完整main.js的代码，注意书写顺序，模板解析顺序和main.js中的代码顺序有关，
一旦有顺序不对，可能获取不到当前需要解析的部分，浏览器网页会空白
修改了main.js就记得重新启动项目，npm run serve 
*/ 
import { createApp } from 'vue'
import ElementPlus from 'element-plus' //引入element-plus库
// import 'element-plus/lib/theme-chalk/index.css' //引入我们需要的样式表 这个路径不对
import 'element-plus/theme-chalk/index.css' //引入我们需要的样式表
import App from './App.vue' //引入当前目录下的App组件
const app = createApp(App) //createApp
app.use(ElementPlus) //引用我们已经引入的ElementPlus
app.mount('#app') //挂载到挂载点#app上

2.【App.vue】

<template>
  <div>
    <!--3. 引用组件BarGraph-->
    <!-- <bar-graph :width="'900px'" :height="'600px'"></bar-graph>  -->
    <!-- 上下两个代码的作用相同，上面首字母小写的是kebab-case 的命名规范。下面首字母大写是PascalCase 的命名规范
    在 Vue.js 中，当使用自定义组件时，可以直接使用标签名或使用 PascalCase 命名规范(首字母大写)两种方式来引用组件。-->
    <BarGraph :width="'900px'" :height="'600px'"></BarGraph>
    <!-- BarGraph这个组件用来测试echarts库引入是否成功-->

    <!-- 使用element-plus组件，实现一个有样式的按钮 -->
    <el-button type="primary">有样式的按钮</el-button>
    <br><br>
    <!-- 普通按钮 -->
    <button>普通按钮</button>
    <MyThree></MyThree>
    
  </div>
</template>
<script>
// 1. 引入组件BarGraph,要是被使用的就会高亮
import BarGraph from './components/BarGraph.vue'
import MyThree from './components/MyThree.vue'
export default {
  name: 'App',
  //2. 注册组件BarGraph
  components: {
    BarGraph,
    MyThree
}
}
</script>

3.【components/BarGraph.vue】

<!-- BarGraph.vue这个组件用来测试echarts引入是否成功，正常使用需要写的的代码实例如下 -->
<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts" //引入echarts库
import {onMounted, onUnmounted} from "vue" //导入两个钩子函数
export default {
  name: "App",
  props: ["width", "height"], //props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  /** 理解：setup是Vue3.0中一个新的配置项，值为一个函数。
      setup是所有Composition API（组合API）“ 表演的舞台 ”，组件中所用到的：数据、方法等等，均要配置在setup中 */
  setup() {
    //定义一个myEcharts的局部变量，将其赋值为echarts，在组件中可以直接使用myEcharts变量来调用echarts库的方法
    let myEcharts = echarts; 
    // 在onMounted钩子函数中，当组件挂载到DOM树上时，调用initChart()函数，用于初始化图表
    onMounted(() => {
      initChart();
    });
    //在onUnmounted钩子函数中，当组件从DOM树中卸载时，调用了myEcharts.dispose方法，来销毁图表实例
    onUnmounted(() => {
      myEcharts.dispose;
    });
    //initChart方法，用于初始化图表
    function initChart() {
      // 用myEcharts.init()方法创建一个图表实例，获得id为myEcharts的DOM元素，"purple-passion"将主题颜色设置为紫色
      let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      // 设置图表的配置项
      chart.setOption({
        // 标题
        title: {
          text: "2021年各月份销售量（单位：件）",
          left: "center",
        },
        // X轴
        xAxis: {
          type: "category",
          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        tooltip: {
          trigger: "axis"
        },
        // Y轴
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [
              606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
            ],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
      // window.onresize 事件监听器，当浏览器窗口大小改变时，调用 chart.resize() 方法重新调整图表大小。
      window.onresize = function () {
        chart.resize();
      };
    }
    return {
      initChart
    };
  }
};
</script>

4.【components/MyThree.vue】

<!-- MyThree.vue这个组件用来测试three.js的正确使用，需要写的的代码实例如下 -->
<template>
    <div id="my-three"></div>
</template>

<script>
    import * as THREE from 'three'
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
    import { onMounted  } from 'vue'
export default{
    name:'MyThree',
    setup(){
        //创建一个三维场景
        const scene = new THREE.Scene();
        //创建一个物体（形状）
        const geometry = new THREE.BoxGeometry(100, 100, 100);//长宽高都是100的立方体
        // const geometry = new THREE.SphereGeometry(60,40,40);//半径是60的圆
        //widthSegments, heightSegments：水平方向和垂直方向上分段数。widthSegments最小值为3，默认值为8。heightSegments最小值为2，默认值为6。
        //创建材质（外观）
        const material = new THREE.MeshLambertMaterial({
            // color: 0x0000ff,//设置材质颜色(蓝色)
            color: 0x00ff00,//(绿色)
            transparent: true,//开启透明度
            opacity: 0.5 //设置透明度
        });
        //创建一个网格模型对象
        const mesh = new THREE.Mesh(geometry, material);//网络模型对象Mesh
        //把网格模型添加到三维场景
        scene.add(mesh);//网络模型添加到场景中
        // 添加多个模型（添加圆形）
        // const  geometry2 = new THREE.SphereGeometry(60, 40, 40);
        // const  material2 = new THREE.MeshLambertMaterial({
        //     color: 0xffff00
        // });
        // const mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
        // // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
        // mesh2.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
        // scene.add(mesh2);
        //添加光源 //会照亮场景里的全部物体（氛围灯），前提是物体是可以接受灯光的，这种灯是无方向的，即不会有阴影。
        const ambient = new THREE.AmbientLight(0xffffff, 0.4);
        const light = new THREE.PointLight(0xffffff, 1);//点光源，color:灯光颜色，intensity:光照强度
        scene.add(ambient);
        light.position.set(200,300,400);
        scene.add(light);
        //创建一个透视相机，窗口宽度，窗口高度
        const width = window.innerWidth, height = window.innerHeight;
        const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
        //设置相机位置
        camera.position.set(300,300,300);
        //设置相机方向
        camera.lookAt(0,0,0);
        //创建辅助坐标轴
        const axesHelper = new THREE.AxesHelper(200);//参数200标示坐标系大小，可以根据场景大小去设置
        scene.add(axesHelper);
        //创建一个WebGL渲染器
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(width,height)//设置渲染区尺寸
        renderer.render(scene,camera)//执行渲染操作、指定场景、相机作为参数
        const controls = new OrbitControls(camera, renderer.domElement)//创建控件对象
        controls.addEventListener('change',()=>{
            renderer.render(scene, camera)//监听鼠标，键盘事件
        })
        
        onMounted(()=>{
            document.getElementById('my-three')?.appendChild(renderer.domElement)
        })
    }
}
</script>
<style lang='scss'>
    body{
        margin: 0;
        padding: 0;
    }
</style>