基于ideal的Vue.js项目开发环境搭建

2018-07-10 本文已影响0人 MoustacheYJ

工具准备：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