vue/cli 3使用

April 發布于2019-08-23 11:01 / 877人閱讀

摘要：當使用只有入口的字符串格式時，模板會被推導為并且如果找不到的話，就回退到。配置這里的選項會傳遞給這里的選項會傳遞給警告錯誤其他可使用和對單個文件快速開發圖形化界面創建管理項目

近日,Vue作者尤雨溪發布了正式的vue cli 3.0,基于webpack4,趕緊試一下.
文檔地址vue-cli

簡介

Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統

使用


npm install -g @vue/cli

npm create new-cli

然后就是配置,可默認(babel,eslint),自定義
自定義有 babel ts pwa vue-router vuex css預處理以及Linter/Formatter,unit testing e2e testing

選了router 會再次選是否用history模式

在這里選了css預處理又會讓選 less scss stylus

eslint 又有幾項

只防止出錯

airbnb 配置

標準配置

eslint +prettier

還有一項是把配置文件如babel,postCss eslint 放多帶帶文件,還是放package.json里,當然多帶帶了

最后有個保存配置,以后用

然后就是安裝依賴
目錄如下

沒有cli2版本的build和config,多個babel.config.js
官網介紹是可以新建個vue.config.js進行相關webpack配置,比如

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  //loader
   chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
        .loader("vue-loader")
        .tap(options => {
          // 修改它的選項...loader
          return options
        })
  },
  //生產環境關閉map
 productionSourceMap:false,
 //基本URL
 baseUrl: process.env.NODE_ENV === "production"
    ? "http://www.baidu.com"
    : "https://www.google.com",
 outputDir:"dist", //build 目錄
 assetsDir:"",//asset目錄
 indexPath:"index.html",//指定index.html 路徑
 filenameHashing:true,//文件名帶hash
//  multi-page模式,每個“page”應該有一個對應的 JavaScript 入口文件
 pages: {
    index: {
      // page 的入口
      entry: "src/index/main.js",
      // 模板來源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html",
      // 當使用 title 選項時，
      // template 中的 title 標簽需要是 <%= htmlWebpackPlugin.options.title %>
      title: "Index Page",
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導為 `public/subpage.html`
    // 并且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導為 `subpage.html`。
    subpage: "src/subpage/main.js"
  },
  //css配置
  css: {
    sourceMap:false,//css source map
    loaderOptions: {
      css: {
        // 這里的選項會傳遞給 css-loader
      },
      postcss: {
        // 這里的選項會傳遞給 postcss-loader
      }
    }
  },
  //dev server
  devServer: {
    host:127.0.0.1
    port:8000,
    proxy: "http://localhost:4000",
    overlay: {
      warnings: true,//警告
      errors: true//錯誤
    }
  }


}

其他

可使用vue serve和vue build 對單個vue文件快速開發

vue ui 圖形化界面創建管理項目

云服務器 GPU云服務器買3送3 apache maven 3.0.3 3.5 3.X

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

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

[全網最全的 Vue CLI 3 原創合集] 你要的這里都有

摘要：慢慢地，關于的原創學習文章已經寫了多篇了會一直放出來，目前篇，因此做一個合集，獻給那些對新版本腳手架使用和背后設計感興趣的同學，都是一步一步去看源碼，也給官方提了幾次，合進去了幾個原創不易，歡迎大家互相轉發，期望大家一起快速過度到版本目錄慢慢地，關于 Vue CLI 3 的原創學習文章已經寫了 20 多篇了（會一直放出來，目前 23 篇），因此做一個合集，獻給那些對新版本腳手架使用...

phpmatt 2019-08-23 12:00 評論0 收藏0
vue-cli3.x 新特性及踩坑記

摘要：前言都到了，所以是時候玩轉一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導致正確的不能用。打開終端，切換到根路徑文件里面修改為方法二是默認路徑修改了路徑會出現錯誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 評論0 收藏0
vue腳手架vue-cli的卸載與安裝方式

　　電腦之前安裝的vue-cli版本太低，現在要改換成最新版本，那么就需要先將舊版本卸載，安裝新版本。vue-cli：vue3.0之前版本使用此名稱　　@vue/cli：vue3.0之后版本包括3.0版本使用此名稱　　以下列舉npm和yarn指令的方式：　　卸載指令：　　//卸載3.0之前的版本　　npmuninstall-gvue-cli 　　yarnglobalremovevue-cli 　...

3403771864 2022-09-22 22:21 評論0 收藏0
《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。什么是 CLI 命令行界面（英語：command-li...

qieangel2013 2019-08-23 11:58 評論0 收藏0
《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。什么是 CLI 命令行界面（英語：command-li...

kel 2019-08-19 11:10 評論0 收藏0
vue-cli3腳手架的使用和相關配置

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

Sanchi 2019-08-26 10:22 評論0 收藏0