搭建idea vue 的运行环境
####vue 环境 依赖于 nodejs
https://nodejs.org/zh-cn/
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMVCkgWr-1593368002991)(vue.assets/1593350917877.png)]](https://i-blog.csdnimg.cn/blog_migrate/9d5ea549eeb033bd9720d7809c2b9d3c.png)
推荐下载长期支持版
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dx0JH53y-1593368002995)(vue.assets/1593351756418.png)]](https://i-blog.csdnimg.cn/blog_migrate/6c02ffcd30cba835b80960599ff673d7.png)
这样表示安装完成
安装国内下载环境(方便下载快点)
npm install -g cnpm --registry=https://registry.npm.taobao.org然后是安装vue环境
cnpm install -g @vue/cli如果出现无法识别cnpm指令的错误的时候,可以将cnpm的目录添加到环境
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7FiTtBAc-1593368002999)(vue.assets/1593366291644.png)]](https://i-blog.csdnimg.cn/blog_migrate/af3e5b7813bde7c8e2ccacce9df092b6.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMaVNlti-1593368003002)(vue.assets/1593366350572.png)]](https://i-blog.csdnimg.cn/blog_migrate/bf0051d8f10a82fa153a626c64c0f53d.png)
开始下载vue-cli(cli3.0后可以通过图形化界面创建项目–新手强推)
下载成功后
vue ui![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e2iqeThc-1593368003004)(vue.assets/1593366459030.png)]](https://i-blog.csdnimg.cn/blog_migrate/66145de93becc38da2386e0e309c57e6.png)
进入ui界面
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CzqUhZaY-1593368003005)(vue.assets/1593366501539.png)]](https://i-blog.csdnimg.cn/blog_migrate/7bd352bdd22f6bd119a0e8b681d1ec7a.png)
通过create,指定 创建的目录,以及项目名,构建方式,还有依赖,然后开始生成项目
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7f9noAlA-1593368003007)(vue.assets/1593366568560.png)]](https://i-blog.csdnimg.cn/blog_migrate/9fc949e220f952e2c0d1acf9083c16ad.png)
####搭建idea的vue环境
setting->plugin
搜索vue.js
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8jOhY2Xi-1593368003009)(vue.assets/1593366653570.png)]](https://i-blog.csdnimg.cn/blog_migrate/7cf6c3ec8c043647b5da4ab6111597e1.png)
下载后,重启idea,然后随便创建一个vue文件,看idea能否识别
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9odTiTwt-1593368003012)(vue.assets/1593366700497.png)]](https://i-blog.csdnimg.cn/blog_migrate/7ea6538ca277743b39bad82e08b8dd00.png)
可以识别说明插件添加成功
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x6SlwtQO-1593368003014)(vue.assets/1593366918858.png)]](https://i-blog.csdnimg.cn/blog_migrate/3f38b0ba875193ef403fa3bed00dc2aa.png)
将生成的vue项目添加到idea项目中去
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sFpNB4je-1593368003018)(vue.assets/1593367749304.png)]](https://i-blog.csdnimg.cn/blog_migrate/68663952f80b167085fdd8e4ec15eddc.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZjV6RQcO-1593368003020)(vue.assets/1593367844263.png)]](https://i-blog.csdnimg.cn/blog_migrate/4354658c6801da159870108720cb7388.png)
可以看到它的目录结构已经加载进来了,通过Terminal进入命令行状态
npm run serve启动vue项目
就可以进入了
这样一个简单的vue-idea的手脚架就完成了
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
