vue-cli3腳手架的使用和相關(guān)配置

Sanchi 發(fā)布于2019-08-26 10:22 / 661人閱讀

摘要：前言通過(guò)搭建交互式的項(xiàng)目腳手架。通過(guò)快速開始零配置原型開發(fā)。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，無(wú)需。例如，如果你的應(yīng)用被部署在，則設(shè)置為。我們將在下篇文章里詳細(xì)講述的使用官方文檔

前言

通過(guò) @vue/cli 搭建交互式的項(xiàng)目腳手架。
通過(guò) @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。
一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-service)，該依賴：

可升級(jí)；
基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置；
可以通過(guò)項(xiàng)目?jī)?nèi)的配置文件進(jìn)行配置；
可以通過(guò)插件進(jìn)行擴(kuò)展。

一個(gè)豐富的官方插件集合，集成了前端生態(tài)中最好的工具。
一套完全圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面。
Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣你可以專注在撰寫應(yīng)用上，而不必花好幾天去糾結(jié)配置的問(wèn)題。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，無(wú)需 eject。

快速創(chuàng)建一個(gè)項(xiàng)目

安裝vue-cli3;

注意vue-cli3要求node版本8或者更高以上，（推薦8.10.0+）
安裝命令 npm install –g @vue/cli
或者 cnpm install –g @vue/cli 或者 yarn global add @vue/cli
檢測(cè)是否安裝成功

創(chuàng)建項(xiàng)目：

vue create hello-world

第一次創(chuàng)建的時(shí)候應(yīng)該之后后面兩個(gè)選項(xiàng)，defalut是默認(rèn)的，包含了babel和eslint; Manually select features是可以手動(dòng)選擇所需要的插件；而demo是作者之前配置過(guò)的，保留下來(lái)的配置；

按上下箭頭選擇配置，空格鍵選中,選擇完成后，回車鍵繼續(xù)，會(huì)依次問(wèn)詢你所選插件的配置，

vue-router選擇模式

所用的css預(yù)處理語(yǔ)言,我選擇了sass;

選擇的代碼風(fēng)格和格式校驗(yàn)

代碼校驗(yàn)方式，我選擇了保存即校驗(yàn)，也可以在add和commit的時(shí)候校驗(yàn)；

在哪里保存配置我這些插件的配置，我選擇了獨(dú)立文件

是否保存為保存為一個(gè)將來(lái)可復(fù)用的 preset；
選擇完畢之后開始安裝插件：

看一下安裝完成的項(xiàng)目目錄

安裝完成之后，cd hello-world,進(jìn)入文件夾，npm run serve啟動(dòng)項(xiàng)目；
你也可以使用圖形化界面
可以通過(guò) vue ui 命令以圖形化界面創(chuàng)建和管理項(xiàng)目：

不做重點(diǎn)講解；

vue.config.js

配置api的地址配置參考#
項(xiàng)目搭建完成，因?yàn)?vue-cli 3 的項(xiàng)目初始化，幫開發(fā)者已經(jīng)解決了 80% ，甚至絕大部分情形下的 webpack 配置。但開發(fā)過(guò)程中難免要遇到需要開發(fā)者自己配置的點(diǎn)東西，那我們要如何配置呢，這點(diǎn)就需要在項(xiàng)目根目錄下手動(dòng)新建一個(gè) vue.config.js，此處我提供的一個(gè)我們項(xiàng)目中的常用模版；針對(duì)以下選項(xiàng)做大概的講解；

const path = require("path")
const webpack = require("webpack")
module.exports = {
  // 修改output.path
  outputDir: "dist",
  // 修改output.publishPath
  baseUrl: "./",
  chainWebpack: config => {
    // 添加全局scss文件
    const types = ["vue-modules", "vue", "normal-modules", "normal"]
    types.forEach(type => {
      config.module.rule("scss").oneOf(type).use("style-resource")
        .loader("style-resources-loader")
        .options({
          patterns: [
            path.resolve(__dirname, "src/css/base.scss")
          ]
        })
    })
    // 移除 prefetch 插件 //預(yù)加載
    config.plugins.delete("prefetch")
    // 引入
    const chunkFolder = process.env.NODE_ENV !== "production" ? "debug" : "dist"
    config.plugin("dll-reference-plugin")
      .use(webpack.DllReferencePlugin)
      .tap(options => {
        options[0] = {
          context: __dirname,
          manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
        }
        return options
      })
    config.plugin("add-asset-html-webpack-plugin")
      .use("add-asset-html-webpack-plugin")
      .tap(options => {
        options[0] = {
          filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
        }
        return options
      })
  }
}

baseUrl：從 Vue CLI 3.3 起已棄用，請(qǐng)使用publicPath
publicPath

Type: string
Default: "/"
部署應(yīng)用包時(shí)的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到這個(gè)值，所以請(qǐng)始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。默認(rèn)情況下，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上，例如 http://shop.ktvsky.com/。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如，如果你的應(yīng)用被部署在 http://shop.ktvsky.com/vue/，則設(shè)置 publicPath 為 /vue/。
也可以使用相對(duì)路徑 "./",這樣這樣打出來(lái)的包可以被部署在任意路徑
相對(duì)路徑的打包后的

絕對(duì)路徑

outputDir

Type: string 
Default: "dist"
當(dāng)運(yùn)行 vue-cli-service build 時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄。注意目標(biāo)目錄在構(gòu)建之前會(huì)被清除 (構(gòu)建時(shí)傳入 --no-clean 可關(guān)閉該行為)。

chainWebpack
我們將在下篇文章里詳細(xì)講述 chainWebpack的使用https://segmentfault.com/a/11...；
官方文檔 https://cli.vuejs.org/zh/guid...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106078.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Sanchi

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow版本查詢

閱讀 2171·2023-04-25 20:45
主機(jī)的域名是什么意思-主機(jī)域名是哪個(gè)？

閱讀 1085·2021-09-22 15:13
GreenCloudVPS：$20/年/1GB內(nèi)存/30GB NVMe空間/1TB流量/10Gbps

閱讀 3652·2021-09-04 16:48
移動(dòng) web 端屏幕適配 - rem

閱讀 2588·2019-08-30 15:53
第十集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)( 計(jì)數(shù)器組件 )

閱讀 939·2019-08-30 15:44
微信小程序，圖片加載完畢后顯示，基于富文本解析插件wxParse

閱讀 956·2019-08-30 15:43
JavaScript fetch接口

閱讀 1013·2019-08-29 16:33
如何只用 CSS 完成漂亮的加載

閱讀 3442·2019-08-29 13:08

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue-cli3腳手架的使用和相關(guān)配置

相關(guān)文章