zbb20190703 搭建vue工程並配置idea開發工具

須要先安裝好nodejs和npm

輸入下面的命令查看是否成功安裝

node -v
npm -v

 

1、開始

工做目錄：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

2、安裝

 

進入咱們的工做目錄：

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

3、初始化

 

進入項目目錄：

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