配置

• 構(gòu)建

  # 安裝依賴
  npm install
  
  # 啟動服務, 熱加載 默認 localhost:8080, 若8080已使用會自動找另外一個端口
  npm run dev
  
  # 壓縮構(gòu)建生產(chǎn)環(huán)境
  npm run build
  

目錄結(jié)構(gòu)

.
├── build             # webpack/node 配置項 
├── config            # 測試、開發(fā)、上線的環(huán)境配置 
├── node_modules
├── src               # 源代碼目錄
│  ├── api            # 請求后端和模擬數(shù)據(jù)的 API
│  ├── assets         # webpack 打包的靜態(tài)資源文件
│  ├── components     # 所有組件
│  ├── icons          # 
│  ├── mixin          # 
│  ├── mock           # 模擬數(shù)據(jù)
│  ├── router         # 路由    
│  ├── service        # 服務
│  ├── store          # vuex 狀態(tài)管理
│  │  ├── modules     # 
│  │  └── index.js    # 
│  ├── styles         # 樣式
│  ├── utils          # 全局工具類，directive, mixin 還有綁定到 Vue.prototype 的函數(shù)
│  ├── views          # 業(yè)務頁面
│  ├── App.vue        # 根組件
│  └── main.js        # vue 入口文件
└── static            # npm沒有的第三方庫

build

• webpack/node 配置相關文件
• utils
  • 資源文件路徑、加載器和創(chuàng)建通知回調(diào): assetsPath cssLoaders styleLoaders createNotifierCallback

config

• 環(huán)境配置相關文件
  • dev.env.js
  • index.js 主配置文件
  • prod.env.js
  • test.env.js 單元測試
• test.env.js 繼承 dev.env.js, dev.env.js 繼承 prod.env.js
• 使用配置文件中的環(huán)境變量

  Vue.config.productionTip = process.env.NODE_ENV === 'production'
  

node_modules

• 依賴的第三方庫

src

• 存放項目源碼（開發(fā)的所有代碼）會被 webpack 打包。如果被引用, 也會自動生成url
  • api
    • 請求后端和模擬數(shù)據(jù)的 API
  • asset
    • 404圖片, 模塊資源等, 交由 webpack 處理
  • components
    • UI 通用組件 .vue 文件，按模塊劃分組件, 其實就是自定義html標簽

      • template

        <template>
          {{msg}}
        </template>
        

      • script js代碼塊, 導出數(shù)據(jù)

        <script>
          export default {
              name: "HelloWorld",
              data() {
                return {
                  msg: "藍牙卡管理平臺"
                }
              }
            }
        </script>
        

      • style 樣式表, 加上scoped: 表示只在當前組件有效

        <style scoped>
        
        </style>
        

  • icons 存放圖標資源
  • mock 模擬數(shù)據(jù)
  • route 路由，建議按模塊劃分
  • store 利用 vuex 持久化數(shù)據(jù)，如cookie、 token等
  • styles 基本樣式
  • utils 工具類，權(quán)限，http請求，校驗等
  • views 業(yè)務頁面，建議按模塊劃分
  • App.vue
    • 主應用組件
  • main.js
    • 應用入口文件

static

• 真正的靜態(tài)資源，不會被 webpack 打包，可以放 npm 中沒有的第三方庫

根目錄的配置文件

• .babelrc
  - babel的配置文件, babel 的作用是將 ES6 轉(zhuǎn)換成 ES5
• .editorconfig
  • 項目編碼、縮進、尾行插入換行符、過濾尾部空格
• .eslintignore
  • 過濾不需要eslint校驗的文件類型和目錄
• .eslintrc.js
  • eslint配置文件
  • 一個用來識別ECMAScript 并且按照規(guī)則給出報告的代碼檢測工具，使用它可以避免低級錯誤和統(tǒng)一代碼的風格
  • 可以被配置的信息主要分為3類：
    • Environments：你的 javascript 腳步將要運行在什么環(huán)境（如：nodejs，browser，commonjs等）中。
    • Globals：執(zhí)行代碼時腳步需要訪問的額外全局變量。
    • Rules：開啟某些規(guī)則，也可以設置規(guī)則的等級。
• .postcssrc.js
  • vue-loader 支持通過 postcss-loader 自動加載同一個配置文件：
    • postcss.config.js
    • .postcssrc
    • package.json 中的 postcss
  • 使用配置文件允許你在由 postcss-loader 處理的普通CSS文件和 *.vue 文件中的 CSS 之間共享相同的配置, 這是推薦的做法
• index.html 應用運行的html文件
• package.json
  • 項目信息、依賴關系和插件配置