ubutun创建vue项目

ubutun创建vue项目

目录

• 一、安装 yarn 包管理器
• 二、下载安装vue cli
• 三、创建vue.js项目
• 四、安装导入echarts和axios
• 五、编辑App.vue添加MyCharts组件
• 六、写出MyCharts数据可视化组件模板代码

一、安装 yarn 包管理器

nodejs 自带 npm 不太好用，建议安装 yarn 代替。
执行：

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

然后：

sudo apt update

sudo apt install yarn

二、下载安装vue cli

使用yarn命令安装vue cli

yarn global add @vue/cli 

安装完成后，可以在终端看到下面的输出：
输入下面的命令确认vue cli安装成功

yarn global list

vue –versio

三、创建vue.js项目

在当前目录创建vue.js初始项目（create后面有一个点）

vue create .

会看到下面的提示询问是否创建，输入Y然后使用Enter键确认

然后选择要创建vue项目的版本，我们使用方向键将光标移动到Default ([Vue 2] babel, eslint)，创建 Vue 2项目:

创建成功会有下面的样子

如果出现下图的git相关的Error信息，不用理会即可

使用npm命令启动项目:

npm run serve

四、安装导入echarts和axios

使用Yarn包管理器安装两个不同的 JavaScript 包。
1、 ECharts 是一个基于 JavaScript 的可视化图表库，用于创建交互式和动态的图表。在项目中添加 ECharts，以便在前端页面中使用其强大的图表功能。
2、 Axios 是一个用于在浏览器和 Node.js 环境中进行 HTTP 请求的 JavaScript 库。通过 Axios，可以方便地在前端或后端代码中进行数据请求和交互，例如从服务器获取数据或将数据发送到服务器。

yarn add echarts axios

安装成功，会有下面的结果

五、编辑App.vue添加MyCharts组件

编辑 src/App.vue 文件：

1、 修改template标签内的<div>里的内容，替换为 MyCharts 组件。

<template>
  <div id="app">
    <MyCharts/>
  </div>
</template>

2、 修改script标签内的 import 语句，改为导入 MyCharts.vue 组件。

<script>
import MyCharts from './components/MyCharts.vue'

export default {
  name: 'App',
  components: {
    MyCharts
  }
}
</script>

六、写出MyCharts数据可视化组件模板代码

创建 src/components/MyCharts.vue文件。
在MyCharts.vue文件里编写代码即可