vue移动端项目基础框架搭建

本文章，主要提供vue移动端项目基础框架搭建思路，每个独立的模块网上有很多相关的文档。
移动端vue项目基础框架搭建，主要包括6个步骤
项目使用的脚手架vue-cli搭建模板，2、使用淘宝lib-flexible搭配rem实现页面的自适应布局，为了方便代码编写使用rpx2rem转化px，使用scss样式预编译器，4、接口封装的aixos封装请求，5、项目中使用vuex和vue-router（在搭建快速模板的时候，问你要不要路由你选个是，会自动生成路由模块），6、引入公用的字体文件,这样移动端的vue框架就基本满足使用了，接下去ui的扩展和应用后续再说喽

1、用脚手架vue-cli 3.0快速搭建模板（网上很多，也有很多教程，node，vue-cli该升级的早点升级）
我找了一个https://blog.csdn.net/weixin_43068247/article/details/82082006，文档后很多任意找一个都可以。。没什么好说的

//安装脚手架
npm install -g @vue/cli
//快速安装
vue create project-name

2、既然是移动端，那移动端的自适应，采用淘宝的lib-flexible的库，下载依赖，

  npm i lib-flexible -S

在项目的主文件main.js中引入,并且在其中使用如下图所示
在这里插入图片描述

//引入
import 'lib-flexible/flexible.js'
//使用
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body);
  }, false);
}

3、使用px2rem将px自动装成rem单位，rem是什么东东，自己百度喽

//安装
 npm install px2rem-loader

vue中配置在build下的 utils.js中，找到generateLoaders 方法，在这里添加

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5
    }
  }

function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]
    // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    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)
    }
  }

4、scss预编译器

//引入依赖
npm install sass-loader node-sass --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

添加后配置如下
在这里插入图片描述
在需要用到sass的地方添加lang=scss

5、封装axios，这个就完全根据个人喜好来封装，你是直接用还是封装后引入使用还是封装后全局使用，看你自己的喜好，网上的资料比较较多，这里就不介绍了。。
6、状态管理器vuex使用请参保文档https://vuex.vuejs.org/zh/guide/，vue-router也是一样，文档很清晰，使用也很方便
7，字体全局引入
在这里插入图片描述

完成后，你就有一个基础的移动端基础的框架了，每个步骤的文档，网上文档很多，可以单独查看，本文提供一个整体的思路

vue移动端项目基础框架搭建

猜你喜欢