vue的安装及element组件的安装方法

下面是“vue的安装及element组件的安装方法”的完整攻略。

Vue的安装方法

1. 使用CDN加载Vue

在HTML文件中使用CDN方式加载Vue，只需要在中添加以下代码即可。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 通过NPM安装Vue

通过NPM安装Vue需要先安装Node.js和npm。安装完成后，使用以下命令进行全局安装Vue-cli工具。

npm install -g vue-cli

安装完成后，使用以下命令创建Vue项目。

vue create my-project

此时，会出现提示选择Vue的预设模板，在选择完毕后即可生成Vue项目。

Element组件的安装方法

1. 使用CDN加载Element

在HTML文件中使用CDN方式加载Element，只需要在中添加以下代码即可。

<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

2. 通过NPM安装Element

通过NPM安装Element需要先安装Node.js和npm。安装完成后，在Vue项目中使用以下命令进行Element的安装。

npm install element-ui -S

安装完成后，在main.js文件中引入Element和其样式文件。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

通过以上两种方法进行安装后，即可使用Element组件库提供的组件。下面是一个使用Element的示例：

<template>
  <el-button type="primary" @click="handleClick">点我</el-button>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$message('Hello World!');
      }
    }
  };
</script>

在这个示例中，我们使用了Element提供的按钮和消息提示组件，当点击按钮时会触发handleClick方法，弹出一个消息框。