Vue Cli3搭建的Vue框架和2對比以及基本的使用

文件目錄

• 原來的文件目錄

• 現在的文件目錄

Store VUEX

• 原來項目的vuex狀態管理需要自己 install的，並不包括在搭建過程中，目前精簡後使用一個store.js 來囊括vuex，

Router

• router/index.js ==>router.js
• 推薦使用懶加載動態註冊路由
• component: () => import('./views/About.vue')

public文件夾

• static 是 webpack 默認存放靜態資源的文件夾，打包時會直接複製一份到dist文件夾不會經過 webpack 編譯
• 摒棄 static 新增了 public 。 中“靜態資源”兩種處理方式：
  • 經webpack 處理：在 JavaScript 被導入或在 template/CSS 中通過“相對路徑”被引用的資源會被編譯並壓縮
  • 不經webpack 處理：放置在 public 目錄下或通過絕對路徑被引用的資源將會“直接被拷貝”一份，不做任何編譯壓縮處理

src/views

• vue cli 3 的 src文件夾 新增 views文件夾 用來存放 “頁面”，區分 components（組件）

去掉 build（根據config中的配置來定義規則）、config（配置不同環境的參數）文件夾

• 配置代理
  • 根目錄下：vue.config.js 配置代理服務

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
};

• 配置不同的環境變量前綴

publicPath: process.env.NODE_ENV === 'dev'
    ? '/aaa'
    : '/bbb'
  ,

NODE_ENV

• package 中指定不同的環境變量名稱，用來加入前綴

"scripts": {
    "dev": "NODE_ENV=dev vue-cli-service serve",
    "build": "NODE_ENV=production vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },

• 全局都能取到process.env.NODE_ENV 所以可以根據環境變量做很多事情，做到環境區分和配置化

baseUrl 和 publicPath

• 運行的時候 出現了一句 You have set both "baseUrl" and "publicPath" in vue.config.js, in this case, "baseUrl" will be ignored in favor of "publicPath".

  • 查閱文檔發現：baseUrl已經被廢棄，使用publicPath來操作文檔

• config 配置案例

module.exports = {
  publicPath: process.env.NODE_ENV === 'dev'
    ? '/'
    : '/prod'
  ,
  outputDir: 'dist',// 運行時生成的生產環境構建文件的目錄(默認''dist''，構建之前會被清除)
  indexPath: 'index.html',//指定生成的 index.html 的輸出路徑(相對於 outputDir)也可以是一個絕對路徑。
  lintOnSave: true,// 是否在保存的時候檢查
  css: {
    extract: true,// 是否使用css分離插件 ExtractTextPlugin
    sourceMap: false,// 開啓 CSS source maps
    loaderOptions: {},// css預設器配置項
    modules: false// 啓用 CSS modules for all css / pre-processor files.
  },
  devServer: {// 環境配置
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: true,
    open: true, //配置自動啓動瀏覽器
    proxy: {// 配置多個代理(配置一個 proxy: 'http://localhost:4000' )
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  
};

使用mockJS

• 在main.JS 中使用可以通過測試環境使用mock

// 如果是開發環境，則導入 mock
if (process.env.NODE_ENV === 'dev') {
  // 'import' and 'export' may only appear at the top level 所以這裏要用 require
  require('./mock')
}

• 建立mock文件夾 下的index.js

import Mock from 'mockjs'

Mock.mock('/auth/login', 'get', {
  'meta': {
    'errorcode': 0,
    'msg': '登錄成功'
  }
})

建立最簡單的mock示例

2019年10月29日00:31:16 夜已深，後續持續更新