記本身一次vue基礎實戰：配置篇

1. 前言

記錄本身從基礎學習vue實戰，初入發表文章，望各位大佬口下留情！不對之處還請大佬指點一下。

2. 新建，配置項目

1. 新建Vue-cli3.0腳手架的項目

在這裏普及一下，什麼是Vue-cli？

Vue是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是， Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。 另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。 連接描述

上面引用的連接已經很好說明一切了，這裏我就不一一詳細說明怎麼安裝node.js和npm了，我就說明一下我本身的基礎開發流程：

1.1 使用Vue ui
我使用的是Vscode編輯器，能夠在編輯器終端使用快捷鍵Ctrl + ·，能夠快速打開，輸入Vue ui。在加載完後，你本身默認的瀏覽器自動打開配置界面新建項目。如下是我今天的配置：

• 在詳情上新建項目名；選擇包管理器，我這裏選擇是npm，由於固然是用的比較熟悉了；其他的默認操做；下一步；
• 預設（Presets），默認使用官方提供好的插件和配置，心裏感受不太妙仍是謹慎一下手動配置；下一步；
• 功能（Features），手動添加插件：
  一.（Babel）能夠把ES6/7語法兼容或者換成ES5更加適合低版瀏覽器的版本，使開發者無需考慮瀏覽器的支持問題，隨便使用新語法；
  二.（Router）路由，必須滴；
  三.（Vuex）狀態管理，大型項目能夠提現它的重要性，小項目也是能夠用的，反正不虧；
  四.（CSS Pre-processors）css預處理，能夠爲css添加一些編碼的特性；
  五.（Linter/Formatter）編寫代碼風格提示，及時糾正你的小毛病；
  六.（Use config files）使用配置文件
• 配置（Configuration）選擇預處理器，看我的平時習慣，這裏我選（Eslint+standard config）

上述配置，回到Vscode,終端輸入npm run serve,就開始你的奇妙之旅了。

3. 項目配置

回到項目的咱們能夠看一下依賴包，生成好的項目

上面的文件依次是

• 依賴包（node-modules），這就不用多說了吧，安裝的依賴都在這裏面，有興趣後面會對裏面的源碼進行更深層次的解讀。
• 公共文件夾（public）裏面是vue的圖標加首頁的html
• src目錄重頭戲(我通常有如下文件)
  1.api接口文檔，與後端進行數據交互；
  2.assets項目資源主要（img）圖片、（font）字體等等靜態資源存放在這裏；
  3.components組件及一些複用組件；
  4.config主要是根據模塊系統導出配置對象；
  5.directive自定義指令，能夠寫本身定義好的函數使用
  6.lib與實戰開發相關或者與實戰不相關工具函數都在放在這裏
  7.mock模擬數據，在沒有與後端正式對接的時候，能夠模擬數據，方便到時候與後端開發時修改數據傳輸格式
  8.router路由，跳轉路由頁面都要在這裏註冊，後面會講到把一部分抽離出來，就是權限那一塊
  9.store狀態管理，vuex的state、mutations、actions、getters等等都在這裏，後面會詳細介紹
  10.views視圖，頁面主要展現和組件組合使用的文件
  11.App.vue起始頁面，經過路由<router>跳轉個個頁面
  12.main.js全局文件，在這導入的文件能夠去全局使用import
• .editorconfig 用來協同不一樣開發人員、編輯器、代碼風格、樣式規格化定義和維護一致的編碼樣式
• .eslintrc.js 語法檢測配置
• postcss.config.js 將px轉化爲rem
• vue.config.js 開發總配置：

// 定義一個方法
const path = require('path')
// 主要是方便導入名簡寫，這裏使用es6的箭頭函數
const resolve = dir => path.join(__dirname, dir)
// 開發環境配置 '/'指定域名的根目錄下，若是是開發環境寫‘/xxxx/’便可
const BASE_URL = process.env.NODE_ENV === 'procution' ? '/xxxx/' : '/'
module.exports = {
  // 取消每一次保存編譯
  lintOnSave: false,
  // 項目基本路徑
  baseUrl: BASE_URL,
  // 方便開發的配置
  chainWebpack: config => {
    // webpack目錄別名配置
    config.resolve.alias
      // 導入時以@能夠代替src，拼接路徑
      .set('@', resolve('src'))
      // 上同
      .set('_c', resolve('src/components'))
  },
  // 打包時不生成.map文件，減小打包文件
  productionSourceMap: false,
  // 跨域問題
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

4. 結語

拖了很久沒寫，第一次本身組織語言有點很差，語言不一樣通順的地方望多多指點，就當本身練習。
下一節講解路由基礎，看有沒有時間寫了，但願給萌新點個贊!