【暑期实训】2021-6-30 前端环境搭建遇到的几个问题&Vue配置文件详解

今日任务

前端环境搭建、配置

1、在Vue中引入D3

首先安装

npm install d3 --save-dev

安装完成，测试D3能否使用，我们渲染一个Vue组件，它使用常规的D3 DOM操作呈现一个简单的折线图：

<script>
import * as d3 from 'd3';
const data = [99, 71, 78, 25, 36, 92];
export default {
  name: 'non-vue-line-chart',
  template: '<div></div>',
  mounted() {
    const svg = d3.select(this.$el)
      .append('svg')
      .attr('width', 500)
      .attr('height', 270)
      .append('g')
      .attr('transform', 'translate(0, 10)');
    const x = d3.scaleLinear().range([0, 430]);
    const y = d3.scaleLinear().range([210, 0]);
    d3.axisLeft().scale(x);
    d3.axisTop().scale(y);
    x.domain(d3.extent(data, (d, i) => i));
    y.domain([0, d3.max(data, d => d)]);
    const createPath = d3.line()
      .x((d, i) => x(i))
      .y(d => y(d));
    svg.append('path').attr('d', createPath(data));
  },
};
</script>
<style lang="sass">
svg
  margin: 25px;
  path
    fill: none
    stroke: #76BF8A
    stroke-width: 3px
</style>

我们不能使用scopedCSS 的属性，因为D3会动态地向DOM添加元素。

问题一：TypeError: this.getOptions is not a function

安装了sass模块之后报错TypeError: this.getOptions is not a function

版本原因，我安装的sass-loader版本太高，卸载安装低版本即可。

问题二：Node Sass version 6.0.0 is incompatible with^4.0.0

node-sass6.0.0版本与^4.0.0不兼容

1、先卸载之前版本的node-sass

npm uninstall node-sass

2、卸载后安装4.0.0版本

npm install node-sass@4.14.1

问题三：使用node下载依赖包失败:处理Refusing to delete/File exists

使用npm install npm -g更新npm
如果不行cnpm install -g npm@6.8.0升级到指定版本 如果版本不行换低一点的版本尝试
升级到最新cnpm install -g npm@lates

2、Vue3配置详解

vue cli3 项目配置