VUE.JS 框架配置详细版(IDEA)

已于 2022-06-26 17:23:16 修改
阅读量8k 收藏 76
点赞数 25
分类专栏： VUE VUE.JS IDEA 文章标签： vue.js 前端 IDEA intellij idea
于 2019-07-26 09:36:52 首次发布
杉 言 如需引用请标明出处
本文链接：https://blog.csdn.net/qq_35426391/article/details/97247494
版权
VUE 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
VUE.JS
1 篇文章 0 订阅
订阅专栏
IDEA
1 篇文章 0 订阅
订阅专栏

安装node.js
 1. 下载地址:node.js windows 64位
 2. 请下载对应的系统和对应的系统位数
 3. 软件下载成功后，打开安装界面，一直点击Next即可

检查安装是否成功
 1. 安装完成后，打开cmd命令，输入node -v与npm -v
 2. 显示版本号，说明已经安装成功了

安装脚手架(vue.js)
 1. 由于vue使用的是国外的脚手架导致下载速度很慢，所以将脚手架地址改为国内的脚手架，就可以让下载速度变快
 2. 一般国内使用的脚手架是阿里云镜像文件(https://registry.npm.taobao.org)
 3. 更改下载源为阿里镜像文件地址：npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli3安装
 脚手架安装完成后，我们要对vue.js配置
 在对vue.js配置前，需安装vue-cli3：cnpm install -g @vue/cli

在这里插入图片描述

  vue-cli3安装完成后，在cmd命令行中输入：vue ui
 在cmd窗口中会显示网址，复制到游览器中打开：http://localhost/8000

在这里插入图片描述

 运行之后会自动跳转至vue可视化视图窗口，我们选择(+ 创建 )来进行vue的配置

在这里插入图片描述

 6. 点击小红框里面的按钮,有一个新建文件夹，点击创建一个文件夹
 7. 关于路径是C:盘的问题，这里是因为node.js默认安装在C盘，那么在新建vue项目时，所以就会默认选择C盘
 8. 在后续进行新建vue项目时，可以指定C盘以外的其他盘来创建vue项目

在这里插入图片描述

 这里随意填写文件夹的名字，能记住那种(这里写的是VueDemo)

在这里插入图片描述

 创建完文件夹(VueDemo)后，就开始创建一个新的vue项目

在这里插入图片描述
在这里插入图片描述

项目文件夹：创建项目文件夹(vuedemo1)
 包管理器：默认
 更多选项：默认不勾选
    GIT：默认勾选，这里设为不勾选

在这里插入图片描述

 这里选择手动，手动配置项目

在这里插入图片描述

 功能界面需要勾选的有4个
 第一个：Babel JavaScript 编译器
 第二个：Router Vue的路由管理器
 第三个：Linter / Formatter
 第四个：使用配置文件


在这里插入图片描述

 只需要选择第二行改为第三个选项(ESLint + Standard config)
 其他默认即可

在这里插入图片描述

 最后保存为新预设时，将预设名改为默认配置
 在点击保存预设并创建项目

在这里插入图片描述

 新的vue项目已经创建成功，会自动跳转至管理页面

在这里插入图片描述

 关闭管理页面，打开IDEA，使用IDEA打开vue项目。

 打开IDEA，随意的打开一个项目，找到左上角的File展开，里面有一个Open，然后找到新增的vue项目的位置

在这里插入图片描述

 这里选择new window(新的窗口)

在这里插入图片描述

 这里特别注意几点：(只针对第一次引用vue项目的来做讲解)
  第一点：将src展开，点击App.vue,你会发现是灰色的，App.vue里面最上角有一条新增vue.js的消息，我们点击I开头的英文单词,就会自动的安装vuejs

在这里插入图片描述

在这里插入图片描述

  第二点：安装vuejs成功后，IDEA又会在右下角显示一条消息，点击带颜色的字，点击后IDEA就会自动的退出，IDEA会自动启动，启动后你会发现，灰色已经变成了有颜色了

在这里插入图片描述

这是由于我们是在cmd命令行中生成的vue.js项目，而在idea中我们没有安装vue.js这个插件，所以界面变成了灰色。

在这里插入图片描述

 接下来来创建一个vue的页面，这里使用的是Element组件，先将Element前端框架引入至IDEA

在这里插入图片描述

 点击IDEA左下角的Terminal 这是IDEA的命令窗口

在这里插入图片描述

 输入添加element的组件命令：npm install element-ui --save

在这里插入图片描述

 展开vue项目，找到package.json双击打开，找到红框的地方，就说明已经添加成功了

在这里插入图片描述

 之后会写几个vue项目几个常用的小功能,未完待续…

番外篇
 在cmd新增vue项目，经过前面的配置，已经预设好了一个默认配置，我们在新增时选择默认配置创建vue项目即可。

 创建vue的项目是的保存路径是C盘，如果想替换为其他盘，我们在cmd命令行中输入 (cmd中的命令行地址默认为：C盘) D：
在这里插入图片描述
 要具体到某个文件夹，加入cd vuedemo 回车即可（这里有一个小快捷方式，如打如文件夹名称前面vue，按下tab键会自动补全文件夹名称，然后回车进入你需要创建Vue项目的保存地址

在这里插入图片描述
 然后在输入vue create 项目名称，开始新建vue项目。

								vue create 项目名称(自取的项目名称)

 创建的GIF，过程有点长我就暂停了，里面包含了怎么新建，已经Open到IDEA中

在这里插入图片描述

  作者(我)也是学vue.js不久，如有某些地方没有讲清楚的没有讲明白的，请在下方留言。
  在看见之后就会进行一一回复，耐心的对问题进行解答，最后大家一起学习IDEA和vue.js

杉 言
关注
专栏目录
idea vuejs插件
05-27
idea vuejs插件
idea插件 vue.js IDEA2017.3亲测可装 无兼容问题
05-10
Vue.js 是一款流行的前端JavaScript框架，由尤雨溪开发，设计思想是使开发过程更加简单、易用。Vue.js 的核心特性包括数据绑定、组件化、指令系统和虚拟DOM，这些都极大地提高了开发效率和代码复用性。在IntelliJ ...
IntelliJ IDEA 设置 vue 支持
Maggieq8324的博客
09-04 4249
一、IntelliJ IDEA支持.vue文件 安装vue.js file --> settings --> plugins，输入vue，点击搜索结果里的vue.js右边的install按钮，安装成功后重启idea，这样idea就能识别.vue文件了 设置vue新建文件模板 file-->setting-->editor-->file and code Tem...
Vue3 搭建前端工程，并使用idea配置项目启动
2301_76144723的博客
08-08 1157
Vue3 搭建前端工程，并使用idea配置项目启动
IDEA中配置VUE
04-03 6710
文章目录一，Vue配置二，导入Vue项目 一，Vue配置 1、File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认 2、File - Settings - Plugins：搜索vue，安装Vue.js 3、Run - Edit Configurati...
IDEA中Vue开发环境搭建
yinshengchen的博客
04-18 7642
要解决 “npm ERR!missing script: build” 错误，我们需要在 package.json 文件中定义一个名为 “build” 的构建脚本。找到项目根目录中的package.json文件，这里列出了项目所依赖的所有资源与版本号，右键该文件，打开于终端，输入npm install 命令安装所有依赖；在上述代码中，我们添加了一个名为 “build” 的构建脚本，该脚本使用 webpack 进行生产模式构建。(3) 右侧“Scripts”处输入“dev”，其它idea已经默认选好。
VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用
weixin_34279579的博客
05-13 450
一、IDE的选择： 　　VsCode和WebStorm都是不错的选择，说一下两者的优缺点，调试便捷性来说两者不相上下. 　　WebStorm缺点：性能方面VsCode远好于WebStorm； 　　WebStorm优点：代码引用追踪Ws有VsCode无，控制台输出WS有着色能看出那块代码有问题，VsCode无着色控制台日志和bug查看不直观； 　　综合使用来说：推荐使用WebStorm，如果...
idea vue.js插件
12-05
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面，以其简洁、易学和高性能的特点深受开发者喜爱。IntelliJ IDEA，作为一款强大的Java开发集成环境，也提供了对Vue.js的支持，通过安装Vue.js插件，可以...
基于Vue.js框架的职工信息管理系统设计源码
最新发布
09-26
该项目是一款基于Vue.js框架开发的职工信息管理系统源码，总计包含64个文件，涉及17个JavaScript文件、15个PNG图片文件、9个Vue组件文件、6个XML配置文件、3个JSON数据文件、3个JPG图片文件、2个Markdown文件、1个...
一款基于springboot+vue.js框架开发而成的图书公司客户关系管理系统（crm），包括源码和数据库文件，可用于毕业设计
07-13
一款基于springboot+vue.js框架开发而成的图书公司客户关系管理系统（crm），包括源码和数据库文件 可用于毕业设计和课程设计 主要功能包括首页、客户管理、客户线索管理、积分管理、沟通记录管理、用户管理、角色...
IDEA使用vue的安装与配置（详细教程）
m0_53720901的博客
06-01 2万+
idea使用vue的小白详细教程！！！！
idea配置运行vue
Edward·Che的博客
03-15 425
一、问题描述 1、看着部门老大在用webstorm 2、我的webstorm一直是试用的 3、我想换个工具 二、解决问题 1、搜索安装vuejs插件：File-Settings-Plugins,安装后重启 2、添加配置文件种类：File-Editor-File Types，选中HTML，添加vue文件种类 3、JavaScript设置成6 经过以上步骤就设置完成啦！ ...
idea配置vue开发环境
drinkworld的博客
10-22 9457
1.下载node.js 下载地址：https://nodejs.org/zh-cn/ 2.安装nodejs 默认安装即可。 安装完毕后，测试安装是否成功。 3.修改镜像库位国内淘宝镜像 npm config set registry http://registry.npm.taobao.org 4.安装webpack npm install -g webpack 5.安装vue-cli npm install -g vue-cli 6.进入项目目录，安装依赖 npm install 7.idea配置
搭建vue项目(使用IDEA配置)
qq_43510031的博客
09-24 3698
1.在idea中创建一个web static项目 2.在idea中安装vue.js插件 这里我已经下载好了,下载好以后重启一下idea就可以了. 下面我们来搭建vue环境. 搭建vue环境 Node.js官网直通车 安装过程可以默认next进行到底. 用cmd(管理员身份)查看是否安装成功 npm是集成在node中的,所以输入npm -v会显示npm的版本 安装cpnm 在cmd(管理员身份)中输入 npm install -g cnpm --registry=http://registry.npm.
Vue：使用IDEA开发Vue的相关配置
Brave_heart4pzj的博客
01-01 1383
vue
IDEA部署Vue项目
热门推荐
sky_817的博客
04-10 2万+
一、在IDEA中配置vue插件 点击File-->Settings-->Plugins-->搜索vue.js插件进行安装，下面的图中我已经安装好了。 二、搭建node.js环境 安装node.js 可以去官网下载：安装过程就很简单，直接下一步就行 测试是否安装成功：要使用管理员方式打开命令行cmd 安装完成之后，打开命令行工具,输入node -v如果出现...
vue.js基础入门(IDEA)
weixin_60096751的博客
08-17 1607
vue.js学习
在IntelliJ IDEA中安装和配置Vue.js开发环境的步骤
这篇教程详细介绍了如何在IntelliJ IDEA中配置Vue.js的开发环境。 首先，关于IntelliJ IDEA的安装，作者建议使用2015版本，尽管其他版本也可能适用，但作者认为这个版本在运行Vue项目时更为稳定。安装过程简单，只...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值