vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档。
移动端vue项目基础框架搭建,主要包括6个步骤
项目使用的脚手架vue-cli搭建模板,2、使用淘宝lib-flexible搭配rem实现页面的自适应布局,为了方便代码编写使用rpx2rem转化px,使用scss样式预编译器,4、接口封装的aixos封装请求,5、项目中使用vuex和vue-router(在搭建快速模板的时候,问你要不要路由你选个是,会自动生成路由模块),6、引入公用的字体文件,这样移动端的vue框架就基本满足使用了,接下去ui的扩展和应用后续再说喽
1、用脚手架vue-cli 3.0快速搭建模板(网上很多,也有很多教程,node,vue-cli该升级的早点升级)
我找了一个https://blog.csdn.net/weixin_43068247/article/details/82082006,文档后很多任意找一个都可以。。没什么好说的
//安装脚手架
npm install -g @vue/cli
//快速安装
vue create project-name
2、既然是移动端,那移动端的自适应,采用淘宝的lib-flexible的库,下载依赖,
npm i lib-flexible -S
在项目的主文件main.js中引入,并且在其中使用如下图所示
//引入
import 'lib-flexible/flexible.js'
//使用
if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);
}
3、使用px2rem将px自动装成rem单位,rem是什么东东,自己百度喽
//安装npm install px2rem-loader
vue中配置 在build下的 utils.js中,找到generateLoaders 方法,在这里添加
var px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 37.5}}function generateLoaders(loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}}
4、scss预编译器
//引入依赖
npm install sass-loader node-sass --save-dev
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{test: /\.sass$/,loaders: ['style', 'css', 'sass']
}
添加后配置如下
在需要用到sass的地方添加lang=scss
5、封装axios,这个就完全根据个人喜好来封装,你是直接用还是封装后引入使用还是封装后全局使用,看你自己的喜好,网上的资料比较较多,这里就不介绍了。。
6、状态管理器vuex使用请参保文档https://vuex.vuejs.org/zh/guide/,vue-router也是一样,文档很清晰,使用也很方便
7,字体全局引入
完成后,你就有一个基础的移动端基础的框架了,每个步骤的文档,网上文档很多,可以单独查看,本文提供一个整体的思路
vue移动端项目基础框架搭建相关推荐
- 原生微信小程序项目基础框架搭建
原生微信小程序项目基础框架搭建 文件目录结构 1. 环境变量(开发环境, 线上环境,测试环境)便于在不同环境的切换 接口的url webview的前缀url 埋点相关的环境参数 本地存储的环境变量配置 ...
- Koa入门(一)—— Koa项目基础框架搭建
Koa项目基础框架搭建 项目初始化 项目自动重启 配置ES6语法 基本目录搭建 配置env信息 自动加载路由 统一异常处理 自定义异常 异常处理中间件 中间件配置 目录别名配置 项目初始化 mkdir ...
- vue.js项目实战运用篇之抖音视频APP-第二节:项目基础架构搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- 2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目 一.Vue项目搭建 二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
- uniApp介绍篇-1.基础框架搭建与排坑备忘
基础框架搭建与排坑备忘 一.uniApp介绍与注意点 1.目录结构 2.跳转页面 3.条件编译 4.生命周期 5.样式布局 6.图片引用 7.html标签 8.JsApi 9.小程序组件支持 10.事 ...
- nodejs php做平台,用nodejs做一套康养管理系统(1)--基础框架搭建
用nodejs做一套康养管理系统(1)--基础框架搭建 这两天准备开始一个康养项目管理系统的开发,闲来无事想将整个流程写下来,并将本项目开发代码开源.首先本次先梳理下结构,画一个拓扑结构图,再根据结构 ...
- Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖 项目目录结构介绍 移动端适配 头部和底部导航 登录注册页面 密码登录 短信登录 Profile页面 未登录 已登录 Msite页面 首页导航 ShopList ...
- vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面, ...
- Vue 移动端项目创建
前言 移动端我们一般通过Vue脚手架手动自定义创建项目, 只需要Node环境我们就可以通过npm下载Vue脚手架,通过命令创建项目. npm下载脚手架 npm install -g @vue/cli ...
最新文章
- dword类型和十进制有什么区别_微信小商店有几种类型,有什么区别?
- VBS 脚本语言-利用vbs调用ie浏览器访问百度查天气实例演示
- poj1284 Primitive Roots
- C语言开发笔记(一)自动转换和强制转换
- Python学习_字符串格式化
- 列表元素的几种统计方法总结(嵌套列表)
- arrays中copyof复制两个数组_Java的数组初识和拷贝用法
- 服务器连接池怎么配置文件,服务器连接池怎么配置
- mysql 有伪表吗_DML和DQL 总结
- 苹果设备plist编辑器plist editor Pro V2.1绿色版
- 勒索病毒应急措施及防护方案
- 人工智能 一种现代方法 第1章 绪论
- 使用OpenSSL生成证书 pem文件的生成 celery Security
- matlab省略,matlab的省略号
- android手机为什么越用越卡
- iOS苹方字体使用说明
- 青龙面板教程(五):代理设置
- Linux服务器挂掉,使之自动重启脚本
- 安卓在GooglePlay上线后同时平板也能搜到
- RSA加密登录(公钥加密登录)---安全登录