创建vue2项目

命令行创建VUE2项目

cmd窗口执行命令（推荐以管理员身份运行）

vue create demo1

选择vue2

 

创建成功

使用idea打开vue2项目

添加运行配置

右上角，点击Add Configuration

在弹窗中点+，选择npm

设置后点Apply和OK；

点右上角的运行按钮（小三角图标），即可成功运行。

 

 

查看package.json，里面有vue的版本号

{
  "name": "project1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

引入element-ui

在main.js中添加如下代码：

import ElementUI from 'element-ui';//zjh add
import 'element-ui/lib/theme-chalk/index.css';//zjh add
Vue.use(ElementUI);

添加后，idea会提示运行npm install命令，按提示点击，会自动安装element-ui

在默认的HelloWord组件中，添加几个element-ui的按钮，试一下是否可正常显示，以此来验证是否成功引入了element-ui

    <!--测试一下element-ui的按钮是否可正常显示-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>   

 

 

按钮正常显示，说明引入成功。

 

element-ui

https://element.eleme.cn/#/zh-CN/component/button