工具准备：IntelliJ IDEA开发工具 、node.js安装包
一、安装node.js
nodejs的下载路径：https://nodejs.org/en/download/
安装完成后打开命令行输入cmd 进入命令控制台
输入node -v 和npm -检查是否成功安装了node以及npm，当你安装了node之后，node文件中自带有包管理器npm。
检测是否安装成功
二、安装IntelliJ IDEA
安装IntelliJ IDEA相对简单，不做过多的赘述。
三、Ideal下Vue.js环境的搭建
①创建一个新的web项目
选择web项目
设置项目名以及路径
②在ideal配置Vue.js插件
点击 File->setting
点击Plugins 搜索Vue插件旁边可以选择install，等待ideal相应，他会自己去所带的插件库进行下载。
注意如果出现下载失败你可能需要自己去下载对应的插件。
首先 登入 http://plugins.jetbrains.com/ Ideal
的官方插件库可以搜索到Vue.js的插件
Vue.js插件列表插件的下载需要对应Ideal本身的版本这样插件才可以顺利安装和运行，我们可以查自身ideal的版本好号点击Help->About
就会出现安装在本机上Ideal的版本号
Ideal版本号这样可以根据版本号下载插件的压缩包，记住将下载的压缩包无解压的状态放入Ideal的文件夹下的plugins下面
C:\Software\IntelliJ IDEA\plugins 这个是我的本机的路径，压缩包放入就好。
之后进入Ideal进行手动配置插件压缩包
点击本地配置Plugin
选择Vue插件点击Ok
配置完成
③安装镜像npm
我们为环境搭建一个npm，我们选用淘宝的镜像npm。
在Ideal中按Alt+F12 进入Ideal的命令运行框
输入 npm i -g cnpm --registry=https://registry.npm.taobao.org
安装镜像成功图
③安装镜像Vue的脚手架
输入 cnpm i -g vue-cli
安装成功列表
四、Vue项目的安装和创建
输入 vue init webpack first_vue
控制输出，并且填写信息，输入yes方便日后测试
提示目录已存在
是否继续：Y Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：y
Set up unit tests（安装测试工具）：y
Setup e2e tests with Nightwatch（测试相关）：y
Should we run `npm install` for you after the project has been created? (recommended)：选择：y
出现Vue项目
五、Vue项目的运行
控制台输入
输入 cd Vue_test
进入创建项目
输入 cnpm run dev
运行成功结果
在浏览器地址输入
http://localhost:8081
Vue运行成功界面
六、Vue项目的其他配置
①添加File Types: HTML 添加 *.vue类型
File -> Settings -> Editor -> File Types -> HTML
效果图
②设置JS
File -> Settings -> Language & Frameworks -> JavaScript
效果图
③Intellij IDEA新建.vue格式文件（新建时可以直接建立.vue的文件）
File -> Settings -> Editor -> File and Code Templates -> +
效果图
④Intellij IDEA的Vue运行，以及输出
运行配置：
Run - Edit Configurations：点击加号选择npm，Name为Run，package.json选择你工程中的package.json
command:run
script:dev
输出配置：
Run - Edit Configurations：点击加号选择npm，Name为Build，package.json选择你工程中的package.json
command:run
script:build
结果图配置完成，可以开始开发
网友评论