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

資訊專欄INFORMATION COLUMN

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

jsummer / 3302人閱讀

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

前言

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

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

一個豐富的官方插件集合，集成了前端生態(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é)配置的問題。與此同時，它也為每個工具提供了調(diào)整配置的靈活性，無需 eject。

快速創(chuàng)建一個項(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
檢測是否安裝成功

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

vue create hello-world


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


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


vue-router選擇模式


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


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


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


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


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


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

安裝完成之后，cd hello-world,進(jìn)入文件夾，npm run serve啟動項(xiàng)目；
你也可以使用圖形化界面
可以通過 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ā)過程中難免要遇到需要開發(fā)者自己配置的點(diǎn)東西，那我們要如何配置呢，這點(diǎn)就需要在項(xiàng)目根目錄下手動新建一個 vue.config.js，此處我提供的一個我們項(xiàng)目中的常用模版；針對以下選項(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 起已棄用，請使用publicPath
publicPath

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


絕對路徑

outputDir

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

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

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

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

相關(guān)文章

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

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

    Sanchi 評論0 收藏0

  • 基于vue-cli搭了一個多頁面應(yīng)用的空腳手架

    摘要：多頁面跳轉(zhuǎn)之前看過有相關(guān)朋友了空的多頁面腳手架不過了幾個都是或者的剛好項(xiàng)目需要用到就在的基礎(chǔ)上進(jìn)行了修改已經(jīng)有直接用即可如果需要修改配置的請到里面修改并且全局引了如果不需要或者不喜歡請到里面修改多頁面空腳手架鏈接如果需要路由版的在的另外一 vue2.* (多頁面跳轉(zhuǎn)) @[vue2.3.3|webpack2.6.1|less|axios] 之前看過有相關(guān)朋友share了空的多頁面腳...

    qingshanli1988 評論0 收藏0

  • 深入認(rèn)識vue-cli：能做的不僅僅是初始化vue工程

    摘要：借助，我們通過非常簡單的問答形式，方便地初始化一個工程，完全不需要擔(dān)心繁復(fù)的配置等等。簡單來說，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運(yùn)行的模板，就能夠通過進(jìn)行工程的初始化。 相信對于大部分使用過VueJS的同學(xué)來說，vue-cli是他們非常熟悉的一個工具。借助vue-cli，我們通過非常簡單的問答形式，方便地初始化一個vue工程，完全不需要...

    AlienZHOU 評論0 收藏0

  • vue-cli安裝和vs code 的相關(guān)配置

    摘要：在本文之前，先給大家講一下接下來需要安裝的東西和他們之間的聯(lián)系。的安裝一安裝的官網(wǎng)下載的安裝包。在或中執(zhí)行命令。以上，就是和的安裝與配置 在本文之前，先給大家講一下接下來需要安裝的東西和他們之間的聯(lián)系。 node: node是js服務(wù)執(zhí)行的環(huán)境，通常我們使用node實(shí)現(xiàn)前端的工程化。前端工程化有很多工具可以實(shí)現(xiàn)，比如webpack、glup等，他們都是基礎(chǔ)node進(jìn)行開發(fā)的。 w...

    Loong_T 評論0 收藏0

  • 長的和vue-cli差不多的React腳手架

    摘要：的外表，的心說在前面對于我個人來說，一個好的腳手架有助于我們心無旁騖地去學(xué)習(xí)一些庫例如和。所以說，為什么不弄個的呢我的想法就是將和盡量保持一致，除了它們的核心和。并不會對該文件夾下的文件進(jìn)行處理。 react-webpack-boilerplate vue-cli的外表，React的心 說在前面 對于我個人來說，一個好的腳手架有助于我們心無旁騖地去學(xué)習(xí)一些庫例如Vue和React。vu...

    alin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<