vue的簡(jiǎn)介及@vue/cli?腳手架的使用示例

更新時(shí)間：2022年12月06日 10:29:42 作者：葒芢館7點(diǎn)7

vue 是一個(gè) 漸進(jìn)式的javascript框架，腳手架是一個(gè)通用概念，幫助搭建項(xiàng)目的工具，本文以vue2為例結(jié)合實(shí)例代碼給大家詳細(xì)講解，感興趣的朋友跟隨小編一起看看吧

1.vue簡(jiǎn)介：

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的簡(jiǎn)介及@vue/cli 腳手架的使用的文章就介紹到這了,更多相關(guān)vue cli 腳手架使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

基于vue實(shí)現(xiàn)分頁/翻頁組件paginator示例
本篇文章主要介紹了基于vue實(shí)現(xiàn)分頁/翻頁組件paginator示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解
這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
解決vue跨域axios異步通信問題
這篇文章主要介紹了解決vue跨域axios異步通信問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04
Vue Router路由守衛(wèi)超詳細(xì)介紹
路由守衛(wèi)，簡(jiǎn)單理解來說就是，當(dāng)用戶要進(jìn)行一些操作時(shí)，我需要用戶的一些信息或數(shù)據(jù)或行為，我判斷過后，才會(huì)同意用戶進(jìn)行操作，說到這里，我想大家心里都或多或少有點(diǎn)理解了吧
2023-01-01
詳解vue-cli項(xiàng)目在IE瀏覽器打開報(bào)錯(cuò)解決方法
這篇文章主要介紹了詳解vue-cli項(xiàng)目在IE瀏覽器打開報(bào)錯(cuò)解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
Vue.js中v-bind指令的用法介紹
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明
這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明，具有很好的參考價(jià)值，希望大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue3在history模式下如何通過vite打包部署白屏
這篇文章主要介紹了Vue3在history模式下如何通過vite打包部署白屏問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Element el-checkbox-group v-model不支持對(duì)象(object)解決方案
本文主要介紹了Element el-checkbox-group v-model不支持對(duì)象(object)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue2如何支持composition API示例詳解
這篇文章主要為大家介紹了Vue2如何支持composition API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01