vue-cli3腳手架的配置以及使用

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：

• 通過 @vue/cli 搭建交互式的項目腳手架。
• 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
• 一個運行時依賴 (@vue/cli-service)，該依賴：一個豐富的官方插件集合，集成了前端生態中最好的工具。
  • 可升級；
  • 基於 webpack 構建，並帶有合理的默認配置；
  • 可以通過項目內的配置文件進行配置；
  • 可以通過插件進行擴展。
• 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。

Vue CLI 致力於將 Vue 生態中的工具基礎標准化。它確保了各種構建工具能夠基於智能的默認配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject

vue-cli3官網幫我們概述了vue-cli3的一些特點。個人在使用vue-cli3的感受中 零配置、可升級 2個特點確實很不錯。

如何安裝vue-cli3呢？

首先，你要有一個nodejs環境

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台電腦中管理多個 Node 版本。

其次，如果你之前安裝了vue-cli的舊版本，那么你要做如下操作

關於舊版本

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli(1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

假設你已有了nodejs環境，你可以通過下面指令安裝vue-cli3的包

npm install -g @vue/cli
# OR
yarn global add @vue/cli

 

安裝之后，你就可以在命令行中訪問 vue 命令。你可以通過簡單運行 vue，看看是否展示出了一份所有可用命令的幫助信息，來驗證它是否安裝成功。（例如 vue --version）

接下來就是創建一個vue的項目了，使用下面命令：

vue create hello-world

 

你會被提示選取一個 preset。你可以選默認的包含了基本的 Babel + ESLint 設置的 preset，也可以選“手動選擇特性”來選取需要的特性。

在多選時，空格代表選中，enter代表進入下一個配置項

且你手動選擇的配置項還會存入到你電腦的 ~/.vuerc 文件中，這樣子你下次創建vue項目的時候，可以選擇你之前手動配置的配置，這點vue cli3做得很人性化哦！點贊！ 

上面的配置選擇完之后，一個簡單的vue項目就創建成功了。這個時候你在命令行cd hello-world，進入到hello-world項目根路徑下，命令行敲下npm run serve，項目就開始跑起來啦。

再講一下創建項目后的 目錄層次吧，接圖：

一個一個來：

• public目錄放置ico以及你的index.html。這個目錄博主我沒加過其他文件，讓她生讓她生讓她生~~~；
• src這個目錄不得了了，這個是我們開發vue項目的重點目錄所在。

1. assets目錄： 放置靜態文件，例如：圖片，js，svg的js等等啊，這個目錄下的文件在生產環境下會被webpack copy
2. components目錄：放置公用vue組件頁面
3. styles目錄：博主新增，放置重寫reset.css以及阿里矢量圖字體iconfont.css用
4. views目錄：博主用作放大模塊。登錄頁，首頁，注冊頁等等。

• 不知各位童鞋有沒有發現博主比你們多了一個vue.config.js文件木有，這個文件更不得了啦。我們前端獨立開發有個跨域問題，之前vue-cli2的proxy-table等配置在vue-cli3中哪里配置呢？
  

  // vue.config.js
  module.exports = {
      // 選項...
      baseUrl:"./",
      outputDir:"dist",
      assetsDir:"assets",
      indexPath:"index.html",
      filenameHashing:true,
      pages:undefined,
      lintOnSave:true,
      runtimeCompiler:false,
      transpileDependencies:[],
      productionSourceMap:false,
      crossorigin:undefined,
      integrity:false,
      devServer:{//代理
          port:8086,
          proxy:'http://192.168.255.201:8082'
      }
  }

 

 

博主目前是這樣的配置做開發，沒問題哦~感覺vue-cli3真的很棒哦，真香警告~~~哈哈哈。

　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　希望可以幫助更多前端小伙伴~　　金木·晨 　　2018年08月28日10:50:09