需要先安装好nodejs和npm
输入下面的命令查看是否成功安装
node -vnpm -v
一、开始
工作目录：IdeaProjects
使用idea新建Static Web项目：demo在demo目录下新建node_modules文件夹
因为后面node_modules中的内容太多，并且我们不会用到，所以在idea中右键该文件夹，选择Mark Directory as - Excluded打开命令提示符
首先安装使用淘宝npm镜像：npm i -g cnpm --registry=https://registry.npm.taobao.org
如果权限不够，请使用管理员运行命令提示符
安装vue-cli，vue脚手架：
cnpm i -g vue-cli
测试是否安装成功：
vue -V
二、安装
进入我们的工作目录：
cd ~/IdeaProjects/
使用脚手架安装项目：
vue init webpack demo
提示目录已存在，是否继续：YProject name（工程名）:回车Project description（工程介绍）：回车Author：作者名Vue build（是否安装编译器）:回车Install vue-router（是否安装Vue路由）：回车Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：nSet up unit tests（安装测试工具）：nSetup 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
三、初始化
进入项目目录：
cd demo
初始化项目：
cnpm i
运行项目：
cnpm run dev
浏览器打开：localhost:8080，即可看到vue项目
Ctrl+C退出运行
安装项目依赖,分别是scss支持，ajax工具，element ui，两个兼容包
cnpm i node-sass -D
cnpm i sass-loader -D cnpm i axios -D cnpm i element-ui -D cnpm i babel-polyfill -D cnpm i es6-promise -D
配置idea
File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认
File - Settings - Plugins：搜索vue，安装Vue.jsRun - Edit Configurations...：点击加号，选择npm，Name为Dev，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。
修改项目配置
修改/config/index.js文件，找到
port: 8080修改为port: 8070
productionSourceMap: true修改为productionSourceMap: false
修改/build/webpack.base.conf.js文件，找到
module.exports = { entry: { app: './src/main.js' },修改为module.exports = { entry: { app: ['babel-polyfill', './src/main.js'] },
最后在src/main.js中加入
import 'es6-promise/auto' import promise from 'es6-promise'import Api from './api/index.js'import Utils from './utils/index.js'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.prototype.$utils = Utils;Vue.prototype.$api = Api;Vue.use(ElementUI);
这样，一个差不多完整的vue项目就ok啦，并且可以在idea中编辑和运行。
注：使用static里的文件尽量使用绝对路径，如/static/image/background.png
使用src里的文件则尽量使用相当路径。
附（我的vue项目结构）：
src文件夹
├── App.vue // APP入口文件├── api // 接口调用工具文件夹│ └── index.js // 接口调用工具├── components // 组件文件夹├── frame // 子路由文件夹├── main.js // 项目配置文件├── page // 页面组件文件夹├── router // 路由配置文件夹│ └── index.js // 路由配置文件├── style // scss 样式存放目录│ ├── base // 基础样式存放目录│ │ ├── _base.scss // 基础样式文件│ │ ├── _color.scss // 项目颜色配置变量文件│ │ ├── _mixin.scss // scss 混入文件│ │ └── _reset.scss // 浏览器初始化文件│ ├── scss // 页面样式文件夹│ └── style.scss // 主样式文件└── utils // 常用工具文件夹 └── index.js // 常用工具文件
static文件夹
├── css // css文件夹├── js // js文件夹├── image // 图片文件夹└── font // 字体文件夹
scss引入方法，例
参考：