使用VUE3.0版本搭建H5模板
使用VUE3.0版本搭建H5模板
- 仓库地址,有需要的可以参考参考 https://gitee.com/young_frivolous/vue3-app-template/tree/master
- 为了方便每次写项目都要去搭建一个框架,今天使用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
当执行完这一步的时候,下一步会提示
Check the features needed for your project
在当前项目我们选择
babel,Router,Vuex,CSS
即可下一步让我选择当前项目的版本。我们选择3.x
下一步让我选择路由的模式,选择Y即可
下一步,会让选择css预处理,默认选择第一个即可
- 下一步,会让选择格式配置,选择
ESLint + Prettier
下一步会让选择保存代码格式化方式,选择第一个即可
=
下一步,提示配置项放在哪个位置
下一步提示,是否保存上面的记录
接下来就是等待项目创建
项目启动以及配置
项目安装完之后,进入当前项目,通过命令
cnpm run serve
启动项目即可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.jsonautoprefixer: {}, //自动添加前缀"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.73333unitPrecision: 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 信息的规范校验,也可以避免多人合作时代码格式化不统一造成的冲突;
安装
husky
和lint-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.dataif (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模板流程搭建,自己也可以尝试更加完善
使用VUE3.0版本搭建H5模板相关推荐
- 手把手教你vue3.0项目搭建
前言:最近公司想重构一个项目,CTO选择了vue3.0 + ant-design-vue技术栈,正好自己也想尝试一下,试着搭建一下,以后有更好的会及时补充修改 注:粗体是命令指令,推荐使用cnpm指令 ...
- Vue-router的使用(vue3.0版本)
Vue-router的使用[vue3.0版本] 一.Vue-router 二.Vue项目实现路由跳转 1.Vue脚手架创建项目,安装对应模块 2.最简单的Vue-router路由机制 3.动态路由 3 ...
- 同一电脑上安装且使用vue2.0和vue3.0版本
问题: 想要在自己电脑本地上创建使用vue2.0和vue3.0版本的项目,如何实现? 方法: 第一步: 卸载全局安装的vue版本.(注:自行百度搜索如何卸载全局vue2vue3脚手架) 第二步: 在自 ...
- 基于Vue3.0+ElementPlus后台精简模板
前言 欢迎使用VUE3.0 + ElementPlus 后台管理模板 UI库文档: https://element-plus.gitee.io/#/zh-CN 该项目基于Vuecli 使用Vue3 + ...
- vue3.0环境搭建
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜,一直下一步到完成 -------------------------------------- ...
- vue3.0项目搭建全过程
新建一个vue3.0项目,主要有以下8个步骤,所有步骤均在终端内完成 [1] 升级vue-cli项目至 vue/cli4.0以上 先卸载 npm uninstall vue-cli -g 全局安装脚手 ...
- hadoop3.3.0版本搭建
文章目录 hadoop--3.3.0 版本 默认的端口 伪分布式 设置配置文件 分布式操作 配置文件 启动命令 关闭命令,相反即可 注: hadoop--3.3.0 版本 默认的端口 namenode ...
- Vue3.0手脚架搭建
1.进入cmd命令行 2.确认node是否安装没有安装去官网找对应的安装包 node官网 node -v 3.确认npm是否安装(node安装后自动就安装了) npm -v 4.将npm改为国内镜像, ...
- 使用vue3.0+electron搭建桌面应用并打包exe
第一步:创建vue3.0项目 全局先安装最新的vue cli,下面是安装命令,已安装的可以跳过 npm install -g @vue/cli // npm 安装 yarn global add @v ...
最新文章
- 2022-2028年中国羽绒工业投资分析及前景预测报告
- 什么样的人合适学习Python?
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面HMI自锁按钮和自复位按钮如何理解(Toggle variable Tap variable)...
- 《TCP/IP详解 卷一》读书笔记-----广播多播IGMP
- android 时间传递,Android事件传递
- python做好的程序如何变成小程序-使用python编写简单的小程序编译成exe跑在win10上...
- Windows XP Mode
- Android使用ViewPager+PhotoView实现图片查看器
- IPFS (2) 系统技术架构
- FortiGate 的相关知识
- C语言按键蜂鸣器响灯亮,AT89C52单核A2单片机按下独立按键蜂鸣器响流水灯左移松开按键蜂鸣器不响流水灯右移...
- OSS.Common扩展.Net Standard支持实例分享
- 前端学习(806):数据类型内存分配
- linux系统关于mysql的命令_[操作系统]Linux 操作MySql命令
- 程序员思维训练500题(附带答案)
- f12获取网页文本_【教程】如何抓取动态网页内容
- leapftp连接不上,为什么leapftp连接不上
- 运用软件配置管理加强风险管理
- 我的Unity3d学习总结
- NMOS和PMOS导通电流 走向