windows下使用IDEA建立VUE项目

1.环境搭建

1.1检测是否安装好nodejs和npm

检测命令

node -v

npm -v

若是没有安装须要先安装

nodejs的下载路径：https://nodejs.org/en/download/

在Windows上安装时务必选择所有组件，包括勾选Add to Path。

安装完成后，在Windows环境下，请打开命令提示符，

idea cmd窗口

而后输入node -v，若是安装正常，你应该看到  版本号 输出：

检查nodejs是否安装成功

npm是Node.js的包管理工具（package manager），Nodejs的安装程序默认安装npm，在命令提示符或者终端输入npm -v，能够看到相似如下的输出：

检查npm

在cmd中直接使用npm来安装的一些工具的话会比较慢，因此咱们使用淘宝的npm镜像： 

输入npm i -g cnpm --registry=https://registry.npm.taobao.org，便可安装npm镜像，之后再用到npm的地方直接用cnpm来代替就行了 ，若是权限不够，请使用管理员运行命令提示符

安装淘宝npm镜像

1.2安装vue-cli，vue脚手架

使用以下命令

cnpm i -g vue-cli

安装vue-cli

测试是否安装成功：

vue -V

检查vue是否安装成功

2.项目安装和建立

2.1安装项目

首先进入工做目录（若是不在工做目录），使用cd 命令

进入工做目录

使用脚手架安装项目：

vue init webpack first_vue 

控制台显示：

提示目录已存在，是否继续：Y

Project name（工程名）:回车

Project description（工程介绍）：回车

Author：做者名

Vue build（是否安装编译器）:回车

Install vue-router（是否安装Vue路由）：回车

Use ESLint to lint your code（是否使用ESLint检查代码，咱们使用idea便可）：n

Set up unit tests（安装测试工具）：n

Setup e2e tests with Nightwatch（测试相关）：n

Should we run `npm install` for you after the project has been created? (recommended)：选择：No, I will handle that myself

2.1初始化项目

进入项目目录

cd firstVue

初始化项目

cnpm i

项目目录结构

运行项目

cnpm run dev

浏览器打开：localhost:8080，便可打开vue项目

Ctrl+C退出运行

2.3 配置idea

File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认

File - Settings - Plugins：搜索vue，安装Vue.js

Run - Edit Configurations...：点击加号，选择npm，Name为Run，package.json选择你工程中的package.json，Command为run，Scripts为dev,而后就能够直接在idea中运行了

继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,而后就能够直接在idea中打包了。

2.4 安装使用stylus（是一种健壮的css）

cnpm install --save-dev stylus stylus-loader

stylus安装完毕的效果

做者：开始_终结_老是_没变改 连接：https://www.jianshu.com/p/be837ce202db 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。