springboot-vue 分頁查詢小案例（idea初始化搭建vue環境）

需要先安裝好nodejs和npm

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

node -v
npm -v

一、開始

# 工作目錄：IdeaProjects
# 使用idea新建Static Web項目：vue-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 vue-demo
 
# 提示目錄已存在，是否繼續：Y
Project name（工程名）:justin-vue 回車
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 vue-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裏的文件則儘量使用相當路徑。

基於springboot-vue前後端完整分頁查詢源碼

https://github.com/hackerpangdaxing/springboot-vue