Vue開發之項目建立

1.編輯器配置

習慣使用VScode進行開發時，能夠安裝EditorConfig for Visual Studio Code插件，而後在項目中新建.editorconfig文件，來配置編輯器的使用習慣

.editorconfig文件內容

root = true                             # 是不是頂級配置文件，設置爲true的時候纔會中止搜索.editorconfig文件
[*]                                     # 匹配除/以外的任意字符，表示對全部的文件都使用下面的配置
charset=utf-8                           # 使用UTF-8編碼
indent_style = tabs                     # 縮進方式爲Tab鍵
indent_size = 4                         # 縮進大小爲4個空格
trim_trailing_whitespace = true         # 讓文件以空行結束
insert_final_newline = true             # 刪除行尾空格

具體配置能夠參考editorconfig官網

2.開發時通用的項目目錄

.
├── babel.config.js                 # babel配置文件
├── package.json                    # 定義項目的一些描述，好比項目名，版本，項目依賴包以及開發依賴包
├── package-lock.json
├── eslintrc.js                     # eslint規則配置文件，好比想自定義一些規則時，則在此文件的rules字段中定義
├── vue.config.js                   # vue的配置文件
├── .editorconfig                   # 配置編輯器的使用習慣
├── postcss.config.js               # CSS自動補充一些兼容性代碼的配置
├── public                          # 公共文件存放目錄
│   ├── favicon.ico                 # 在瀏覽器上看到的小圖標
│   └── index.html                  # 模板文件，webpack在運行和打包時用這個文件來生成項目最後的index.html
├── README.md
├── src                             # 項目的主文件，平時都是在這個文件夾下進行開發
│   ├── api                         # 接口目錄，發送js請求的接口均可以保存在這個目錄下
│   ├── App.vue                     # 基礎組件
│   ├── assets                      # 項目靜態資源存放目錄，好比圖片，圖標，字體等都放在這個目錄下
│   │   ├── font
│   │   ├── img
│   │   └── logo.png
│   ├── components                  # 組件存放目錄，把代碼中一些能夠複用的邏輯抽離出來保存在這個目錄下
│   │   └── HelloWorld.vue
│   ├── config                      # 項目的配置文件存放目錄
│   │   └── index.js
│   ├── directive                   # Vue自定義的指令
│   │   └── index.js
│   ├── lib                         # 存放一些通用的工具和方法
│   │   ├── tools.js                # 存放與業務有關係的方法
│   │   └── util.js                 # 存放與業務無關的工具方法
│   ├── main.js
│   ├── mock                        # 模擬接口的數據
│   │   └── index.js
│   ├── router                      # 存放全部的路由，包括一些複雜的路由攔截方法
│   │   ├── index.js
│   │   └── router.js
│   ├── store
│   │   ├── actions.js
│   │   ├── index.js
│   │   ├── module
│   │   │   └── user.js
│   │   ├── mutations.js
│   │   └── state.js
│   └── views                       # 視圖文件存放目錄，項目開發中的頁面都保存在這個文件夾下
│       ├── About.vue
│       └── Home.vue
└── vue.config.js

3.vue.config.js中的一些配置

const path = require('path')
const resolve = dir => path.join(__dirname,dir)
const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin':'/'

module.exports = {
    lintOnSave: false,
    baseUrl: BASE_URL,
    chainWebpack:config =>{
        config.resolve.alias
        .set('@',resolve('src'))    // 用 @ 符號來替代 src 這個路徑
        .set('_c',resolve('src/components'))        // 用 _c 來替代 src/components這個目錄
    },
    productionSourceMap:false,       // 打包時不生成 .map文件，減小打包的體積同時加快打包速度
    devServer:{         // 跨域配置，告訴開發服務器將任何沒有匹配到靜態文件的請求都代理到proxy指定的URL
        proxy:'http://localhost:8000'
    }
}