Vue入门 IDEA创建vue项目并安装UI框架ElementUI

时间:2024-03-27 12:57:08

window环境中IntelliJ IDEA创建vue项目

一、安装node.js
二、安装vue-cli脚手架
三、使用IntelliJ IDEA创建vue项目
四、运行vue项目
五、安装Element-ui

一、安装node.js

  1. node.js官网下载地址:https://nodejs.org/zh-cn/,一路next下来,安装完毕。
  2. 打开cmd(window环境下快捷键window+R),输入node -v
    Vue入门 IDEA创建vue项目并安装UI框架ElementUI上图就是node.js的版本信息
    3.由于node.js已经集成了npm(包管理器),所以npm也一起安装好了,输入npm -v
    Vue入门 IDEA创建vue项目并安装UI框架ElementUI上图就是npm的版本信息。

二、安装vue-cli脚手架

输入npm install vue-cli -g
Vue入门 IDEA创建vue项目并安装UI框架ElementUI我之前安装过,这边就不再安装了,输入vue -V
Vue入门 IDEA创建vue项目并安装UI框架ElementUI上图就是安装成功了。

三、使用IntelliJ IDEA创建vue项目

  1. 打开IntelliJ IDEA开发工具,找到要创建项目的目录,如下图:Vue入门 IDEA创建vue项目并安装UI框架ElementUI
  2. 输入vue init webpack [项目名称]Vue入门 IDEA创建vue项目并安装UI框架ElementUI

四、运行vue项目

1.进入到创建的vue项目下,如下图:Vue入门 IDEA创建vue项目并安装UI框架ElementUI2.运行vue项目Vue入门 IDEA创建vue项目并安装UI框架ElementUI3.效果如下图所示:
Vue入门 IDEA创建vue项目并安装UI框架ElementUI

五、安装Element-ui

1.跟vue搭配使用的最多的UI框架是ElementUI。Vue入门 IDEA创建vue项目并安装UI框架ElementUI2.在node-modules(或package.json)中可以看到ElementUI已经安装好了。Vue入门 IDEA创建vue项目并安装UI框架ElementUI3.使用ElementUI。
Vue入门 IDEA创建vue项目并安装UI框架ElementUI