ViewUI Vue環境初始化項目


全局安裝vue-cli

【全局安裝 webpack】
npm install webpack -g

【webpack 4.X 開始,需要安裝 webpack-cli 依賴】
npm install webpack webpack-cli -g
【全局安裝vue-cli】
npm install -g vue-cli
【查看版本號】 webpack -v 
【查看版本號】 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM