搭建idea下的vue项目结构工程

需要先安装好nodejs和npm，输入下面的命令查看是否成功安装

node -v
npm -v

打开命令提示符  首先安装使用淘宝npm镜像：

淘宝 npm 地址： http://npm.taobao.org/

如何使用 有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：

1.临时使用

npm --registry https://registry.npm.taobao.org install express

2.持久使用

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功 
npm config get registry 或  npm info express

官网安装方法 

npm install -g cnpm --registry=https://registry.npm.taobao.org

测试：

cnpm-v

1.2安装vue-cli，vue脚手架

使用如下命令

安装vue-cli

cnpm i -g vue-cli

测试是否安装成功：

vue -V

                                                                                 进入工作目录

2.项目安装和创建

2.1安装项目

首先进入工作目录（如果不在工作目录），使用cd 命令

进入工作目录

使用脚手架安装项目：

控制台显示：

提示目录已存在，是否继续：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

初始化项目

cnpm i

然后npm install安装依赖然后打开项目

 

项目目录结构

运行项目

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安装完毕的效果