基于vuecli3构建的一个快速开发h5 APP的模板,集成了高德地图、mint-ui,以及antv-f2可视化框架
vue-cli3安装
查看vue cli版本 vue --version
要求nodejs版本8.9以上
如安装了旧版,使用npm uninstall vue-cli -g卸载旧版本
安装vue-cli3.0
npm install -g @vue/cli
创建项目
vue create hello-world
选择安装配置选项
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
❯◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◉ Unit Testing
◯ E2E Testing
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
配置选项说明
css预编译使用Sass/SCSS
代码检查使用 Standard 保存时检查 Lint on save
单元测试工具 Jest
Babel, PostCSS, ESLint配置文件单独保存到配置文件中
- 项目运行及打包
npm run serve
npm run build
添加插件
在项目中添加插件使用vue add,如:vue add axios
vue.config.js配置文件
https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
3.0和2.0不同的是,webpack相关的配置文件都被隐藏了,如果需要配置,则通过vue.config.js来配置
根目录下新建vue.config.js文件,进行相关配置
module.exports={
}
使用vw方案手机屏幕适配
- 安装相关依赖
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced postcss-import postcss-url --S
- 在postcss.config.js文件中添加如下配置
module.exports = {
plugins: {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
},
"postcss-viewport-units": {},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
},
}
}
vue-router
- 查询url参数
this.wxcode = this.$route.query.code;
- 路由跳转
this.$router.push({
path: '/home'
})
- 路由传参数 path方式
this.$router.push({path: `/track/${this.curChildId}`})
路由设置
{
path:'/track/:cid',
name: 'track',
meta: {
title: '历史轨迹'
},
component: () => import('@/pages/entry/track.vue')
}
获取参数
let cid = this.$route.params.cid;
vue定义过滤器的两种方式
1、在组件选项中定义本地的过滤器
filters: {
acceptFormat: function (value) {
if(value==0){
return '待授权'
}else if(value==1){
return '已授权'
}
return ''
}
}
使用
{{acceptStatus | acceptFormat}}
2、全局定义过滤器
新建filters.js文件,添加filter过滤器
/**
* 授权状态
* @param {*} value
*/
export function acceptFormat(value) {
if (value == 0) {
return '待授权'
} else if (value == 1) {
return '已授权'
}
return ''
}
在main,js文件中全局注册定义的过滤器
// register filters
Object.keys(filters).forEach(k => {
console.log('k', k, filters[k])
Vue.filter(k, filters[k])
})
这样我们就可以在所有组件中使用了,不用单独在每个组件中重复定义
{{acceptStatus | acceptFormat}}
配置路由按需加载
const EntryIndex = () => import('@/pages/entry/Index.vue')
const StatisticsIndex = () => import('@/pages/statistics/Index.vue')
const MineIndex = () => import('@/pages/mine/Index.vue')
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes:[
{
name: 'home',
path: 'home',
component: EntryIndex
}, {
name: 'statistics',
path: 'statistics',
component: StatisticsIndex
}, {
name: 'mine',
path: 'mine',
component: MineIndex
}
]
})
vuecli3.x配置环境变量
在cli2.x中会有build和config两个文件夹 ,其中config下面就是用来配置不同环境下的环境变量,例如开发、测试、生产环境等
但在cli3.x中发现没有这两个文件夹,那该如何配置环境变量 ?
查看cli3.0文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
在项目根目录下新建以下文件
.env
.env.local // .local 在所有的环境中被载入,但会被 git 忽略
.env.development
.env.production
然后在文件中设置 ”键=值“ 的形式
例如 VUE_APP_SECRET=secret
如果我们在应用中使用环境变量 ,那么在.env中必须设置以VUE_APP_开头的健=值,否则无法访问到,而在webpack中可以正常使用
process.env.VUE_APP_SECRET
vue cli一般会有三个模式
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit
集成mint-ui移动端ui框架
饿了么出品 http://mint-ui.github.io/docs/#/zh-cn2/quickstart
npm i mint-ui -S
1、全部引入
然后在main.js中引入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
2、按需引入
按需引入需要借助 babel-plugin-component插件,这样可以只引入需要的组件,以达到减小项目体积的目的
npm install babel-plugin-component -D
axios基本用法
1、axios get请求
Vue.axios.get('/api/get', {
params: {
name: '',
age: 45
}
}).then((response) => {
}).catch((error) => {
});
2、axios post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3、合并请求,同时执行多个请求
axios.all([
axios.get('https://api.github.com/xxx/1'),
axios.get('https://api.github.com/xxx/2')
])
.then(axios.spread(function (userResp, reposResp) {
// 上面两个请求都完成后,才执行这个回调方法
console.log('User', userResp.data);
console.log('Repositories', reposResp.data);
}));
axios接口请求封装
- src下创建api文件夹并新建index.js
// api接口
import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs'
/* eslint-disable */
let api = {
// 删除孩子信息
delChild(params) {
let postData = Qs.stringify(params)
return Vue.axios.post('/api/v1/children_delete', postData)
},
// 获取孩子详情
childDetail(params) {
return Vue.axios.get('/api/v1/children_detail', params)
},
}
export default function (Vue) {
Vue.prototype.$api = api
Vue.prototype.$fetch = axios
}
- main.js中引入该文件
import Api from './api'
Vue.use(Api)
- 通过this.$api方式在vue中使用
this.$api.sendVerifyCode({
mobile:this.phone
}).then((res)=>{
})
问题总结
- 当vue router使用history模式,url带参数时页面刷新报错
Uncaught SyntaxError: Unexpected token <
解决:
打开vue.config文件,配置publicPath为‘/’而不是'./'
module.exports = {
// 基本路径
publicPath: '/',
}
- vue-cli3出现Invalid Host header的解决方案
nginx配置了代理后出现 Invalid Host header
新版的webpack-dev-server增加了安全验证,默认检查hostname,如果hostname不是配置内的,将中断访问
解决:禁用主机检查,在根目录下创建文件vue.config.js,然后填入如下内容
module.exports = {
devServer: {
disableHostCheck: true,
}
}
- vue移动端图片不显示问题解决
如果要对图片的样式进行设置可以指定class,但是宽高必须为100%
如果想指定图片的宽高只能用内联样式
- history模式部署问题 报404错误
服务器配置,当匹配不到路由时,跳转到index首页
tomcat配置方式
https://blog.csdn.net/elisunli/article/details/79823245
apache、nginx配置方式
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
nodejs egg服务端路由配置
router.get('*', controller.home.index);
- 使用Axios传参时 ,java后台接收不到值,后发现是Axios的传参请求是Payload方式
Form Data和Request Payload
解决:转换成Form Data的方式
import Qs from 'qs'
let postData = Qs.stringify(params)
或者
let formData = new FormData()
formData.append('score', score)
formData.append('costtime', 0)
- vue-router使用beforeEach钩子获取vuex里的state值,初始页面报错
解决router.app.$store.state.user_info.userinfo
let userinfo = router.app.$store.state.user_info.userinfo
if (userinfo.token) {
next()
} else {
// 跳转到登录页
next({ name: 'login' })
}
相关链接
高德地图
amap高德地图vue组件
高德原生mint-ui框架
mint-uivue-cli3.x文档
vue-cli3.xantv-f2移动端可视化ui框架
antv-f2
最后
代码我已经放到github上面了,欢迎大家star或者fork
github地址
参考阅读
https://www.jianshu.com/p/f8430536059a
https://cli.vuejs.org/zh/guide/installation.html