vue.js 2.0 版本--idea搭建vue环境

最新推荐文章于 2025-06-08 10:30:00 发布

qq_30810825

最新推荐文章于 2025-06-08 10:30:00 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue.js idea搭建vue

本文链接：https://blog.youkuaiyun.com/qq_30810825/article/details/80554956

vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在IDEA中搭建Vue.js 2.0的开发环境，包括预先安装必要的工具，创建自己的项目目录，通过vue init webpack命令初始化项目，以及项目目录结构的详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.预先安装

安装node.js
安装vue

2.创建自己的目录

进入目录 cd /Users/join/project/vue/
创建vue项目 vue init webpack demo 经过一系列的提示，可以完成创建vue项目

3.配置idea

File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认
File - Settings - Plugins：搜索vue，安装Vue.js
Run - Edit Configurations...：点击加号，选择npm，Name为Dev，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。
继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。

4.目录结构介绍

├── build                       //webpack配置相关
├── config                       //webpack配置相关
├── src                          //源码文件夹
│    ├──components               // 组件文件夹
├── router                       // 路由配置文件夹
│   └── index.js                 // 路由配置文件
│    ├── App.vue                 // APP入口文件
│    ├── main.js                  // 项目配置文件
├── static                       // 子路由文件夹
├── package.json                //引入第三方库信息文件
├── index.html                 //进入首页
├── node_modules         //npm install安装的依赖代码
├── .editorconfig       //编辑器的配制
├── .eslintigore    //忽略语法检查的目录文件
├── .eslintrc.js     //elint的配制文件