node.js+vue+vscode
安装顺序
- 安装NodeJS
- 写一个server.js文件并运行:node server.js(类似HelloWorld)
- 安装vue,控制台:npm install vue
- 安装vite,控制台:npm install vite
- 用vue_cli创建工程:vue create helloworld
- 运行这个Web工程:npm run dev
- 安装VScode
- 创建工程yarn create @vitejs/app my-vue-app --template vue,在VSCode里打开运行
- 调用在线的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
一个简陋直方图完成