環境
win7
node-v8.12.0-win-x64.zip
做一個前端項目首先需要做技術選型，是使用Vue還是React，還是其他框架庫。選擇完了就要搭建基礎運行環境、工程項目。
這里我們選擇搭建一個Vue+iview框架的前端項目。iview:一套基於 Vue.js 的高質量 UI 組件庫，通過iveiw可以快速的開發出風格一致的前端界面。
一、基礎環境搭建
(一)搭建nodejs環境
Node.js是一個開源與跨平台的JavaScript運行時環境。
1、官網下載node.js（https://nodejs.org/zh-cn/） LTS（長期支持）版本
選擇阿里雲鏡像下載，比較快。
注意：v12.16.2以上版本不支持win7系統。
2、安裝並配置環境變量
(1)將node-v8.12.0-win-x64.zip解壓到目錄，我這里是：D:\node-v8.12.0-win-x64
(2)在系統屬性-高級系統設置-環境變量，配置path屬性值，添加:
;D:\node-v8.12.0-win-x64;
(3)控制驗證是否安裝成功
輸入node -v和npm -v查看版本
(二)安裝cnpm
由於npm有些資源被屏蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所以還需要安裝npm的國內淘寶鏡像cnpm。在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待安裝，安裝完成之后，我們就可以用cnpm代替npm來安裝依賴包了。
npm install -g cnpm --registry=http://registry.npm.taobao.org
管理npm鏡像源的兩種方式：
方式一：
#查看npm config配置 其中有鏡像源 >npm config list ; cli configs metrics-registry = "https://registry.npm.taobao.org/" scope = "" user-agent = "npm/6.9.0 node/v10.16.0 win32 x64" ; userconfig C:\Users\Administrator\.npmrc registry = "https://registry.npm.taobao.org/" ; node bin location = C:\Program Files\nodejs\node.exe ; cwd = E:\webapp\demo1\gulpdemo ; HOME = C:\Users\Administrator ; "npm config ls -l" to show all defaults. #修改鏡像源 npm config set registry https://registry.npm.taobao.org/
方式二：
#安裝nrm npm install -g nrm #列出所有的鏡像源清單 前面帶*表示當前使用的 >nrm ls * npm -------- https://registry.npmjs.org/ yarn ------- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpmjs.org/ taobao ----- https://registry.npm.taobao.org/ nj --------- https://registry.nodejitsu.com/ npmMirror -- https://skimdb.npmjs.com/registry/ edunpm ----- http://registry.enpmjs.org/ #修改鏡像源 nrm use taobao
(三)安裝vue-cli腳手架構建工具
#安裝vue-cli cnpm install -g vue-cli #測試是否安裝成功： vue -V
(四)Intellij IDEA設置
1、IDEA安裝Vue.js插件
File-->Settings-->Plugins-->搜索vue.js、NodeJS插件進行安裝。
2、File Types: HTML 添加 *.vue類型
3、設置JS
File -> Settings -> Language & Frameworks -> JavaScript
選擇 ECMAScript 6 和 Prefer Strict mode
4、添加.vue格式文件模板
File -> Settings -> Editor -> File and Code Templates -> +
<template>
<div> {{msg}}</div>
</template>
<style></style>
<script>
export default{ data () { return {msg: 'vue模板頁'} } }
</script>
通過以上步驟，我們的環境和工具都准備好了，接下來就開始使用vue-cli來構建項目。
二、搭建Vue項目
1、idea創建靜態WEB工程
Alt + F12打開Intellij IDEA的Terminal控制台，進行后續的操作：
2、使用Vue-cli初始化項目
項目操作流程圖：
2.1 初始化項目
在控制台所屬項目目錄下輸入vue init webpack demo，接下來會出現幾個提示，分別是輸入項目名稱、描述、作者等，按實際情況選擇即可：
Microsoft Windows [版本 6.1.7601] 版權所有 (c) 2009 Microsoft Corporation。保留所有權利。 E:\mall\demo>vue init webpack demo ？Project name ---- 項目名稱，init命令時也填了個project-name，如果無需更改，直接回車即可； ？Project description ---- 項目描述，按需填寫。無需填寫可以直接回車； ？Author ---- 作者 ？Vue build ---- 構建模式，一般默認第一個； ？Install vue-router? ---- 是否安裝vue-router。選Y。后邊構建項目會用到。 ？Use ESLint to lint yout code? ---- 格式校驗，按需； ？Set up unit tests ---- 測試相關，按需； ？Setup e2e tests with Nightwatch? ---- 測試相關，按需； ？Should we run ‘npm install’ for you after the project has been created? ---- 按需，這里我選Yes, use NPM。如果選No，后續自己在目標
生成項目目錄，注意在demo下面還有一個demo目錄
說明：
(1)demo為你前面新建的項目名
(2)webpack默認版本為2.0，若要指定1.0，需在webpack后加上#1.0，即vue init webpack#1.0 demo。
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。通過webpack可以把基於模塊開發的前端工程代碼打包成可以在瀏覽器使用的格式。
2.2、安裝項目依賴
cd到項目目錄中去，然后輸入cnpm install安裝。
E:\mall\demo>cd demo E:\mall\demo\demo>cnpm install
2.3 編譯打包
E:\mall\demo\demo>cnpm run build
2.4 運行
(1)在控制台運行
E:\mall\demo\demo>cnpm run dev
執行安裝之后項目，可以直接運行。進入項目所在目錄，執行npm run dev，執行完看到以下提示：Your application is running here: http://localhost:8080，在瀏覽器打開http://localhost:8080，看到這個頁面，接下來就可以開始開發了
終止運行：
控制台按下Ctrl + c中斷，然后輸入Y退出
(2)也可以在IDEA中配置運行
這里需要注意一點：idea要打開下層的demo目錄，而不是上層demo project 否則無法添加npm啟動配置。
點擊edit configurations配置，添加一個npm
三、vue項目目錄結構
1、vue項目目錄結構
1)build文件夾，用來存放項目構建腳本
2)config中存放基本配置信息，最常用的就是端口轉發
3)node_modules存放的是項目的所有依賴，即npm install命令下載的文件
4)src存放項目的源碼
5)static用來存放靜態資源
6)index.html首頁，人口頁，也是整個項目唯一的html頁面
7)package.json中定義了項目的所有依賴，包括開發時依賴和發布時依賴
8)disk目錄是npm run build編譯打包后用於發布部署的文件目錄
2、src目錄結構
1)assets存放資產文件
2)components存放組件
3)router存放路由js文件，用於頁面的跳轉
4)App.vue是一個Vue組件，也是項目的第一個Vue組件
5)main.js相當於java中的main方法，是整個項目的入口js
3、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. //在main.js中導入Vue對象 import Vue from 'vue' //導入App.vue，並且命名為App import App from './App' //導入router，默認識別index.js,因此可以省略 import router from './router' Vue.config.productionTip = false new Vue({ //所有到導入成功后，創建Vue對象，設置被綁定的節點是‘#app’，‘#app’是index.html文件中的一個div el: '#app', //將router設置到vue對象中 router, //聲明一個組件App，App這個組件在一開始已經導入到項目中了，但是無法直接使用，必須聲明 components: { App }, //template中定義了頁面模板，即在App組件中的內容渲染到’#app’這個div中 template: '<App/>' })
(1)npm install常用參數
npm install moduleName (等價於 npm i moduleName,其中i是install簡寫)# 安裝模塊到項目目錄下 npm install -g moduleName （等價於npm i moduleName -g）# -g 的意思是將模塊安裝到全局，具體安裝到磁盤哪個位置，要看 npm config prefix 的位置。 npm install --save moduleName（等價於npm i moduleName -S，-S就是--save的簡寫）# --save 的意思是將模塊安裝到項目目錄下，並在package.json文件的dependencies節點寫入依賴。 npm install --save-dev moduleName （等價於npm i moduleName -D，-D就是--save-dev的簡寫）# --save-dev 的意思是將模塊安裝到項目目錄下，並在package.json文件的devDependencies節點寫入依賴。 eg： 安裝element-ui npm install element-ui -S 安裝axios npm install axios
(2)在main.js文件中 引入安裝的依賴
引入依賴： import axios from 'axios' import ElementUI from 'element-ui'
4、App.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>
1)App.vue是一個vue組件，包含三部分內容：頁面模板 <template/>、頁面腳本<script> 、頁面樣式<style>
2)頁面模板中定義了一個圖片，另一個是router-view,'router-view‘簡單理解為路由占位符
3)頁面腳本是用來實現數據初始化、事件處理等
5、src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })
路由文件，path路徑，對應的組件為HelloWorld，即在瀏覽器地址為/時，在router-view位置顯示HelloWorld組件.
參考：
nodejs官方教程
搭建前后端分離項目
IDEA部署Vue項目
Intellij IDEA搭建vue-cli項目
基於Idea從零搭建一個最簡單的vue項目
vue.js+iview+springboot搭建一個前后端分離登陸demo
方式二：