首頁使用vue-cli腳手架安裝專案開發包， 以及配置git環境
Vue+vuex+axios+rem（flex）
配置4個環境，呼叫不同的介面：local（本地開發）、beta（測試）、pre（預上線）、prod（正式上線）

一、修改index.html檔案
修改頭部meta標籤
Plain Text
// 使用lib-flexible 可去掉這段程式碼，會自動新增的
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
引入手機端 除錯面板--開發者模式（F12）
Plain Text
head 引入
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
呼叫：
  <script>
    var vConsole = new vConsole()
  </script>


二、將px轉化為rem，適配移動端
// 安裝lib-flexible
npm i lib-flexible --save

// 引入lib-flexible -- 在main.js中引入
import 'lib-flexible/flexible'

// 安裝px2rem-loader
npm i px2rem-loader --save

// 配置px2rem-loader
    在build檔案中找到 util.js， 將px2rem-loader 新增到 cssLoaders中
Plain Text
// ******更改utils.js中的這段程式碼********
exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
    
   // ******新增********
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 // 設計稿寬度除10 （750/10）
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    // ******替換為下面的程式碼******
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}
// 配置完成後重啟，就自動轉化為rem了
npm run dev


三、解決移動端點選事件的300ms延遲
在main.js 裡面操作
1.安裝fastclick
npm install fastclick --save
2.引入
import FastClick from 'fastclick'
3.使用
FastClick.attach(document.body)


四、ES6的相容性--轉es5
在main.js 裡面操作
1、安裝 babel-polyfill
     npm install babel-polyfill --save-dev
2、引入--在main.js頭部
import 'babel-polyfill'


五、使用Vuex
1、安裝
npm install vuex --save
2、新建資料夾store -- 建檔案index.js -- 建檔案（模組化）
Plain Text
import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
import bridge from './module/bridge' // 引入store的一個模組

Vue.use(Vuex) // 使用vuex

export default new Vuex.Store({ // 輸出vuex的一個狀態
  modules: {
    namespaced: true,
    modA: bridge // 引入模組
  }
})


//***在main.js檔案中使用 store
 import store from './store' // 引入store檔案
 new Vue({
  el: '#app',
  router,    // ***使用router路由
  store, // *******使用store
  components: { App },
  template: '<App/>'
})


六、引入基礎css樣式
在assets 靜態資料夾中新建資料夾css，新增 reset.css 和 border.css 檔案
1、main.js 引入 reset.css 重置樣式
import '@/assets/css/reset.css'
2、main.js 引入 border.css 解決1px的邊框顯示問題
import '@/assets/css/border.css'


七、可-使用sass
1、 安裝 node-sass
npm install node-sass --save-dev
2、 安裝 sass-loader
npm install sass-loader --save-dev
3、使用
Plain Text
<style lang="scss"> // 標籤上加上 scss
#app {
  color: #2c3e50;
  margin-top: 60px;
  img {
    width: 750px;
  }
}
</style>


八、可-使用stylus
1、 安裝 node-sass
npm install stylus --save-dev
2、 安裝 sass-loader
npm install stylus-loader --save-dev
3、使用
Plain Text
<style lang="stylus" type="text/stylus" scoped>
.header-fixed
        z-index 2
        font-size .32rem
        .header-fixed-back
            position absolute
            top 0
            left 0
</style>


九、路由按需載入js
解決一次性載入js檔案過大，開啟首頁慢點問題

1、安裝 syntax-dynamic-import 外掛
npm install babel-plugin-syntax-dynamic-import --save-dev
2、配置 .babelrc 檔案，檔案在根目錄下
{
     plugins: ["syntax-dynamic-import"]
}
3、路由中引入檔案的寫法
將 import Foo from '@/pages/foo' 寫為
const Foo = () => import('@/pages/foo')
在打包的時候，自動生成的chunk包名字是 亂碼，我們可以指定命名--採用魔法註釋
可增加魔法註釋，/* webpackChunkName:'foo' */     foo為指定模組名字
const Foo = () => import(/* webpackChunkName:'foo' */ '@/pages/foo')
4、webpack增加配置
chunkFilename: '[name].js'
Plain Text
在webpack.bas.conf.js中的 output需要加個chunkFilename: '[name].js'
    entry: {
		app: [resolve("./app.js")],
	},
	output: {
		path: resolve("./dist"),
		publicPath: '',
		filename: "assets/js/[name].js",
		chunkFilename: "chunk/[name].js",
	},



十、多環境配置-- 有點麻煩
在node中 process指當前node程序，全域性屬性， 可設定 process.env.NODE_ENV  為一個全域性變數值
local（本地開發）、beta（測試）、pre（預上線）、prod（正式上線）
1、安裝cross-env
npm install cross-env --save-dev
可在多平臺使用 NODE_ENV 命令 （window、mac、Linux）
2、更改命令
Plain Text
在package.json 檔案中 更改 scripts 內容
"scripts": {
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "local": "cross-env NODE_ENV=local npm run build",
    "pre": "cross-env NODE_ENV=pre npm run build",
    "beta": "cross-env NODE_ENV=beta npm run build"
  },
npm run dev ：通過cross-env 設定整個專案的全域性變數 NODE_ENV 的值
npm run start : 在本地啟動專案
npm run lint： 進行eslint 程式碼規範檢測
npm run build：對專案進行打包
npm run local： 令NODE_ENV= local 然後進行打包
npm run pre： 令NODE_ENV= pre 然後進行打包
npm run beta： 令NODE_ENV= beta 然後進行打包

3、專案build 打包的時候在dist 中生成不同的 包檔案
可檢視原始碼內容，進行詳細瞭解
在src 內建一個config資料夾，再內部建5個檔案, 判斷在NODE_ENV不同值的情況下呼叫哪個值
Plain Text
src中新建的 config資料夾內的
// *******index.js
const localConfig = require('./local.js')
const betaConfig = require('./beta.js')
const preConfig = require('./pre.js')
const prodConfig = require('./prod.js')
let env = process.env.NODE_ENV
let config = null

if (env === 'local' || env === 'dev' || env === 'development') {
  config = localConfig
} else if (env === 'beta') {
  config = betaConfig
} else if (env === 'pre') {
  config = preConfig
} else {
  config = prodConfig
}

module.exports = config

// *******local.js問件
module.exports = {
  assetsRoot: '../dist/local/', // build打包生成的檔案路徑
  // 可配置其他內容，比如 不同環境調去不同的 介面路徑
  uploadUrl: ‘https://baidu.com/’
}

4、更改專案根目錄下的config資料夾中的 index.js檔案
Plain Text
專案--config--index.js

// 引入src中的config的index.js檔案
const _config = require('../src/config/index.js')

// 更改module.exports 中的 build 配置項內容
    // 將 ../dist 都改為動態的
build: {
    // Template for index.html
    //index: path.resolve(__dirname, '../dist/index.html'),
    index: path.resolve(__dirname, _config.assetsRoot + 'index.html'),

    // Paths
    // assetsRoot: path.resolve(__dirname, '../dist'),
    assetsRoot: path.resolve(__dirname, _config.assetsRoot + ''),
    assetsSubDirectory: 'static',
    // assetsPublicPath: '/',
    assetsPublicPath: _config.assetsPublicPath, // 拼接靜態資源的字首
5、 build檔案中的 地方也需要更改