一、首先去官网下载node.js,并安装

node.js下载地址:Download | Node.js

我在之前就安装过,选择的是Windows64 16.14.1版本,可结合自己的系统选择

下载完成后,默认进行安装即可,安装完node后,node中会自带npm,便于以后的安装下载

我们可以在cmd中查看node版本,输入node -v

 二、安装vue-cli脚手架

在cmd中输入命令:npm install -g @vue/cli@4.5.15(我这里安装的是这个版本,可以自行选择)

安装过程可能会有些慢,耐心等待一下~

测试是否安装成功,在cmd中输入命令:vue -V

安装成功!

三、在Idea中安装vue.js插件:File->Settings->Plugins

四、在Idea中创建vue项目 

 方法一(推荐):

1.创建一个文件夹,在文件夹中打开cmd,在cmd中输入命令:vue create springboot-vue demo,选择最后一项回车:

2.选择Router和Vuex,去掉Linter(因为它可能会产生很多小问题),选择和去掉都按空格键

3.选择Vue的版本,选择3.x

4.输入y:

5.选择In package.json回车

6.输入y:

7.创建成功!

8.按照提示,输入cd springboot-vue-demo进入文件夹,输入npm run serve运行项目,出现此界面

打开http://localhost:8080/

 9.Ctrl+C,输入y关闭项目,用Idea打开:

10.可以配置一下启动项:

然后就会发现启动项在左边啦:

11.然后选择Add Configuration,点击加号,选择npm:

 之后在Scrips中输入serve(别的名字也可),点击Apply,点击OK:

12. 点击绿色按钮,启动项目,点击http://localhost:8080/,看到和刚才一样的页面,说明启动成功:

 在package.json文件代码中加入空格--open,不用点击,直接运行就会打开页面

各个包的功能:

assets:里面存放的都是一些图片,或者css、js等一些静态资源

components:里面放一些组件(.vue格式),页面可以直接调用

router:写路由的地方,完成路径和页面的一个映射,通过路径就能访问这个页面,把页面搞进去通过路径访问

store:用来存储一些参数变量,一般用来设置vuex,实现组件之间的通信

views:存放一些视图页面

package.json:就是定义的一些依赖

App.vue:就是引用一些组件的

具体在写界面的时候,使用element组件更简单

安装element组件命令npm install element-plus --save

实现element-plus的引入:在main.js中添加以下内容:

Finish!!!!!!!!!!!!!!!!!

方法二:

1.打开Idea,选择JavaScript->Vue.js->Next

填写项目名称

创建成功!

 2.配置运行环境

3.按绿色按钮,启动项目

 点击http://localhost:8080/ ,项目启动成功!

 Finish!!!!!!!!!!!!!!!!!

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐