vuecli实现移动端视频类webAPP-项目搭建

前端逗逗飞

发布于 2021-04-30 10:26:03

7420

发布于 2021-04-30 10:26:03

前言

在平时的前端开发中，我们更多的是完成螺丝钉的角色，即在公司的前端框架下，实现各种业务逻辑，Vue技术栈并不是难点所在，难点往往在于从 0 到 1 搭建一个完整的实践项目，以及项目开发过程中对于很多技术细节的再学习和处理，帮助读者具备开发和统筹一个完整项目的能力是此项目的目标，本项目将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

技术栈

vue
vue-cli 4.0.5
router
vuex
vant 2.10.2
阿里图标字体
axios

基础环境搭建

vue-cli 脚手架初始化

首先通过 vue-cli 这个脚手架工具生成项目的初始化化结构。

vue create dou-yin

你会被提示选取一个 preset。这个地方我们选择“手动选择特性”来选取需要的特性。(这个地方会详细介绍)

Use history mode for router (这个地方我们选择history的路由方式，history 方式的路径后不会添加#)
Pick a CSS pre-processor （因为项目中Less编写样式所以需要css 预处理）
Pick a linter/formatter config (项目中使用ESLint 代码风格检查，另外我们也希望可以通过额外的配置文件对 eslint做定制化配置我们选择代码保存的时候做ESLint检查)
Save this as a preset for future projects (这个地方我们选择n 我们不需要vue-cli保存我们的噢诶这文件)

项目创建成功，根据提示：

 $ cd dou-yin

启动项目

 $ yarn serve

项目目录说明

|- assets   				// 资源文件夹
	  |--- fonts                   //  图标字体 阿里图标字体
	  |--- icons                   //  项目图标
      |--- style                   //  封装的公共样式 一像素边框    
|- componments   			// 封装的组件文件夹
|- request   				//  axios 网络请求封装
|- router   				//  路由
|- store   					// vuex 
|- styles   				// 公共样式文件夹
|- utils   					// 工具类
|- views   					// 视图页面
  main.js 					//vue项目入口
  App.vue 					//跟页面
 .eslint.js  				// eslint配置文件
  babel.config.js			// 解析babel的配置文件

引入第三方UI组件库

市面上有很多优秀的vue移动端UI组件库，cube-ui、vant 之类的，本人比较推荐vant(其实也没什么原因就是用的比较顺手而已)。

在项目内安装vant

yarn add vant babel-plugin-import style-resources-loader postcss-pxtorem
yarn add postcss-px2rem -D

采用按需引入的方式配置组件的引入

babel.config.js 修改成如下内容

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
};

在项目中引入Vant组件通过如下方式

import {Button} from 'vant'

移动端自适应(Rem 适配)

postcss-pxtorem 是一款postcss插件，用于将px转换成rem。

lib-flexible 用于设置rem基准值

在项目中新建 postcss.config.js 内容如下

module.exports = {
    plugins: {
      autoprefixer: {
        browsers: [
          'Android >= 4.0',
          'iOS >= 8'
        ]
      },
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: [
          '*'
        ]
      },
      'postcss-px2rem': {
        remUnit: 37.5
      }
    }
  }

如上的配置是按照UI设计搞 750* 1334 配置的 (如果是其它尺寸的设计搞则改成对应的即可)

配置 webpack

再项目中间创建 vue.config.js,内容如下

console.log(process.env.NODE_ENV)
const port = process.env.port || 10086;
const path = require('path');

function resolve(dir) {
  // __dirname:项目的路径
  return path.join(__dirname, dir);
}


module.exports = {
  outputDir: process.env.NODE_ENV === 'production' ?  'dist': 'ych5' ,
  productionSourceMap: false, // 生产环境是否 生成SourceMap
  devServer: {
    port,
    // 启动之后 自动打开浏览器
    open: true,
    // 报错的时候全屏显示错误
    overlay: {
      warnings: false,
      errors: true
    },
    // host:'0.0.0.0',
    // hot: true,
    // hotOnly: false,
    // https: false,
    //代理
    proxy: {
      '/api': {
        target: 'http://192.168.43.154:8080',
        ws: true,
        changeOrigin: true
      },

    }
  },
  css: {

  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
        'assets': resolve('src/assets'),
        'store': resolve('src/store'),
        'views': resolve('src/views'),
        'api': resolve('src/api'),
        'components': resolve('src/components'),
        'utils': resolve('src/utils'),
        'styles': resolve('src/styles'),
      }
    }
  },
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
}

// 全局样式 变量、函数
function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        resolve('src/styles/variables.less'),
        resolve('src/styles/mixin.less'),
      ],
    })
}

复制代码

创建 .env、.env.development、.env.production文件

.env

NODE_ENV="development";
BASE_URL='/'
VUE_APP_BASE_API="/dev-api"

.env.development

VUE_APP_ERUDA=true
NODE_ENV="development";
BASE_URL='/'
VUE_APP_BASE_API="/dev-api"

.env.production

NODE_ENV="production";
BASE_URL='/'
VUE_APP_BASE_API="/prod-api"

引入移动端调试神器 eruda

    <% if (VUE_APP_ERUDA === 'true') { %>
      <script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js">script>
      <script> window.eruda.init(); script>
    <% } %>
复制代码