全域性安裝vue-cli

【全域性安裝 webpack】
npm install webpack -g

【webpack 4.X 開始，需要安裝 webpack-cli 依賴】
npm install webpack webpack-cli -g

【檢視版本號】
webpack -v

【全域性安裝vue-cli】
npm install -g vue-cli

【檢視版本號】
vue -V 

注：
　　若出現“Unexpected end of JSON input while parsing near”錯誤，
　　命令列輸入： npm cache clean --force
 

3、建立專案（命令列方式）

（1）建立一個檔案儲存的路徑。比如：E:\vue\vue-demo

【命令列進入該目錄】
cd E:\vue\vue-demo

【下載模板】
vue init webpack vue-demo

【進入互動頁面，根據自己情況選擇】
?Project name vue-demo # 專案名稱，直接回車，按照括號中預設名字（注意這裡的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters）。
? Project description A Vue.js project # 專案描述,隨便寫
? Author # 作者名稱
? Vue build standalone # 我選擇的執行加編譯時
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作為程式碼規範.
? Pick an ESLint preset Standard # 一樣的ESlint 相關
? Set up unit tests Yes # 是否安裝單元測試
? Pick a test runner 按需選擇 # 測試模組
? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測試
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我選的NPM
 

（2）安裝成功後，進入專案目錄

【命令列進入該目錄】
cd E:\vue\vue-demo

【初始化專案】
 npm install
 
 【啟動專案，根據package.json中的資料來啟動】
 npm run serve
 
 【關閉專案】
 Ctrl + C
 
 【瀏覽器訪問：】
http://localhost:8080/

【專案打包上線】
npm run build
將打包後生成的dist 目錄中的檔案拷貝到伺服器的相應地址即可（比如tomcat的webapps目錄下）。

注：
　　如果瀏覽器開啟之後，沒有加載出頁面，有可能是本地的 8080 埠被佔用，需要修改一下配置檔案 config裡的index.js的 post

4、建立專案（圖形介面方式）

　　若想使用vue的UI介面來建立專案，需將vue升級到 3.0以上的版本。

【下載vue最新版】
npm i -g @vue/cli        或者   cnpm install -g @vue/cli

【開啟ui介面】
vue ui

點選建立專案

填寫專案名（儘量小寫，大寫會自動轉為小寫），選擇npm或其他包管理器。

選擇預設即可。

等待建立專案。命令列會自動執行建立操作。

建立完畢。

其餘操作同上，此處不再重複。

專案檔案結構如下：

檢視package.json，
可以使用npm run serve 來啟動專案、或npm run build 來打包專案。

執行起來後，

來源：https://www.cnblogs.com/l-y-h/p/11241503.html

注：
　　若出現“Unexpected end of JSON input while parsing near”錯誤，
　　命令列輸入： npm cache clean --force