Vue移动端开发--配置

首页使用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文件中的 地方也需要更改