基於@vue/cli 3.x的從0到1搭建Vue項目的實踐

定場詩

守法朝朝憂悶，強梁夜夜歡歌，

損人利己騎馬騾，正直公平捱餓。

修橋補路瞎眼，殺人放火的兒多，

我到西天問我佛，佛說：我也沒轍！複製代碼

概述

Vue官方的腳手架工具Vue Cli有了一次較大的更新，相比於2.x版本，新版本3.x中對項目的搭建，相關包、插件的安裝都有了新大的不一樣。本文即立足於此，選擇@vue/cli 3.x版本的腳手架工具，動手實踐從0到1搭建Vue項目，包含了項目的初始化，以及Vue全家桶(VueRouter/Vuex/Axios/CSS預處理器)的相關配置。

1、認識新版本

@vue/cli 3.x版本，更加註重腳手架工具自己的易用性和易擴展性，支持開箱即用，同時提供了豐富的插件系統。

2、準備工做

1. Node/NPM安裝

想要操做使用npm，咱們必需要先安裝Node，這個沒啥好說的。Node.js官網傳送門下載安裝對應系統的版本便可。

檢測是否安裝成功

// 檢測node版本
node -v

// 檢測npm版本
npm -v複製代碼

2. 安裝腳手架@vue/cli

注意：3.x版本包，已經更名爲@vue/cli

npm install -g @vue/cli複製代碼

2.x版本安裝，npm install -g vue-cli

檢測是否安裝成功：

// 檢測@vue/cli的版本
vue -V複製代碼

個人版本是3.11.0

3、項目搭建

1. 項目結構初始化

vue create appName複製代碼

快速便捷的對項目結構進行初始化，選擇想要默認加載的配置。有兩種模式，一種是default，默認添加了babel和eslint的配置，另一種Manually select features，可根據本身的實際須要配置Babel、VueRouter、Vuex、TypeScript、CSS Pre-processors、Unit testing等

爲了給你們演示這個過，我就選擇了default默認

2. 建立項目文件，安裝依賴

若是在建立項目時，沒有選擇將babel、eslint、postcss等配置獨立化，則對應文件不存在，相關配置存儲在package.json中

3. 運行項目

在項目的根目錄執行 npm run serve，便可運行Vue的項目。

至此，經過幾步簡單的操做，Vue的項目初始化就完成了，各位小夥本是否是很簡單.

項目擴展

1. VueRouter 路由配置

注意，vue add的使用，將router做爲插件，添加到項目中

vue add router複製代碼

對，就這樣，這就配置好路由router模塊了

2. vuex 全局狀態管理器

同樣的套路，走起

vue add vuex複製代碼

對，就是這樣，咱們有成功了

3. axios 數據請求

再來一遍，走你...

vue add axios複製代碼

注意安裝的包名 vue-cli-plugin-axios 插件形式的存在

注意事項：

vue add 的設計意圖是爲了安裝和調用 Vue CLI 插件。對於普通的 npm 包而言，這不意味有一個替代（命令）。對於這些普通的 npm 包，你仍然須要（根據所選的 npm 包）使用包管理器。

4. CSS預處理器

如今的項目中不少都使用了CSS預處理器，那在@vue/cli 3.x版本中如何引入使用呢？由於沒有相關的vue插件，因此此處要按照普通的npm包，進行下載安裝，此處以sass預處理器爲例。

npm install sass-loader sass -D複製代碼

對，安裝一個這個就支持了sass預處理了，內置的webpack已經把工做幫你作好了

在.vue組件中使用sass

<style lang="scss">
</style>複製代碼

4、項目配置文件 vue.config.js

在項目的根目錄下，配置vue.config.js

module.exports = {
  // 配置項
}複製代碼

1. 向預處理器 Loader 傳遞選項

如向全部的scss文件中，傳入共享的全局變量。

假定存在src/assets/css/variables.scss文件

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "~@/assets/css/variables.scss"'
      }
    }
  }
}複製代碼

注意，此處的官方案例是錯誤的，受到的是sass-loader新版本影響。須要改變的是：將data字段改成prependData字段

2. 設置externals

在進行開發時，有時爲了更好的進行文件的緩存(CDN)，減小打包的文件體積，部分包是不但願被webpack打包，可是還但願在項目中便捷的使用，能夠選擇使用externals配置。此處以引入jQuery爲例。

public/index.html 引入包

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>複製代碼

vue.config.js

module.exports = {
  // configureWebpack 配置webpack
  configureWebpack: {
    externals: {
      jQuery: 'jQuery'
    }
  }
}複製代碼

src/components/HelloWorld.vue 使用jQuery

import $ from 'jQuery'複製代碼

隨便用

3. proxy代理

平常開發，必設轉發代理

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://xxoo.com',
        changeOrigin: true
      }
    }
  }
}複製代碼

掌握了轉發代理，麻麻不再擔憂我和後端調試接口啦...

5、輔助工具

1. VueDevtools

安裝瀏覽器擴展VueDevtools，輔助Vue開發，傳送門

後記

以上就是胡哥今天給你們分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一塊兒聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公衆號，可與胡哥繼續深刻交流呦！