Vue移動端開發--配置
阿新 • • 發佈:2019-01-01
首頁使用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檔案中的 地方也需要更改