使用vue-cli創(chuàng)建vue項目介紹
更新時間：2022年01月23日 10:13:00 作者：累成一條狗
這篇文章介紹了使用vue-cli創(chuàng)建vue項目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1、什么是vue-cli
是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將項目需要的環(huán)境、依賴等信息都配置好。
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
注：
若出現(xiàn)“Unexpected end of JSON input while parsing near”錯誤，
命令行輸入： npm cache clean --force
3、創(chuàng)建項目（命令行方式）
（1）創(chuàng)建一個文件保存的路徑。比如：E:\vue\vue-demo
【命令行進入該目錄】
cd E:\vue\vue-demo
【下載模板】
vue init webpack vue-demo
【進入交互頁面，根據(jù)自己情況選擇】
?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 作為代碼規(guī)范.
? Pick an ESLint preset Standard # 一樣的ESlint 相關(guān)
? 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 【啟動項目，根據(jù)package.json中的數(shù)據(jù)來啟動】 npm run serve 【關(guān)閉項目】 Ctrl + C 【瀏覽器訪問：】 http://localhost:8080/ 【項目打包上線】 npm run build 將打包后生成的dist 目錄中的文件拷貝到服務(wù)器的相應(yīng)地址即可（比如tomcat的webapps目錄下）。
注：
如果瀏覽器打開之后，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js的 post
4、創(chuàng)建項目（圖形界面方式）
若想使用vue的UI界面來創(chuàng)建項目，需將vue升級到 3.0以上的版本。
【下載vue最新版】 npm i -g @vue/cli 或者 cnpm install -g @vue/cli 【打開ui界面】 vue ui
點擊創(chuàng)建項目
填寫項目名（盡量小寫，大寫會自動轉(zhuǎn)為小寫），選擇npm或其他包管理器。
選擇默認即可。
等待創(chuàng)建項目。命令行會自動執(zhí)行創(chuàng)建操作。
創(chuàng)建完畢。
其余操作同上，此處不再重復(fù)。
項目文件結(jié)構(gòu)如下：
查看package.json，
可以使用npm run serve 來啟動項目、或npm run build 來打包項目。
運行起來后，
到此這篇關(guān)于使用vue-cli創(chuàng)建vue項目的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue-cli創(chuàng)建項目及項目結(jié)構(gòu)解析
- 使用vue-cli創(chuàng)建項目并webpack打包的操作方法
- 在vue-cli創(chuàng)建的項目中使用sass操作
- vue-cli創(chuàng)建的項目中的gitHooks原理解析
- 使用vue-cli創(chuàng)建項目的圖文教程(新手入門篇)
- vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法
- 解決vue-cli創(chuàng)建項目的loader問題
- 基于vue-cli創(chuàng)建的項目的目錄結(jié)構(gòu)及說明介紹
- Vue-cli創(chuàng)建項目從單頁面到多頁面的方法
- Vue使用vue-cli創(chuàng)建項目
相關(guān)文章
vue中計算屬性computed和普通屬性method的區(qū)別小結(jié)
Vue.js中Computed和Methods是兩種常用的數(shù)據(jù)處理方式,本文主要介紹了vue中計算屬性computed和普通屬性method的區(qū)別小結(jié),具有一定的參考價值,感興趣的可以了解一下2024-06-06
最近得到一個新需求，需要在Vue項目的移動端頁面上加上左右滑動效果，經(jīng)過一番折騰，最終決定四月vue-touch。下面小編把實現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2018-11-11
微信H5項目，ios端出現(xiàn)了軟鍵盤輸完隱藏后頁面不會回彈，下方會有一大塊留白。這篇文章主要介紹了決微信H5頁面軟鍵盤彈起后頁面下方留白的問題（iOS端） ,需要的朋友可以參考下2019-06-06
commit 和dispatch的區(qū)別在于commit是提交mutatious的同步操作,dispatch是分發(fā)actions的異步操作,本文重點給大家講解vuex中commit和dispatch的區(qū)別,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了mpvue+vant app搭建微信小程序的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
今天小編就為大家分享一篇對vux點擊事件的優(yōu)化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue3使用自定義指令實現(xiàn)el dialog拖拽功能示例詳解
這篇文章主要為大家介紹了vue3使用自定義指令實現(xiàn)el dialog拖拽功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了Vue3進階主題Composition API使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)堆疊柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09