笔记&实践 | vue在vscode中搭建测试全流程

安装顺序

1. 安装NodeJS
2. 写一个server.js文件并运行：node server.js（类似HelloWorld）
3. 安装vue，控制台：npm install vue
4. 安装vite，控制台：npm install vite
5. 用vue_cli创建工程：vue create helloworld
6. 运行这个Web工程：npm run dev
7. 安装VScode
8. 创建工程yarn create @vitejs/app my-vue-app --template vue，在VSCode里打开运行
9. 调用在线的JSON请求

node.js

node.js 下载安装

官网下载安装包
自行选择路径（记住这个路径，后面会考）
，安装完毕如下图：

打开cmd，输入：
node -v
npm -v

安装NodeJS（自带包管理器NPM），测试安装成功。

node.js 配置

打开安装路径，新建两个文件夹：
node_cache
node_global

cmd中操作如下切换路径：
npm root -g #查询路径
npm config set prefix “path”# 设置全局路径
npm config set cache “path”# 设置缓存路径

为了使用npm下载东西时速度快一些，可配置镜像：
cmd中输入
npm config set registry=http://registry.npm.taobao.org

查询下载地址：
npm config get registry

环境配置

设置环境变量的目的是在任何目录都可以执行node和vue命令

配置完毕

服务器测试

服务器测试代码运行server.js

编写程序测试

写一个server.js文件：

var http = require('http');
http.createServer(function (request,response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : 0K
// 内容类型: text/plain
response.writeHead(200,{'Content-Type':'text/plain'});
// 发送响应数据“He1lo World"
response.end('Hello World\n');
}).listen(8888);
// 终端打印如下信息
console.log('server running at http://127.0.0.1:8888/');

终端输入：
node server.js

浏览器打开相应地址：

vue

vue安装

cmd中输入npm info vue，出现下面error需要用管理员身份打开cmd：

正常显示：

输入以下命令安装：
npm install vue

安装vite：
npm install vite

安装脚手架：
npm install –g @vue/cli

创建vue项目

cd进入创建项目所在路径，输入：
vue create name
选择vue3或2回车

创建成功界面：

这里我的项目名称是first。运行项目先cd first，然后输入：
npm run serve
根据显示端口打开浏览器即可访问：

其它新建项目的方法：
npm init vite-app test

vscode

安装插件

在vscode创建项目

在vscode中打开文件夹，打开想创建项目的所在路径即可
打开终端输入“vue create xx”指令即可
如果报错没有权限，重启vscode，打开时用管理员身份打开
其它操作同创建vue项目

编写第一个工程：画直方图

总体流程：
在 src/components 目录下创建 BarChart.vue 组件，并在 App.vue 中加载该组件。

1. BarChart.vue

在src/components 目录下创建 BarChart.vue文件，并进行编写：

<template>
    <div class="bar-chart">
      <svg :width="width" :height="height">
        <rect
          v-for="(d, i) in data"
          :key="i"
          :x="i * (barWidth + barPadding)"
          :y="height - d"
          :width="barWidth"
          :height="d"
          fill="steelblue"
        />
      </svg>
    </div>
  </template>
  
  <script>
  export default {
    name: "BarChart",
    props: {
      data: {
        type: Array,
        required: true,
      },
      width: {
        type: Number,
        default: 400,
      },
      height: {
        type: Number,
        default: 300,
      },
      barWidth: {
        type: Number,
        default: 50,
      },
      barPadding: {
        type: Number,
        default: 10,
      },
    },
    mounted() {
      this.drawBarChart();
    },
    methods: {
      drawBarChart() {
        const svg = this.$el.querySelector("svg");
        const rect = svg.querySelector("rect");
  
        if (rect) {
          rect.remove();
        }
  
        svg.setAttribute("width", this.width);
        svg.setAttribute("height", this.height);
  
        svg.querySelectorAll("rect").forEach((el) => {
          el.remove();
        });
  
        for (let i = 0; i < this.data.length; i++) {
          const rect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "rect"
          );
          rect.setAttribute(
            "x",
            i * (this.barWidth + this.barPadding) + this.barPadding
          );
          rect.setAttribute("y", this.height - this.data[i]);
          rect.setAttribute("width", this.barWidth);
          rect.setAttribute("height", this.data[i]);
          rect.setAttribute("fill", "steelblue");
  
          svg.appendChild(rect);
        }
      },
    },
  };
  </script>
  

2. 修改App.vue

根据默认内容修改，主要是加载BarChart

<template>
  <div class="app">
    <h1>Vue Bar Chart Example</h1>
    <bar-chart :data="chartData" />
  </div>
</template>

<script>
import BarChart from "./components/BarChart.vue";

export default {
  name: 'App',
  components: {
    BarChart
  },
  data() {
    return {
      chartData: [25, 30, 49, 75, 30],
    };
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3. 运行

进入项目所在路径，运行：
npm run serve
一个简陋直方图完成