Vue + Spring Boot 项目实战（三）：使用IntelliJ IDEA快速生成 Vue.js 项目
文章目錄
- 一、使用idea Vue插件生成項目結構
- 1.1. Create New Project
- 1.2. 設置項目地址
- 1.3. 確認項目名稱
- 1.4. 項目描述
- 1.5. 作者信息
- 1.6. 編譯模板
- 1.7. 安裝路由
- 二、安裝node_modules模塊
- 三、啟動項目
- 四、Vue 項目結構分析
- 4.1. 概覽
- 4.2. index.html
- 4.3. App.vue
- 4.4. main.js
- 4.5. 項目源碼
一、使用idea Vue插件生成項目結構
這里注意 Project location 需要輸入到項目文件夾一級而不是 Workspace。輸入完成后點擊 Next，等待 Vue CLI 初始化，然后在可視化界面上確認項目信息，修改或 Next 即可。
1.1. Create New Project
對于習慣使用 IDE 的同學，可以使用更直觀的方式構建項目。以 IntelliJ IDEA 為例，點擊 Create New Project，然后選擇 Static Web -> Vue.js，點擊 next，輸入相關參數
1.2. 設置項目地址
1.3. 確認項目名稱
1.4. 項目描述
1.5. 作者信息
1.6. 編譯模板
1.7. 安裝路由
二、安裝node_modules模塊
IDEA 構建出的 Vue 項目是不含 node_modules 的，所以要先調出終端，執行 npm install，如果有可跳過。
三、啟動項目
執行命令：npm run dev
另外 IDE 嘛，總是在 UI 上下了很多功夫，我們還可以在 package.json 文件上點擊右鍵，選擇 show npm scripts
然后就會出來 npm 命令窗口，想要執行哪個命令直接雙擊運行就可以了。
這些命令都是在 package.json 文件里預定義的。dev 和 start 是一樣的，start 即是執行 npm run dev 命令
另外使用這種方法，可以激活 IDE 右上角的按鈕
上面的內容應該足夠詳細了，如果大家還是遇到了問題，可以在評論區反饋一下，我會第一時間解答。
四、Vue 項目結構分析
4.1. 概覽
使用 CLI 構建出來的 Vue 項目結構是這個樣子的
里面我們需要關注的內容如下圖，重點需要關注的我用小紅旗標了出來
其中我們最常修改的部分就是 components 文件夾了，幾乎所有需要手動編寫的代碼都在其中。
接下來我們分析幾個文件，目的是理解各個部分是怎么聯系到一起的。
4.2. index.html
首頁文件的初始代碼如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>my-vue-test</title></head><body><div id="app"></div><!-- built files will be auto injected --></body> </html>就是一個普普通通的 html 文件，讓它不平凡的是 <div id="app"></div> ，下面有一行注釋，構建的文件將會被自動注入，也就是說我們編寫的其它的內容都將在這個 div 中展示。
還有不普通的一點是，整個項目只有這一個 html 文件，所以這是一個 單頁面應用，當我們打開這個應用，表面上可以有很多頁面，實際上它們都只不過在一個 div 中。
4.3. App.vue
上面圖上我把這個文件稱為“根組件”，因為其它的組件又都包含在這個組件中。
.vue 文件是一種自定義文件類型，在結構上類似 html，一個 .vue 文件即是一個 vue 組件。先看它的初始代碼
<template><div id="app"><img src="./assets/logo.png"><router-view/></div> </template><script> export default {name: 'App' } </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>大家可能注意到了，這里也有一句 <div id="app">，但跟 index.html 里的那個是沒有關系的。這個 id=app 只是跟下面的 css 對應。
<script>標簽里的內容即該組件的腳本，也就是 js 代碼，export default 是 ES6 的語法，意思是將這個組件整體導出，之后就可以使用 import 導入組件了。大括號里的內容是這個組件的相關屬性。
這個文件最關鍵的一點其實是第四行， <router-view/>，是一個容器，名字叫“路由視圖”，意思是當前路由（ URL）指向的內容將顯示在這個容器中。也就是說，其它的組件即使擁有自己的路由（URL，需要在 router 文件夾的 index.js 文件里定義），也只不過表面上是一個單獨的頁面，實際上只是在根組件 App.vue 中。
4.4. main.js
前面我們說 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 沒有關系，那么這兩個文件是怎么建立聯系的呢？讓我們來看入口文件 main.js 的代碼
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',router,components: { App },template: '<App/>' })這里插一嘴，這個 js 文件有的同學可能看著不順眼，比如沒有分號（;），因為是 ES6 的語法，不這么寫反而會提示錯誤，雖說可以把 es-lint 改了或者關了，但我想熟悉一下新的規則也挺好。
最上面 import 了幾個模塊，其中 vue 模塊在 node_modules 中，App 即 App.vue 里定義的組件，router 即 router 文件夾里定義的路由。
Vue.config.productionTip = false ,作用是阻止vue 在啟動時生成生產提示。
在這個 js 文件中，我們創建了一個 Vue 對象（實例），el 屬性提供一個在頁面上已存在的 DOM 元素作為 Vue 對象的掛載目標，router 代表該對象包含 Vue Router，并使用項目中定義的路由。components 表示該對象包含的 Vue 組件，template 是用一個字符串模板作為 Vue 實例的標識使用，類似于定義一個 html 標簽。
看完了以上三個文件，我想基本上就對前端項目的結構有所了解了。下一篇中我將用一個例子解釋前后端分離的項目是如何聯系起來的。
4.5. 項目源碼
總結
以上是生活随笔為你收集整理的Vue + Spring Boot 项目实战（三）：使用IntelliJ IDEA快速生成 Vue.js 项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flowable 多实例动态添加人
- 下一篇： springboot整合activiti