vue腳手架3詳細配置，爆肝兩天，你可以不用，但是不能不會-有解無憂

vue腳手架3.X+

橋接工具安裝

安裝vue-cli 3.x+

創建專案

運行創建專案命令后彈出來的：

這里我選擇手動配置（Manually select features）

選擇你需要的配置項

專案啟動

vue-cli3與2版本區別

目錄結構：

自定義組態檔

有的同學可能記不住這么多步驟，可以先收藏，收藏等于學會，以后用到了省的百度了，哈哈！

文末跟博主交流哦，感謝支持！

vue腳手架3.X+

由于之前我們安裝了 2.x 版本的腳手架，現在我們需要安裝 3.x 版本的腳手架，因為 Vue-cli 3.x 和 vue-cli 2.x使用了相同的 vue 命令，所以 vue-cli 2.x 被覆寫了，如果你仍然需要使用舊版本的 vue init 功能，那么可以全域安裝一個橋接工具，

橋接工具安裝

# 使用 npm 安裝橋接工具

npm install -g @vue / cli-init

# 使用淘寶鏡像安裝橋接工具

cnpm install -g @vue / cli-init

npm 如果有問題的話可以使用 cnpm 進行安裝 , 二者選其一即可

如果沒有安裝舊版本的 vue-cli 2.x 可以跳過橋接直接安裝 vue-cli 3.x 及以上

安裝vue-cli 3.x+

# 使用 npm 安裝

npm install -g @vue / cli

# 使用 cnpm 安裝

npm install -g @vue / cli

3.x 及以上安裝都是使用上面的指令， npm 和 cnpm 選擇一個來安裝就好，測驗是否安裝成功，在命令視窗輸入vue -V 查看 vue 腳手架版本號就是安裝成功，如下圖所示：

創建專案

創建專案需要注意：專案名不能有中文，不支持駝峰 ( 含有大寫字母 )

#vue create 專案名

vue create vue-cli3

運行創建專案命令后彈出來的：

default 是使用默認配置，默認安裝及自動配置 babel ， eslint

如果選擇默認選項 default ，將會構建一個最基本的 vue 專案（沒有 vue-router 也沒有 vuex ）

注意：上面兩個 default 一個是 vue2 ，一個是 vue3 （我們現在學的是 vue2, 所以選擇 vue2 即可）

Manually select features 是自定義配置，需要我們手動配置，也可以自己選擇需要配置的

這里我選擇手動配置（Manually select features）

通過鍵盤上的 ↓ 方向鍵選中Manually select features并敲回車，會顯示如下配置項

通過↑ ↓ 箭頭選擇你要配置的項，按空格是選中，按 a 是全選，按 i 是反選

選擇你需要的配置項

這是我的配置項：

每個配置項的解釋：

( ) Choose Vue version // 選擇 vue 腳手架的版本

( ) Babel // 轉碼器，可以將 ES6 代碼轉為 ES5 代碼，從而在現有環境執行，

( ) TypeScript // TypeScript 是一個 JavaScript （后綴 .js ）的超集（后綴 .ts ）包含并擴展了

JavaScript 的語法，

需要被編譯輸出為 JavaScript 在瀏覽器運行

( ) Progressive Web App ( PWA ) Support // 漸進式 Web 應用程式

( ) Router // vue - router （ vue 路由）

( ) Vuex // vuex （ vue 的狀態管理模式）

( ) CSS Pre - processors // CSS 前處理器（如： less 、 sass ）

( ) Linter / Formatter // 代碼風格檢查和格式化（如： ESlint ）

( ) Unit Testing // 單元測驗（ unit tests ）

( ) E2E Testing // e2e （ end to end ）測驗

選好配置項之后按回車鍵

配置選中選了 choose Vue version ，會問你用哪個版本的腳手架，這里我選擇的是 2.x 的

選擇 css 前處理器

這里我選擇的是 Sass/Scss(with dart-sass)

node-sass 是自動編譯實時的， dart-sass 需要保存后才會生效， sass 官方目前主力推 dart-sass 最新的特性都會在這個上面先實作，而且Sass/Scss 性能會更好 , 會更快一些，

選擇如何存放位置

這里我選的是放在 package.json 里

是否保存當前配置

這里我選擇的是 N 不保存，如果鍵入 Y 需要輸入保存名字，如果保存的話下一次就不需要一步一步

地從頭開始配置，

靜待 Vue 安裝這些專案環境

專案啟動

1. cd 專案名進入到工程目錄

2. npm run serve 啟動專案

3. 打開瀏覽器輸入網址專案

成功啟動

vue-cli3與2版本區別

vue-cli3基于webpack4打造，vue-cli2是基于webpack3
vue-cli3的設計原則是"0配置"，移除了組態檔，build和confifig等
vue-cli3提供 vue ui 的命令，提供了可視化配置
移除了static檔案夾，新增了public檔案夾，并將index.html移入了public檔案夾
創建專案的命令 vue create 專案名

目錄結構：

public 類似 static檔案夾，里面的資源會原封不動的打包

src原始碼檔案夾

src # 主要用于寫原碼

. gitignore # 排除目錄【比如需要上傳到 githulb 】

. babel # 配置安裝包

package. json # 配置安裝包

package-lock # 鎖檔案【專案使用的版本】后期別人訪問的時候，直接加載鎖里面的版本資訊；

src 下的 main.js

這里創建的 vue 實體沒有 el 屬性，而是在實體后面添加了一個 $mount(’#app’) 方法，

$mount(’#app’) ：手動掛載到 id 為 app 的 dom 中的意思

當 Vue 實體沒有 el 屬性時，則該實體尚沒有掛載到某個 dom 中；假如需要延遲掛載，可以在之后手

動呼叫 vm.$mount() 方法來掛載

需要注意的是： 該方法是直接掛載到入口檔案 index.html 的 id=app 的 dom 元素上的

import Vue from 'vue' //匯入建構式
import App from './App.vue'//匯入根組件App.vue
//構建資訊是否顯示
Vue.config.productionTip = false
new Vue({
//這里的render: h=> h(App)是es6的寫法, render: h => h(App)可理解為是渲染App組件
render: h => h(App),
// render: h => h(App) 轉換過來就是：
// render:(function(h){
// return h(App);
// });
}).$mount('#app')

自定義組態檔

雖然專案創建完了，但無法滿足定制化的開發需求，因為有時我們希望專案一啟動就自動打開瀏覽器頁面，這個時候就需要手動創建一個組態檔，

在專案根目錄下新建一個 vue.config.js 組態檔，必須為 vue.config.js ， vue-cli3 會自動掃

描此檔案，在此檔案中修改組態檔，

//在module.exports中修改配置
module.exports = {
devServer: {
open: true, // 啟動服務后是否打開瀏覽器
}
}

當然你也可以配置埠號，打包的目錄等等

官方配置檔案： https://cli.vuejs.org/zh/confifig/

博主公_號：前端老實人，期待各位小伙伴加入我們一起學習的隊伍哦?

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/301081.html

標籤：其他

上一篇：像容嬤嬤一樣教你學規矩——敢了嗎

下一篇：開學了軟測的同學卷起來--selenium元素及元素組定位+下拉框+簡單的實戰