vue-cli

vue-cli 是vue.js的标准工具
vue-cli 需要进行一个全局性的安装

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本

vue --version

升级

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

使用vue-cli

我们需要在终端中输入
格式：vue create 名称
名称不可以是中文。

vue create hello-world

在我们执行完这个代码后，我们可以看到以下文件夹

完整内容

在这个文件中，已经包含了webpack打包工具，我们在终端中运行命令。代码如下：

//这个是打包执行的代码
npm run build
//运行这个项目
npm run serve

在我们使用vue-cli工具来进行项目的开发，我们的开发页面，我们写在components文件夹中，在这个时候，我们需要下载一个插件vetur,在components文件夹中，我们创建以xxx.vue格式的文件，这个文件中，我们有三个部分，分别是template、script、style。

---

在template中，需要有个根标签<dviv>
在script中，我们需要导出一个对象，我们通常会有一个name: 姓名
xx.vue 其实就是一个组件，所以我们的data是一个方法放回一个对象

<script>
export default {
  name: "App",
};
</script>

在style中，是写样式的
最终我们中引入我们的组件

组件使用步骤

在`App.vue`文件中，用Es6 导入我们的组件 名称通常跟文件名相同
import Emement from './components/Emement.vue'

在components中注册组件 然后在页面中使用

---

main.js文件中，我们使用render渲染函数来渲染页面

//箭头函数
 render: h => h(App),
//普通函数
render:function (h) {
    return h(App)
  }

使用Element-ul组件库

使用需要下载 npm i element-ui -S,
我们下载完成后需要在main.js页面中引入

//引入element-ui 组件库
import ElementUI from 'element-ui';
//引入element-ui 的  css
import 'element-ui/lib/theme-chalk/index.css';
//因为是插件，需要引入
Vue.use(ElementUI);

完成以上步骤，就可以使用Element-ul组件库

ECharts 基于 JavaScript 的开源可视化图表库

在终端输入

npm install echarts --save

在script中引入

import * as echarts from 'echarts';

在生命周期函数mounted中放入一下实例代码

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });

官方网址