开发者社区> 小周sir> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用VUE3.0版本搭建H5模板

简介: 使用VUE3.0版本搭建H5模板
+关注继续查看

使用VUE3.0版本搭建H5模板

  • 为了方便每次写项目都要去搭建一个框架,今天使用vue3.0从0开始实行一个开箱即用移动端模板,
  • 基于vue3.0全家桶 + vant3.0 +scss + rem适配方案 + axios封装,构建H5模板脚手架

版本要求

  • vue cli版本需要node 15 或者更高的版本。或者你可以使用nvm来切换node版本
  • 本次node采用版本是15.14.0

项目创建

  • 确保电脑已经安装node和vue-cli环境
  • 在命令窗口执行vue create my-app
  • 提示会让你选择哪种方案,在这里选择Manually select features

360截图18481112206322.png

  • 当执行完这一步的时候,下一步会提示Check the features needed for your project
  • 在当前项目我们选择babel,Router,Vuex,CSS即可

    2.png

  • 下一步让我选择当前项目的版本。我们选择3.x

3.png

  • 下一步让我选择路由的模式,选择Y即可

4.png

  • 下一步,会让选择css预处理,默认选择第一个即可

5.png

  • 下一步,会让选择格式配置,选择ESLint + Prettier

6.png

  • 下一步会让选择保存代码格式化方式,选择第一个即可

    =7.png

  • 下一步,提示配置项放在哪个位置

    8.png

  • 下一步提示,是否保存上面的记录

    9.png

  • 接下来就是等待项目创建

10.png

项目启动以及配置

  • 项目安装完之后,进入当前项目,通过命令cnpm run serve启动项目即可

    11.png

  • vue.config.js常见配置,项目然后重启即可

    const { defineConfig } = require('@vue/cli-service');
    const path = require('path');
    const resolve = (dir) => path.join(__dirname, dir);
    module.exports = defineConfig({
        transpileDependencies: true,
        publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
        outputDir: 'dist', //  生产环境构建文件的目录
        assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
        lintOnSave: false, //eslint 检测
        productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
        devServer: {
            hot: true,
            port: 9527,
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
        },
        chainWebpack: (config) => {
            config.resolve.alias
                .set('@', resolve('src'))
                .set('assets', resolve('src/assets'))
                .set('api', resolve('src/api'))
                .set('views', resolve('src/views'))
                .set('components', resolve('src/components'));
        },
    });
  • 重置一些css样式,CSS地址 放在自己项目中即可

    安装postcss-px-to-viewport插件,项目采用px转vw形式
    • cnpm install postcss-px-to-viewport -S
    • 需要在根目录新建postcss.config.js文件

      module.exports = {
       plugins: {
        // to edit target browsers: use "browserslist" field in package.json
        autoprefixer: {}, //自动添加前缀
        "postcss-px-to-viewport": {
         unitToConvert: "px", //需要转换的单位,默认为"px"
         viewportWidth: 750, //设计稿的视口宽度,一般是375左右,iphone和很多安卓机等机型都差不多,ipad除外。如果是viewportWidth是375,font-size:14,那么font-size会转换为3.73333vm,计算过程:14÷375×100=3.73333
         unitPrecision: 5, //单位转换后保留的精度
         propList: ["*"], //能转化为vw的属性列表
         viewportUnit: "vw", //希望使用的视口单位
         fontViewportUnit: "vw", //字体使用的视口单位
         selectorBlackList: [], //需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
         minPixelValue: 1, //设置最小的转换数值,如果为1的话,只有大于1的值会被转换
         mediaQuery: false, //媒体查询里的单位是否需要转换单位
         replace: true, //是否直接更换属性值,而不添加备用属性
         exclude: undefined, //忽略某些文件夹下的文件或特定文件
         include: /Test.vue/, //如果设置了include,那将只有匹配到的文件才会被转换
         landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
         landscapeUnit: "vw", //横屏时使用的单位
         landscapeWidth: 1338, //横屏时使用的视口宽度
        },
       },
      };
      
    配置代码格式化
    • 首先安装 prettier
    • 在根目录新建.prettierrc
    {
      "printWidth": 120,
      "tabWidth": 2,
      "singleQuote": true,
      "trailingComma": "none",
      "semi": false,
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "proseWrap": "always",
      "arrowParens": "avoid",
      "bracketSpacing": true,
      "jsxBracketSameLine": true,
      "useTabs": false,
      "eslintIntegration": true,
      "overrides": [
        {
          "files": ".prettierrc",
          "options": {
            "parser": "json"
          }
        }
      ],
      "endOfLine": "auto"
    }
  • husky 是一个 Git Hook 工具。主要实现提交前 eslint 校验和 commit 信息的规范校验,也可以避免多人合作时代码格式化不统一造成的冲突;
  • 安装huskylint-staged
  • 需要在package.json配置
"husky": {
    "hooks": {
      "pre-commit": "lint-staged --allow-empty"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue,html,json}": [
      "vue-cli-service lint"
    ]
  }
配置多环境变量
  • 根据npm run build:xxx打包不通环境包
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "build:stage": "vue-cli-service build --mode staging",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  • 配置文件
  • 在根目录新建.env.development 开发环境
NODE_ENV=development
VUE_APP_BASE_URL=http://jsonplaceholder.typicode.com
  • 在根目录新建.env.production 生产环境
NODE_ENV=production
VUE_APP_BASE_URL=http://jsonplaceholder.typicode.com
  • 在根目录新建.env.staging 预发布环境
NODE_ENV=staging
VUE_APP_BASE_URL=http://jsonplaceholder.typicode.com
配置请求拦截
  • 为了统一请求拦截,使用axios统一处理
  • 首先在本地安装axios请求库
import axios from 'axios'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  withCredentials: false,
  timeout: 5000
})

// request拦截器 request interceptor
service.interceptors.request.use(
  config => {
    let token = 'xxxx'
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// respone拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (response.status && response.status !== 200) {
      return Promise.reject(res)
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    return Promise.reject(error)
  }
)
export default service
接口统一管理
  • 在src/api 文件夹下统一管理接口
  • 你可以建立多个模块对接接口, 比如 home.js 里是首页的接口这里讲解 getUser.js
import request from '@/util/request.js'

export function getUser(params) {
  return request({
    url: '/posts',
    method: 'get',
    params
  })
}
  • 接口使用方式,在vue组件中使用
import { getUser } from '@/api/home'

const params = { user: 'sunnie' }
getUser(params).then((res) => {
  
}).catch((error)=>{})

项目中使用vant

  • 首先安装cnpm i vant -S
  • 我们通过按需引入方式,然后在页面中直接使用即可,需要哪个组件,引入哪个组件

    import { Button } from 'vant'
    import 'vant/lib/index.css'
    
    let app = createApp(App)
    app.use(Button)
安装手机端调试工具
  • 在手机通过vconsole也可以和PC端控制台打印日志
  • 首先安装 cnpm install vconsole -S
  • 在main.js引入
import * as vConsole from 'vconsole'
// 手机端控制台
if (process.env.NODE_ENV !== 'production') {
  new vConsole()
}
  • 以上就是H5模板流程搭建,自己也可以尝试更加完善

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Dubbo——初识RPC、Dubbo框架、使用直连方式实现Dubbo
Dubbo——初识RPC、Dubbo框架、使用直连方式实现Dubbo
42 0
使用kubeadm的方式搭建k8s(1.18.2版本)高可用集群
使用kubeadm的方式搭建k8s(1.18.2版本)高可用集群
35 0
使用宝塔面板搭建MC皮肤站
注意事项: 1.极力推荐Centos系统,Ubuntu系统出现问题,与作者无关 2.未标注哪个系统指令则两者都可适用 3.若标题注释了哪个系统那只能适用那个系统或另一个系统不需要输此指令
114 0
MP实战系列(一)之入门框架搭建和使用
mybatis plus官网:https://github.com/baomidou/mybatis-plus 上面有对应的实际例子,直接导入即可用。 mybatis plus官方的怎么介绍,我就不在这里多说了,大家进入上方网址即可。
1358 0
[译]搭建账户系统
本文讲的是[译]搭建账户系统,Troy Hunt 近期发表了一篇题为『新时代的认证指南』的博文。文章对于「你的网站应该使用什么样的密码规则」给予了很多实用的建议,而通过参考权威机构的建议总是有助于说服同事或老板。
1294 0
Step by Step-构建自己的ORM系列-ORM改进方案思考(上)
一、开篇       在之前的篇幅中,我们讲述了ORM的step by Step来讲述ORM的实现方案,那么下面我们来讲述下ORM关于我们前面的设计方案的一些过程改进和 优化,包括我们在前面的ORM中,有很大的一部分内容,我们并没有考虑或者想到的内容。
808 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
74
文章
89
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载