Idea下引入vue项目

原创已于 2023-09-19 18:54:15 修改 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-09-19 16:06:32 首次发布

作者在创建Vue项目时遇到node-sass@6.0.1版本安装失败的问题，升级到最新版9.0.0后项目启动成功，推测可能是版本兼容性问题。

参考下面文章，后续会继续补充更多的细节（如有）。

Idea创建vue项目_Z-LittleQ的博客-优快云博客

后续：

1、引入了一个项目里面用了node-sass@6.0.1版本，死活装不上，报错：

'rU' while trying to load binding.gyp

也搜不到答案。一气之下把依赖配置删掉，直接安装了个最新的node-sass版本（9.0.0），启动居然成功了。

难道就是版本的问题？

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

suamt

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

[项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）

Java 技术专栏，从入门到精通，熟悉企业级开发

07-14

2894

某天张三对小花说，我需要在一台新电脑上实现一个前端的漂亮页面：比如京东手机首页(m.jd.com)。小花这时吭哧吭哧的去新电脑上安装nodejs、npm，然后在本地使用npm构建vue3项目，在项目里下载安装element-plus、axios。下一步进入编码阶段，写好的文件最后打包dist文件，放在nginx里去运行。一套流程走下来，耗时耗力，此时我们应该使用更简单的方法来构建这种单页面的项目：单页面html直接引入Vue3。

SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用

热门推荐

猫的博客

05-30

12万+

正常情况我们是应该把前端页面放在前端服务器上面的。getALL里用axios发送了一个异步请求。如果单体工程的页面放置在resource下。然后是做的事情我们用箭头函数简化书写。或者是在前端使用功能然后进行操作。我们需要做的是补全js里面的内容。数据层开发的代码都已经书写完毕。及把数据返回到页面的指定部分。我们这边直接用tomcat了。用maven的clean功能。接下来书写发送异步请求的代码。这样我们前端访问后端就跑成功。接下来我们要书写的是功能。axios发送异步请求。我们每次都要这样测一下。

参与评论您还未登录，请先登录后发表或查看评论

vue初学--5在idea中导入vue项目

Yannis111的博客

04-12

1543

1.首先 2.然后选择导入的项目 3.然后一直next 4.然后finish

详解Vue安装与配置(2023)

m0_48170265的博客

03-09

1万+

详解Vue安装与配置(2023)

Vue：图形化界面创建Vue项目，并导入Idea运行

我与代码的故事

07-13

3486

一：前言网上太多的教程创建Vue项目都是用命令行，黑窗口和复杂配置对初学者和学习者太不友好了，而且也很少说如何在idea中运行Vue项目。因此，笔者将在此文引导大家用Vue ui指令来在图形化界面创建Vue项目，引入Element-ui插件，并在Idea中运行。操作环境：win10、idea2019.1.3、node版本：v12.18.1、npm版本：6.14.5、@vue/cli 4.4.6 二：操作 1.首先笔者默认大家搭建好Vue环境了，而且Vue-cli的版本是3.x或者以上了。（没有满足条件

IntelliJ IDEA安装vue插件，导入vue项目，启动vue项目，打包vue项目

公z号：职场爱学习

06-18

1万+

IntelliJ IDEA安装vue插件如果要做vue项目开发，需要安装对应的插件。如果不想安装插件，可以安装另外一个开发工具WebStorm，需要注册码破解。打开File -> Settings -> Plugins，输入vue，搜索。需要安装NodeJS和Vue.js。安装完成，重启IDEA即可。为了解决项目报错，需要设置编译环境为ES6。 IntelliJ IDEA导入vue项目打开File -> Open，选择vue项目的文件夹，等待一会，等项目初始化完成，启动项目即

idea如何导入vue+springboot的项目

qq_59227359的博客

03-20

6362

下面两个勾选override之后才能更改路径，这里默认你setting.xml文件以及修改完毕，具体修改可以照着网上的方式修改，把里面的jdk都换成你自己的版本。打开你的终端，输入npm -v,看看你的npm配置好了没，在输入node -v，看你的node下好了没。选择你自己jdk的路径，然后点ok即可，添加完就可以右键运行你的springboot项目。首先在你的idea中点击File>Open,选择你项目的路径，打开你的项目。然后如果你的项目右上角是这样的，你就可以运行你的后端springboot了。

精选资源

idea创建vue项目，引用elementUI教程附件

10-17

idea创建vue项目，引用elementUI并从springboot项目获取数据教程附件

解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

10-16

通常，Vue CLI项目会在根目录下的`vue.config.js`文件中定义Webpack配置。 6. 点击`Apply`，然后`OK`保存设置。完成上述步骤后，IDE应该能够识别Webpack别名，并在代码提示和跳转等智能功能中正常使用。如果问题...

IDEA配置VUE项目导入调试大全-Maven、nodejs、JDK、项目导入、问题解决

洋葱专栏-有灵魂的程序员

02-01

798

maven 环境变量的配置 https://blog.csdn.net/love_caicai/article/details/82228985 使用IntelliJ IDEA 配置JDK（入门） https://blog.csdn.net/nobb111/article/details/77116259 最简单的在IntelliJ IDEA导入一个本地项目教程 https://blog.csdn.net/luo609630199/article/details/82706322 ...

idea中导入vue项目并运行

好幸运

03-06

1万+

一、idea打开vue项目卡死问题解决 file -> settings -> File Types -> ActionScript -> *.as -> 给下面添加node_modules; 然后 apply -> ok 二、nodejs安装 idea中导入vue项目并运行 1. 下载node.js 在搭建vue的开发环境之前，先下载node.js，下载地址：https://nodejs.org/en/https://blog.csdn.ne...

idea 导入vue项目并运行

weixin_43525284的博客

08-22

1403

idea运行vue项目记录过程

IDEA 引入VUE项目

weixin_30647065的博客

08-13

943

参考：https://www.cnblogs.com/sunhaoyu/articles/11002394.html https://www.csdn.net/gather_24/OtTacgysNTEwLWJsb2cO0O0O.html https://www.cnblogs.com/ya-qiang/p/9639187.html 1. 环境准备 1.1 电脑上安装node....

Vue项目工程的介绍及使用IDEA启动Vue工程

LxyingINGing的博客

10-22

800

vue项目里的一些配置,可以配置端口、跨域等等。main.js:所有配置的入口,可以导入项目所需要的包,然后组合在一起。1.用IDEA打开vue框架，编写代码，点击open，导入项目即可。src.assets:可以放一些logo、图片、自定义样式啥的。public:放静态文件的地方,比如html、静态图标等等。src.router:定义路由,每个路由对应一个页面。App.vue:所有页面的入口。src.views:视图文件。2.Vue项目工程的介绍。src:项目的源码目录。

Windows系统中搭建python开发环境

ltsazx的博客

09-24

1779

Windows系统中搭建python开发环境编译型和解释型语言二级目录三级目录编译型和解释型语言计算机必须要把高级语言翻译成机器语言，计算机才能运行高级语言所编写的程序。根据翻译的时间不同，翻译的方式分为两种：编译: 执行前一次性翻译。解释：边执行边翻译。二级目录三级目录 ...

通过idea导入vue脚手架项目并创建快捷打包和快捷运行

lixu_boke的博客

07-24

2075

第一步没有idea的需要下载idea https://www.jetbrains.com/zh-cn/idea/download/?utm_expid=.RdPW--XiRkKf4C3iyfxVwg.0&utm_referrer=https%3A%2F%2Fwww.jetbrains.com%2Fzh-cn%2Fidea%2Fpromo%2F%3Futm_source%3Dbaidu%26utm_medium%3Dcpc%26utm_campaign%3Dcn-bai-br-intellij-ex

Idea导入vue项目noude_modeles被忽略文件的恢复

Emma_马凯琴

01-13

6273

导入vue-cli项目中noude_modeles中由于文件过多一需要扫描很久，所以选择忽略这些文件直接导入项目，这样会省时间。但是由于noude_modeles文件没有扫描导入变为黄色变为，git提交时会忽略这些文件，提示语句中相关模块也无提示语。网上搜索过很多方法都没解决。以下为1我解决方案及相关细节： 1，单击鼠标右键，出现如图open module settings。 2、点进

idea 导入 Vue 项目并运行（超级详细步骤）

weixin_43920778的博客

03-25

7322

idea 导入 Vue 项目并运行（超级详细步骤）导入 Vue 项目开始导入选择项目选择项目类型运行前的准备File -> Settings 中设置JS 版本Vue.js 的插件开始运行运行过程查看结果导入 Vue 项目开始导入选择项目选择之后，直接点击 ok 即可。选择项目类型完成，点击 Finish。运行前的准备 File -> Settings 中设置JS 版本 Vue.js 的插件在 Plugins 中搜一下 vue，安装次数最多的那个进行安装就 ok 了。我这

IDEA 导入Vue项目没有目录结构的问题

heng_dmzg的博客

01-03

1058

解决。

idea引入项目配置开发环境运行vue项目

最新发布

08-27

在 IntelliJ IDEA 中导入并配置 Vue 项目的开发环境，可以按照以下步骤进行操作： ### ### 安装必要的插件为了更好地支持 Vue 项目的开发，首先需要在 IntelliJ IDEA 中安装 Vue.js 插件。可以通过以下步骤完成插件的安装： 1. 点击菜单栏中的 `File`。 2. 选择 `Settings`（或者使用快捷键 `Ctrl+Alt+S`）。 3. 在打开的窗口中选择 `Plugins`。 4. 在搜索框中输入 `Vue`，找到 Vue.js 插件后点击安装。 5. 安装完成后重启 IntelliJ IDEA 以使插件生效[^3]。 ### ### 导入现有 Vue 项目如果你已经有一个 Vue 项目，可以通过以下步骤将其导入到 IntelliJ IDEA 中： 1. 打开 IntelliJ IDEA，点击 `File` 菜单。 2. 选择 `New` -> `Project from Existing Sources...`。 3. 在弹出的对话框中，浏览并选择你的 Vue 项目所在的目录。 4. 点击 `OK` 后，IDEA 会自动检测项目类型，并引导你完成后续的配置步骤。 5. 在配置过程中，确保选择正确的 JavaScript 版本以及 HTML 格式设置，以便获得更好的开发体验[^1]。 ### ### 配置运行和打包命令对于 Vue 项目，通常会使用 npm 或 yarn 来管理项目的依赖和脚本。因此，在 IntelliJ IDEA 中也需要进行相应的配置： 1. 打开 `Run` -> `Edit Configurations...`。 2. 点击左上角的 `+` 按钮，选择 `npm`。 3. 在新创建的配置中，设置 `Command` 为 `run`，并在 `Scripts` 中选择你想要运行的脚本名称，例如 `serve` 或 `build`。 4. 点击 `Apply` 和 `OK` 保存配置。 5. 使用这些配置，你可以轻松地启动开发服务器或构建生产版本[^4]。 ### ### 示例代码以下是一个简单的 Vue 项目结构示例，展示了如何组织文件和目录： ``` my-vue-project/ ├── public/ │ └── index.html ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── package.json └── README.md ``` ### ### 项目发布当项目开发完成并准备好部署时，可以通过运行构建命令来生成生产环境所需的文件。通常情况下，这可以通过执行 `npm run build` 或 `yarn build` 来完成。构建完成后，会在项目根目录下生成一个 `dist` 文件夹，该文件夹包含了所有用于部署的静态资源。将此文件夹上传至服务器即可实现项目的发布[^2]。