vue-cli3腳手架的使用和相關配置

jsummer 發布于2019-08-30 15:44 / 3288人閱讀

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

前言

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

可升級；
基于 webpack 構建，并帶有合理的默認配置；
可以通過項目內的配置文件進行配置；
可以通過插件進行擴展。

一個豐富的官方插件集合，集成了前端生態中最好的工具。
一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。
Vue CLI 致力于將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基于智能的默認配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject。

快速創建一個項目

安裝vue-cli3;

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

創建項目：

vue create hello-world

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

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

vue-router選擇模式

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

選擇的代碼風格和格式校驗

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

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

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

看一下安裝完成的項目目錄

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

不做重點講解；

vue.config.js

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

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 插件 //預加載
    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: "/"
部署應用包時的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到這個值，所以請始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 http://shop.ktvsky.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 http://shop.ktvsky.com/vue/，則設置 publicPath 為 /vue/。
也可以使用相對路徑 "./",這樣這樣打出來的包可以被部署在任意路徑
相對路徑的打包后的

絕對路徑

outputDir

Type: string 
Default: "dist"
當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。注意目標目錄在構建之前會被清除 (構建時傳入 --no-clean 可關閉該行為)。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116134.html

vue-cli3腳手架的使用和相關配置

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

Sanchi 2019-08-26 10:22 評論0 收藏0
基于vue-cli搭了一個多頁面應用的空腳手架

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

qingshanli1988 2019-08-01 17:11 評論0 收藏0
深入認識vue-cli：能做的不僅僅是初始化vue工程

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

AlienZHOU 2019-08-21 17:09 評論0 收藏0
vue-cli安裝和vs code 的相關配置

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

Loong_T 2019-08-23 14:46 評論0 收藏0
長的和vue-cli差不多的React腳手架

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

alin 2019-08-21 14:27 評論0 收藏0