【vue】webapp移动端模板

今天突发奇想，想自己搭建一套移动端的模板来方便自己以后写项目的时候不用再花费无用的时间去搭建项目。

先说下这套模板的项目配置，主要使用 vw 适配移动端

webpack + vue + vue-router + axios + mint-ui + sass + postcss + normalize.css

具体依赖懒得打字了，直接贴 pacage.json 代码

"dependencies": {

"axios": "^0.19.0",

"cssnano": "^4.1.10",

"mint-ui": "^2.2.13",

"normalize.css": "^8.0.1",

"postcss-aspect-ratio-mini": "^1.0.1",

"postcss-cssnext": "^3.1.0",

"postcss-px-to-viewport": "^1.1.0",

"postcss-viewport-units": "^0.1.6",

"postcss-write-svg": "^3.0.1",

"vue": "^2.5.2",

"vue-router": "^3.0.1"

"devDependencies": {

"autoprefixer": "^7.1.2",

"babel-core": "^6.22.1",

"babel-helper-vue-jsx-merge-props": "^2.0.3",

"babel-loader": "^7.1.1",

"babel-plugin-syntax-jsx": "^6.18.0",

"babel-plugin-transform-runtime": "^6.22.0",

"babel-plugin-transform-vue-jsx": "^3.5.0",

"babel-preset-env": "^1.3.2",

"babel-preset-stage-2": "^6.22.0",

"chalk": "^2.0.1",

"copy-webpack-plugin": "^4.0.1",

"css-loader": "^0.28.0",

"cssnano-preset-advanced": "^4.0.7",

"extract-text-webpack-plugin": "^3.0.0",

"file-loader": "^1.1.4",

"friendly-errors-webpack-plugin": "^1.6.1",

"html-webpack-plugin": "^2.30.1",

"node-notifier": "^5.1.2",

"node-sass": "^4.12.0",

"optimize-css-assets-webpack-plugin": "^3.2.0",

"ora": "^1.2.0",

"portfinder": "^1.0.13",

"postcss-import": "^11.0.0",

"postcss-loader": "^2.0.8",

"postcss-url": "^7.2.1",

"rimraf": "^2.6.0",

"sass-loader": "^7.1.0",

"semver": "^5.3.0",

"shelljs": "^0.7.6",

"svg-sprite-loader": "^4.1.6",

"uglifyjs-webpack-plugin": "^1.1.1",

"url-loader": "^0.5.8",

"vue-loader": "^13.3.0",

"vue-style-loader": "^3.0.1",

"vue-template-compiler": "^2.5.2",

"webpack": "^3.6.0",

"webpack-bundle-analyzer": "^2.9.0",

"webpack-dev-server": "^2.9.1",

"webpack-merge": "^4.1.0"

}

src 主要目录详情

| api 请求统一管理

| assets 项目静态资源

| componets 全局组件

| filters 全局过滤器

| icons 图标资源

| router vue-router配置

| utils 工具类

| view 页面资源

| App.vue App.vue

| main.js 项目入口

有问题欢迎留言

下载地址：点击下载

【vue】webapp移动端模板相关推荐

html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
【vue+springboot】excel模板下载、导入功能实现
基于VUE+SpringBoot实现excel模板下载.导入功能背景最近在工作中经常遇到批量导入的功能,而且前端还要提示导入成功几条.失败几条.哪一条数据重复.是哪一条导入的数据出现问题等,抽空写 ...
php vue模板,探索 PHP 与 Vue 通用直出模板方案
测试方案,欢迎提出新的思路,共同探讨! 什么是"页面直出" 我们通常说的"页面直出",其实就是服务端渲染(SSR, Server-Side Render). 最 ...
php vue模板,探索PHP与Vue通用直出模板方案
测试方案,欢迎提出新的思路,共同探讨! 什么是"页面直出" 我们通常说的"页面直出",其实就是服务端渲染(SSR, Server-Side Render). 最 ...
Vue SSR 服务端渲染原理（简易版本）
前言在了解Vue SSR之前,我们要搞明白两个东西先:SSR 和浏览器的渲染, 涉及到的技术: Vue vue-server-renderer Nodejs Express 1. 什么是SSR S ...
Vuex 数据流管理及Vue.js 服务端渲染（SSR）
Vuex 数据流管理及Vue.js 服务端渲染(SSR)项目见:https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e- ...
Vue 搭建移动端 h5 项目步骤
Vue 搭建移动端 h5 项目步骤简介最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目,没有整体的思路,于是我就写了这个步骤. 提示:(2022-10-28更新) vue-cli 和vue ...
vuejs出的手机app有哪些_详解Vue webapp项目通过HBulider打包原生APP
Vue webapp项目通过HBulider打包原生APP 1.webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下: 2.打开HBulid ...
vue文件快速生成模板代码
vue文件快速生成模板代码输入 vue 按 tab 键
cve-2019-11581 Atlassian Jira未授权服务端模板注入漏洞
漏洞描述 Atlassian Jira是澳大利亚Atlassian公司的一套缺陷跟踪管理系统.该系统主要用于对工作中各类问题.缺陷进行跟踪管理. Atlassian Jira Server和Jira ...

【vue】webapp移动端模板

【vue】webapp移动端模板相关推荐

最新文章

热门文章