Idea创建vue项目

一、首先去官网下载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/ ，项目启动成功！

文章来源地址https://uudwc.com/A/jAbV8

 Finish！！！！！！！！！！！！！！！！！