需要先安裝好nodejs和npm
輸入下面的命令查看是否成功安裝
node -v
npm -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
提示目錄已存在，是否繼續：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
三、初始化
進入項目目錄：
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.js
Run - 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引入方法，例
<style lang="scss"> @import "./style/style.scss"; </style>
參考：http://blog.csdn.net/FungLeo/article/details/77585205