基于vue的移动端开发

一.配置环境

1.安装node.js
   地址：http://nodejs.org/#download
   node -v 查看版本，版本应在4.x.x以上,nodejs自带npm不需要额外安装
2.安装npm
   地址：https://github.com/isaacs/npm/tags；
   npm -v 查看版本，版本应在3.x.x以上
3.安装cnpm  淘宝镜像，加快下载速度
   安装命令：npm i -g cnpm / npm install cnpm -g –registry=https://registry.npm.taobao.org
   cnpm -v 查看版本
4.安装yarn
   中文网:https://yarn.bootcss.com/
   npm install -g yarn  这里我是用的是npm安装的
   yarn -v 查看版本

二.创建项目

vue官网地址: https://cn.vuejs.org/index.html
1.全局安装webpack
    为了在其他任何目录下都能使用到webpack，进行全局安装，执行npm install webpack@3.12.0 -g 命令，npm 是Node集成的工具 npm install 是从github上下载webpack最新的包，“@3.12.0”表示安装指定的版本，因为现在已经升级到了4.0版本，如果不指定版本版本号就会安装最新的版本，同时vue-cli2需要的是3.xxx的版本，所以我们指定了一个固定版本，如果不指定则不需要，"-g" 全称是 " global (全局) "  表示全局安装。检查是否安装成功终端执行“webpack -v”或者"webpack --version"，如果显示具体的版本号则表示安装成功。
2.安装脚手架
    1)vue2.0 (项目名称避免出现大写)
        npm install -g @vue/cli
        vue create + 项目名称  // 自动下载所有依赖
        cd 项目名称
        npm run serve
    2)vue3.0
        npm install -g @vue/cli-init
        vue init webpack  + 项目名称
        cd  + 项目名称
        npm install       // 手动下载所有依赖
        npm run dev
    注意:如果已有的vue-cli2的项目需要继续开发，同时又想使用3怎么办呢???
    3和旧版使用了相同的命令，所以2被覆盖了。如果你仍然需要使用旧版本的vue init功能，全局安装一个桥接工具即可
    npm install -g @vue/cli-init
    //安装完后 就还可以使用 vue init 命令
    vue init webpack my_project

vue-cli2与vue-cli3脚手架目录结构:

1.项目创建好以后就可以准备疯狂编码了,但是在开发移动端之前我们还需要做一些准备工作
    目前市面上手机屏幕分辨率各不一样,所以我们需要针对不同机型做一些适配!!!下面跟大家分享一下我经常使用的一种适配方式!!!!!
2.flexible方案
    flexible方案是阿里早期开源的一个移动端适配解决方案，引用flexible后，我们在页面上统一使用rem来布局。
    #1.安装依赖
        npm install px2rem-loader  lib-flexible --save 
    #2.设置viewport (这行代码卸载index.html文件就可以)
        设置: <meta name="viewport" content="width=device-width,initial-scale=1.0">
          1. 说明: 因为默认的布局视口大于视觉视口，如果不设置将导致页面的内容显示非常小
          2. 原理: 将980的页面在375的屏幕上完全显示只能缩小980页面中的内容
    #3. Vue中使用px2rem， lib-flexible
         1. 在项目入口文件 main.js 里 引入 lib-flexible， flexible会自动根据设备情况动态设置rem的值的大小
            - import 'lib-flexible/flexible'
          2. 在build文件夹下的util.js中添加
          
                // 全局定义px2remLoader
                const px2remLoader = {
                    loader: 'px2rem-loader',
                    options: {
                    remUnit: 37.5  // remUnit为转换rem的基础 设计稿单位/等分数 = remUnit
                    }
                }
          
        
        
                // 在该函数的loaders中添加
                function generateLoaders (loader, loaderOptions) {
                    // 添加使用 px2remLoader
                    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)
                    }
                  }