-
2020-08-04 14:38:01
Vue 搭建移动端 h5 项目步骤
简介
最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目,没有整体的思路,于是我就写了这个步骤。
准备阶段
-
确定项目
ui
框架现阶段比较好的 Vue 移动端
ui
框架:vant
,vux
,cube-ui
,Mint-UI
,Muse UI
,NutUI
等。 -
选择
css
预处理样式语言,(vue-cli
里选择)less
,sass
,stylus
都可以,vue-cli 3
后的版本对应的webpack
的loader
都是配置好的,只需下载对应的包就好了。使用建议:一般选择的css
预处理语言和 ui 框架的预处理语言一致为好,类如vant
使用的是less
,则项目中优先使用less
。 -
是否需要集成
eslint
,stylelint
,prettier
,git hooks
,lint-staged
,一般建议eslint
是必要的,其他不做强制要求,这些都是后面可以自己手动添加的。 -
使用
Vue-cli
生成的项目,集成vuex
,vue-router
,css预处理语言
,eslint
等。项目目录
├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets ├── components ├── main.js ├── router ├── store └── views
样式和适配
-
重置样式
一般是需要加载reset.css 或者normalize.css,用来重置和保护各大浏览器的样式。一般建议使用
normalize.css
。 -
安装并导入准备阶段选择好的 ui 框架
-
选择移动端适配方案
现在主流的适配方案是
rem
和vw
,老项目用的rem
比较多,随着时间的推移,vw
的适配方案会占优势。一般建议新项目直接上vw
适配方案。适配方案链接:
-
全局样式定义。全局样式变量定义:颜色,字号,宽度等
工具插件的添加
-
请求工具的添加(配合环境变量 .env 配置设置 baseUrl,后文有提到)
主流的请求库:
axios
(支持 React Native,Node,浏览器)fly.js
(支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器)。一般需要自己根据项目封装,常见的需要封装请求拦截器和响应拦截器。
-
vuex
全局状态的添加,涉及到登陆,全局 ui 状态管理等。 -
Vue
插件的添加,过滤器,混入,钩子等。 -
添加
vue-router
的导航守卫。 可选 -
fastclick
解决移动端 300 毫秒延迟问题 -
vconsole
方便移动端 debug -
其他工具的添加,时间处理,深拷贝,函数节流防抖等。
项目 eslint,stylelint ,prettier 的配置
-
配置
.eslintrc.js
一般继承
@vue/eslint-config-standard
这个插件的,具体的规则需要在rules
字段定义 -
配置
.stylelintrc
, 可选一般继承
stylelint-config-standard
这个插件的,具体的规则需要在rules
字段定义 -
配置
.prettierrc.js
, 可选一般配置
module.exports = { trailingComma: 'none', tabWidth: 2, semi: false, singleQuote: true, jsxSingleQuote: true, bracketSpacing: true, arrowParens: 'avoid' }
项目命令和环境变量配置
-
根据 webpack 的模式定义环境变量文件,模式可以自己定义
.env.dev #测试环境变量文件,不打包的话不用配置 .env.development #开发环境变量文件 .env.production #生产环境变量文件
Vue 项目环境变量以
VUE_APP
开头,特殊项目变量除外。例如:.env.development
文件NODE_ENV=development VUE_APP_BASE_API=https://api.ex.com VUE_CLI_BABEL_TRANSPILE_MODULES=true
-
根据上面定义的模式配置 npm 脚本
package.json
文件"scripts": { "serve": "vue-cli-service serve", "dev": "vue-cli-service serve", "lint": "vue-cli-service lint", "build:prod": "vue-cli-service build --mode production", "build:dev": "vue-cli-service build --mode dev" }
-
gitHooks
lint-staged
的配置, 可选
vue.config.js(webpack) 的配置
-
deServer
的配置,常见的端口,代理,是否打开浏览器等。
-
webpack
的配置一般需要配置
gzip
和drop_console
等。 -
alias 的配置,项目一般会默认设置, 可选
一般需要配置
@
:src
-
其余的常见配置,可选
publicPath: './', outputDir: 'dist', assetsDir: 'static', productionSourceMap: false, lintOnSave: true
更多相关内容 -
-
学习vue搭建cnode社区
2019-08-10 09:10:29学习vue,搭建cnode社区 -
vue搭建的非常好用的网页模板
2021-05-27 14:36:55vue网页模板 -
电商网站商品示例(vue搭建)
2018-07-19 10:17:19该项目包含的知识点(包括 webpack、 Vuex、vue-router 等)来开发一个具有代表性的电商网站项目。所涉及的内容涵盖了许多典型场景,如商品列表按照价格、销量排序:商品列表按照品牌、价格过滤:动态的购物车;使用... -
webpack4+Vue搭建自己的Vue-cli项目过程分享
2020-10-18 02:57:21主要介绍了webpack4+Vue搭建自己的Vue-cli,对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧 -
基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板
2022-02-23 22:24:12基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板 -
房贷计算器(HTML源码-Echarts展示-Vue搭建)
2018-10-22 10:11:37等额本金与等额本息的计算全过程,以及图形可是化展示,通过Vue搭建制作交互过程 -
vue搭建后台管理系统模板
2020-02-12 11:39:24vue搭建后台管理系统模板,能帮助你快速配置好webpack等功能,大神必备神器,导入即用,无需更改! -
echart+element+vue搭建CDN项目
2021-01-18 16:21:18本项主要介绍echart+element ui+vue成功搭建CDN项目 -
vue脚手架搭建的简单企业站
2020-05-26 17:05:101.vue脚手架开发的简单企业站 2.暂时没有对接后端 3.只实现前端基本功能展示(首页,关于我们,联系我们,产品中心,详情,招商加盟等) 4.可以做二次开发和学习用,可以根据vue,在复杂的知识海洋中,整理整个vue... -
vue如何搭建多页面多系统应用
2020-10-15 05:14:49主要为大家详细介绍了vue搭建多页面多系统应用的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
基于Vue搭建Cesium环境
2021-05-12 21:48:41基于Vue搭建Cesium环境 1、利用脚手架创建一个vue项目 vue create my-test // my-test 是项目名称 2、安装vue-cli-plugin-cesium 插件 npm install --save-dev vue-cli-plugin-cesium 3、安装完成后,使用vue ...基于Vue搭建Cesium环境
1、利用脚手架创建一个vue项目
vue create my-test // my-test 是项目名称
2、安装vue-cli-plugin-cesium 插件
npm install --save-dev vue-cli-plugin-cesium
3、安装完成后,使用vue invoke 来初始化这个插件
vue invoke vue-cli-plugin-cesium //vue invoke 来初始化时会有三个询问 // 1、Please choose a version of 'cesium' from this list 请在列表中选择 cesium 的版本 //2、whether to import styles globally. This operation will automatically import widgets.css in main.js是否全局引入样式,该操作将自动在main.js引入widgets.css? //3、whether to add sample components to the project components directory是否添加示例组件到项目components目录?
4、项目中全局配置main.js中
import Cesium from '../node_modules/cesium/Build/Cesium/Cesium.js' import 'cesium/Widgets/widgets.css' Vue.prototype.Cesium=Cesium;
5、页面中调用
<template> <div id="cesiumContainer"></div> </template> <script> export default { name: 'HelloWorld', data () { return {} }, mounted () { const viewer = new this.Cesium.viewer('cesiumContainer') console.log('viewer:', viewer) } } </script> <style lang="scss" scoped> #cesiumContainer { width: 100%; height: 100%; } </style>
6、效果如图所示
-
electron-vue搭建流程
2022-04-09 21:20:07electron能开发桌面应用,与Vue很好结合 npm install --global @vue/cli vue create electronjs的官方地址 https://www.electronjs.org/ electron-vue的官方文档地址 ...electron能开发桌面应用,与Vue很好结合
npm install --global @vue/cli
vue createelectronjs的官方地址
https://www.electronjs.org/
electron-vue的官方文档地址
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/?q=
创建项目
vue init simulatedgreg/electron-vue my-project
进入项目目录
cd my-project
安装依赖
npm install
通过package.json查看构建项目和运行命令
运行项目
npm run dev
解决以上报红问题
下载vue-devtools插件网络问题,不影响
项目结构
开始使用,下载蚂蚁金服UI框架依赖
蚂蚁金服UI地址:https://www.antdv.com/docs/vue/getting-started-cn/
npm i --save ant-design-vue
在渲染线程全局main.js中导入使用
使用ant-design导航栏
运行查看
npm run dev
打包(打包为桌面应用)
npm run build
解决上述打包遇到问题,找到项目根目录.electron-vue/build.js修改下面代码,修改其中一对的tasks变量名(与后面一对进行区分即可,自定义修改),需要注意的是本文件中一共包含四个tasks,前两个是一对,后两个是一对,修改时请对应修改。
重新编译打包
npm run build
分析上述报错问题,在.electron-vue\build.js 引入multispinner(安装multispinner模块),原因是在 .electron-vue\build.js文件中,代码中使用了 Multispinner ,但没有在开头引用,并且package.json文件中也没有这个依赖文件。
解决方法:先安装 Multispinner依赖 ,再在文件中引用。
npm i multispinner --save
const Multispinner = require(‘multispinner’)
重新打包
npm run build
上述打包等了很久一直没有进展
重新指定淘宝镜像或者vpn,找到package.json,指定taobao下载镜像地址
“electronDownload”:{
“mirror”:“https://npm.taobao.org/mirrors/electron/”
},
打包成功
打包文件在项目的build包下,可对build下的应用.exe文件进行安装
也可以进入win-unpacked包下直接运行应用.exe,不用安装
-
vue搭建购物车页面
2019-02-23 13:00:20利用vue搭建购物车页面webpack打包vue,js文件,共享数据双向绑定,全选和反选以及计算功能 -
基于vue搭建的管理系统
2019-04-23 14:52:35一个使用vue搭建的管理系统,主要运用了这些插件vue@2.5.2+vue-router@3.0.1+vuex@3.0.0+axios@0.17.0+element-ui@2.0.0+vue-echarts@2.5.1 -
vue搭建项目的详细步骤以及说明
2022-04-26 14:01:131.vue create vue-admin 创建项目 2.选择创建方式 默认Vue2配置 默认Vue3配置 手动选择配置 3.自定义配置选项 ( ) Babel // 语法转换 ( ) TypeScript // 使用 TypeScript ( )1.vue create vue-admin 创建项目
2.选择创建方式
- 默认Vue2配置
- 默认Vue3配置
- 手动选择配置
3.自定义配置选项
( ) Babel // 语法转换
( ) TypeScript // 使用 TypeScript
( ) Progressive Web App (PWA) Support // 支持PWA
( ) Router // 路由
( ) Vuex // store
( ) CSS Pre-processors // CSS 预处理器
( ) Linter / Formatter // 代码风格检查和格式化
( ) Unit Testing // 支持单元测试
( ) E2E Testing // 支持E2E测试4. 使用版本
5.这一步提示我们是否使用历史路由器,输入 n 回车
6.预编译器选择
7.单元测试选择方案
1.一般选jest8.依赖选择文件设置
选择package.json9. 创建成功
-
Vue实战篇一: 使用Vue搭建注册登录界面
2020-10-20 14:03:12Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:Vue的指令 Vue基础篇六:Vue使用JSX进行动态渲染 ... -
从零开始学习使用VUE搭建一个管理系统页面
2022-03-25 17:28:27因为我项目中需要使用VUE,因此我接触到了VUE这个前端框架。我分享下学习VUE的流程。 一、安装vue-cli: npm install -g @vue/cli # OR yarn global add @vue/cli 二、配置vue的环境变量: 否则会出现‘vue‘ ... -
Python+Django+Vue搭建系统第一期(环境搭建)
2022-04-30 23:06:39从本期开始,我们将开始搭建自动化测试平台,今天是第一期,我们先进行环境搭建 1、技术选型: 1、Python 2、Django 3、Django REST Framework 4、Vue 5、Element UI 6、JavaScript 7、Mysql 2、创建项目 1、在... -
如何使用electron-vue搭建electron项目
2022-03-13 13:21:48第一步、使用vue-cli2构建模板项目 vue init simulatedgreg/electron-vue my-project 如果你当前使用的是vue-cli3或vue-cli4,那么你需要全局安装vue-cli2: npm install --global vue-cli 当模板现在完毕后,根据... -
Vue 搭建一个前端项目
2020-09-11 09:48:46一、前言 之前图省事,都是在html中引入Vue.js的CDN来使用Vue开发网站项目,其实正确的做法应该是使用Vue构建一个完整的项目,进而进行前后端...vue init webpack vue-project 一路yes! cd vue-project npm run d -
mac vue环境搭建详细教程
2019-01-03 11:57:52mac vue环境搭建详细教程,实际亲测可运行。 -
Vue-cli 搭建简单布局菜单
2019-03-30 15:13:27这项目vue-cli搭建简单左右布局菜单切换的源码,文档参见:https://blog.csdn.net/u012551928/article/details/84335856 -
vant + vue 搭建项目
2020-07-28 10:43:501、安装vue-cli3脚手架 npm install -g @vue/cli 2、通过vue-cli3创建项目 vue create my-project 3、安装vant 通过 npm 安装 npm i vant -S 通过 yarn 安装 yarn add vant 4、引入组件 安装插件 npm i babel-... -
vue搭建前端项目
2018-07-10 15:28:53于是跟着vue群的大佬开始学习,他远程帮我搭建第一个简单的项目网站,我一遍学习一边记录,在这简单记录一下知识点。0:大家可以跟着官网搭建出网站的雏形。然后来看看目录结构,由于学vue时间不长,现在只是主要在... -
vue搭建todolist
2018-03-27 15:34:51这是用vue搭建的一个本地todolist应用,本地就可以跑,支持vue1.x和2.x,可以作为vue入门练习用 -
基于vue-cli搭建自己的移动端项目.zip
2019-11-01 17:48:21个人足迹记录,上传基于vue-cli搭建自己的移动端项目。 -
使用Python+Django+drf+vue搭建测试平台---4搭建vue前端项目
2020-11-12 11:23:50使用Python+Django+drf+vue搭建测试平台—4搭建vue前端项目 1.搭建vue前准备工作 2.安装vue 3.安装Visual Studio Code 4.创建vue项目 搭建vue前准备工作 1、下载地址为:https://nodejs.org/en/ 2、检查node是否... -
基于Vue搭建自己的博客
2019-04-07 05:07:43博客前台 ...(๑◡๑) 前言 以前我们是用hexo + next来搭建自己的博客,但最近学习了Vue...所以就用了Vue搭建了一个自己的个人博客。Vue实际上对应着MVVM模式下的View图层,要搭建一个完整的应用仅仅只有Vue是不够的,...