網站首頁 Vue 正文
1、什么是vue-cli
是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將項目需要的環境、依賴等信息都配置好。
2、全局安裝vue-cli
(1)檢查npm 版本,建議安裝到最新版本。
【命令行查看版本號】 node -v npm -v 【升級npm(可選操作)】 npm install -g npm 【修改為淘寶鏡像(可選操作)】 npm config set registry "https://registry.npm.taobao.org"
(2)安裝
【全局安裝 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
相關推薦
- 2022-02-15 在IDEA中配置SFTP遠程Linux服務器系統的實現_相關技巧
- 2022-12-15 C++?Boost?Lockfree超詳細講解使用方法_C 語言
- 2024-04-06 @Delete通過批量刪除的方法
- 2023-01-05 python使用jpype導入多個Jar的異常問題及解決_python
- 2022-03-26 Flutter構建自定義Widgets的全過程記錄_Android
- 2022-05-19 python中join與os.path.join()函數實例詳解_python
- 2022-06-18 C語言深入講解宏的定義與使用方法_C 語言
- 2022-04-11 Maven如果將本地jar包添加到pom中
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支