vue的簡介及@vue/cli?腳手架的使用示例
1.vue簡介：
vue 是一個(gè) 漸進(jìn)式的 javascript 框架！
官網(wǎng)地址: Vue.js - 漸進(jìn)式 JavaScript 框架 | Vue.js
Vue是一個(gè)MVVM的框架 （MVVM：一種軟件架構(gòu)模式）
2.腳手架：腳手架是一個(gè)通用概念，幫助搭建項(xiàng)目的工具（以vue2為例）
什么是vue腳手架呢？
vue官方提供的一個(gè)全局命令工具，可以 快速創(chuàng)建一個(gè)vue項(xiàng)目 的基礎(chǔ)架子
vue腳手架的基本使用：
打開命令行、依次輸入
1. 全局安裝，輸入如下命令：（tip：要先提前安裝好node.js的包管理工具npm哦）
npm i @vue/cli -g 或 yarn global add @vue/cli
2. 查看vue版本：
vue --version 或 vue -V
3. 初始化一個(gè)vue項(xiàng)目，并選擇版本，小編選擇的是vue2版本：
vue create 項(xiàng)目名（不能用中文）
創(chuàng)建項(xiàng)目后會(huì)生成項(xiàng)目目錄結(jié)構(gòu)，腳手架項(xiàng)目里各個(gè)文件及代碼都有什么作用呢?
4.切換目錄進(jìn)入項(xiàng)目根目錄，并運(yùn)行項(xiàng)目。
cd 項(xiàng)目目錄 npm run serve //npm run的命令都在package.json
項(xiàng)目啟動(dòng)后就可以在瀏覽器輸入下面地址訪問項(xiàng)目了
如何覆蓋腳手架下的webpack配置：
1. 注意：我們?cè)陧?xiàng)目無法找到webpack.config.js文件，因?yàn)関ue把它隱藏 了 。
2. 如果需要覆蓋webpack的配置，可以修改vue.config.js文件，覆蓋webpack配置vue.config.js文件
如果端口號(hào)被占用無法訪問項(xiàng)目，可以在vue.config.js文件中修改端口號(hào)：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
//修改端口號(hào)
devServer: {
port: 4090
},
//關(guān)閉代碼檢查，初學(xué)者建議添加，vue語法較嚴(yán)格，不添加可能有不必要報(bào)錯(cuò)提示
lintOnSave: false
})到此這篇關(guān)于vue的簡介及@vue/cli 腳手架的使用的文章就介紹到這了,更多相關(guān)vue cli 腳手架使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
羊了個(gè)羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本
這篇文章主要為大家介紹了羊了個(gè)羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
如何寫好一個(gè)vue組件,老夫的一年經(jīng)驗(yàn)全在這了（推薦）
這篇文章主要介紹了如何寫好一個(gè)vue組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了基于iview的router常用控制方式,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家介紹了vue組件prop驗(yàn)證作用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)的方法示例
這篇文章主要介紹了如何在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)（附Demo）,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
vue多頁面項(xiàng)目中路由使用history模式的方法
這篇文章主要介紹了vue多頁面項(xiàng)目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue中el-tree樹全部展開或收起的實(shí)現(xiàn)示例
本文主要介紹了Vue中el-tree樹全部展開或收起的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
在現(xiàn)代Web開發(fā)中,Vue.js與Flask或Django配合使用,實(shí)現(xiàn)前后端分離,提高開發(fā)效率和應(yīng)用性能,本文介紹了整合Vue.js和Flask/Django的步驟,包括環(huán)境搭建、API編寫、項(xiàng)目配置,以及生產(chǎn)部署,此架構(gòu)不僅加快了開發(fā)進(jìn)程,還提高了項(xiàng)目的可維護(hù)性和可擴(kuò)展性2024-09-09
這篇文章主要介紹了vue關(guān)于Promise的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)吸壁懸浮球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04